目标
- 支持ts转译
- 识别.ts、.tsx、.d.ts文件
- 编辑器语法检查和提示（vscode默认支持TypeScript语法，会根据tsconfig.json检查类型，并给出提示）
- eslint（tslint已经不再推荐）
- 支持JSX
- 使用react
实现
以webpack打包工具为例。
【前端面试刷题网站：灵题库，收集大厂面试真题，相关知识点详细解析。】
支持ts转译
webpack支持ts转译有两种方案：基于babel解析器和基于tsc解析。
基于babel
（查看官网或者npmjs或者github以更详细地了解相关工具）
babel主要通过@babel/preset-typescript预设 编译TypeScript代码。
先安装工具
npm install @babel/core babel-loader @babel/preset-typescript
进行相关配置
// webpack.config.js
module.exports = {
// ......other configure
module: {
rules: [
{
test: /.ts$/,
use: ['babel-loader']
}
]
}
};
// .babelrc
{
"presets": ["@babel/preset-typescript"]
}
babel不会读取tsconfig.json，它有自己的配置项，只有tsc才会读取tsconfig.json，另外babel-loader并不会进行类型检查，只是会去掉typescript中类型的部分。如果希望检查类型，需要使用其他工具（后面会说明）。虽然typeScript本身支持很多先进的es语法（如可选链）但是babel-loader的“@babel/preset-typescript”并不支持，所以还需要babel-preset配合。
使用babel-loader时候，目前不支持import moduleName = require('path')语法，推荐使用import moduleName from 'path';参考： https://github.com/babel/babel/issues/7062
由于babel-loader并不会进行TypeScript类型检查，因此我们需要其他的工具来进行类型检查。
fork-ts-checker-webpack-plugin这个插件可以用来进行typescript类型检查。这个插件也是依赖tsc进行代码转换的。
当前版本的create-react-app的TypeScript模板，就是使用@babel/preset-typescript + fork-ts-checker-webpack-plugin方案支持TypeScript的。
基于tsc
使用ts-loader，这个loader调用tsc编译TypeScript代码，并会进行类型检查。
使用很简单，把ts-loader配置到webpack的loaders中即可。
安装
npm install ts-loader
配置webpack
// webpack.config.js
module.exports = {
// ......other configure
module: {
rules: [
{
test: /.ts$/,
use: ['babel-loader', 'ts-loader']
}
]
}
};
注意配置tsconfig.json。
识别.ts、.tsx、.d.ts文件
配置webpack的resolve解析扩展名
module.exports = {
// ......other configure
resolve: {
extensions: ['.tsx', '.ts', '.d.ts']
}
};
注意，如果webpack中配置了路径别名（resolve.alias），则需要在tsconfig.json中也配置一下，否则tsc会报错找不到模块。
eslint
eslint检查代码格式同样有两种方案，一种是babel方案，另一种是TypeScript社区的方案。
@babel/eslint-parser
@babel/eslint-parser
eslint的默认解析器无法解析一些新的语法，例如ts、flow。因此当你使用新语法，并且用babel解析时候，可以用@babel/eslint-parser代替eslint默认的parser。这样@babel/eslint-parser可以让eslint在babel转译过的代码上工作。
babel转译后语法再被解析为estree，这样对es语法的规则就可以进行校验了。校验的代码会和源码有对应关系，这样我们就能在格式不规范的代码上看到错误或者警告提示了。
和@babel/eslint-parser配套使用的是@babel/eslint-plugin，目前它不支持对ts语法进行格式化校验，因为ts社区已经做了相关工作，因此@babel的这个parser和plugin仅仅是用于新语法项目中的es语法格式化。如果需要对新语法格式进行提醒和校验，还是需要用其他的parser和plugin。
这里需要注意eslint-loader、eslint、@babel/eslint-parser、@babel/eslint-plugin之间的版本约束
安装工具
npm install eslint eslint-loader @babel/eslint-parser @babel/eslint-plugin
配置
// webpack.config.js
module.exports = {
// ......other configure
module: {
rules: [
{
test: /.ts$/,
use: ['eslint-loader', 'babel-loader']
}
]
}
};
// .eslintrc
module.exports = {
parser: "@babel/eslint-parser",
plugins: ["@babel"],
rules: {
"@babel/new-cap": "error",
"@babel/no-invalid-this": "error",
"@babel/no-unused-expressions": "error",
"@babel/object-curly-spacing": "error",
"@babel/semi": "error"
}
};
@typescript-eslint/parser
typescript-eslint
使用@typescript-eslint/parser作为eslint的解析器，配套地使用@typescript-eslint/eslint-plugin插件。
安装工具
npm install eslint eslint-loader @typescript-eslint/parser @typescript-eslint/eslint-plugin
配置
// webpack.config.js
module.exports = {
// ......other configure
module: {
rules: [
{
test: /.ts$/,
use: ['eslint-loader', 'babel-loader']
}
]
}
};
// .eslintrc
module.exports = {
parser: "@typescript-eslint/parser",
plugins: ["@typescript-eslint/eslint-plugin"],
rules: {
"@typescript-eslint/await-thenable": "error",
"@typescript-eslint/explicit-function-return-type": "error"
},
parserOptions: {
project: "./tsconfig.json"
}
};
@typescript-eslint/parser 可以解析ts语法，并将ts语法转成estree，因此eslint可以正常将es的格式规则校验。同时@typescript-eslint/eslint-plugin可以对ts语法格式规则进行校验。
实际项目推荐@typescript-eslint/进行校验。
代码提示配置好eslint后，还需要安装vscode的eslint插件，然后就能看到报错提示了。
JSX
支持解析JSX语法需要：
- 文件以.tsx为后缀
- 启用选项（通过tsconfig.json文件中设置
compilerOptions.jsx为'react'来实现）
react
当前版本react使用js编写，因此需要安装其ts声明才能使用
npm install @types/react