如何让项目支持Typescript

目标

  • 支持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语法需要:

  1. 文件以.tsx为后缀
  2. 启用选项(通过tsconfig.json文件中设置compilerOptions.jsx'react'来实现)

react

当前版本react使用js编写,因此需要安装其ts声明才能使用

npm install @types/react

你可能感兴趣的:(如何让项目支持Typescript)