typescript编译工具和代码检查工具(TSLint和ESLint)

1,767 阅读2分钟

typescript编译工具

1. ts-loader
loader: "ts-loader"
options: {
    transpileOnly: false
}
  • 默认关闭,
  • 开启后编译速度变快,但是没有类型检查

如果想在开启的情况下去做类型检查可以使用:

 const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin")
 
 plugins: [
     new ForkTsCheckerWebpackPlugin()
 ]

然后构建可以类型检查了

2. awesome-typescript-loader
  • 更适合与babel集成,使用 babel 的转义和缓存
  • 不需要额外的插件,就可以把类型检查放在独立进程中进行
const {CheckerPlugin} = require("awesome-typescript-loader")

use: [
    loader: "awesome-typescript-loader"
    options: {
        transpileOnly: false
    }
]

plugins: [
     new CheckerPlugin()
 ]

这里有个缺点就是,类型检查有缺陷;

  1. 有了typesctipt 为什么还要babel

image.png

babel7之前:不支持ts

TS -> tsc(ts-loader/awesome-typescript-loader)->js->babel->js

babel7之后:支持ts,但是不能做类型检查

  • 用babel转义TSTS-> babel->JS
  • 用tsc(type checking)做类型检查
// package.json
"@babel/preset-typescript": "7.3.3" //解析ts

// .babelrc

{
    "presets": [
        "@babel/'env",
        "@babel/preset-typescript"
    ],
    "plugins": [
        "@babel/proposal-class-properties",
        "@babel/proposal-object-rest-spread"
    ]
}

如果要做类型检查,安装ts

// tsconfig.json

"noEmit": true

// package.json
"script": {
    "type-check": "tsc --watch"
}

noEmit这个选项开启后表示,ts不做任何输出,制作类型检查;

ts中使用babel注意事项

// 命名空间
namespace X {
    export const x = 1
}

// 类型断言写法只能用as不能使用尖括号
let s = {} as A

//常量枚举
const enum E {A}

//默认导出
export = s


如果么有使用babel,首选Typescript自身编译,配合ts-loader使用

如果项目中已经使用了babel,安装@babel/preset-typescript(配合tsc做类型检查)

两种编译工具不要混用

代码检查工具

Typescript官方转向ESLint的原因:

  1. TSLint存在架构问题,从而影响性能,如果修复这些性能就会破坏现有规则;
  2. ESLint的性能更好,并且社区用户通常拥有ESLint的规则配置(比如针对react、vue的规则),而不会拥有TSLint的规则

image.png

image.png

如何在ts中使用eslint

"@typescript-eslint/eslint-plugin": "^1.10.2",// elsint识别ts的一些特殊语法
"@typescript-eslint/parser": "^1.10.2",// 为eslint提供解析器


// .babelrc
{
    "presets": "@babel/preset-typescript",
    "parserOptions": {
        "project": "./tsconfig.json",
    },
    "plugins": [
        "pulgin:@typescript-eslint/recommended"
    ]
}

// package.json
"script": {
    "lint": "eslint src --ext .js,.ts"
}

babel-eslint: 支持typescript没有的额外语法检查,抛弃typescript,不支持类型检查

typescript-eslint: 基于typescript的ast,支持创建基于类型信息的规则(tsconfig.json)

不要共用

image.png