Typescript compilation tools and code checking tools (TSLint and ESLint)

Typescript compilation tools

1. ts-loader

loader: "ts-loader"
options: {
    transpileOnly: false
}
Copy the code

Off by default,
When enabled, compilation is faster, but there is no type checking

If you want to do type checking with this turned on, you can use:

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

The build is then type-checked

2. awesome-typescript-loader

Better for integration with Babel, using Babel’s escape and caching
Type checking can be done in a separate process without additional plug-ins

const {CheckerPlugin} = require("awesome-typescript-loader")

use: [
    loader: "awesome-typescript-loader"
    options: {
        transpileOnly: false}]plugins: [
     new CheckerPlugin()
 ]

Copy the code

One drawback here is that type checking is flawed;

Why Babel when you have typesctipt

Before Babel7: TS is not supported

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

After babel7: TS is supported, but no type checking is possible

Escape TS with BabelTS-> babel->JS
Type checking is performed using 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"]}Copy the code

To do type checking, install TS

// tsconfig.json

"noEmit": true

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

If noEmit is enabled, ts does not emit any output and does type check.

Note when using Babel in TS

// Namespace
namespace X {
    export const x = 1
}

// Type assertion can only be written with as, not Angle brackets
let s = {} as A

// Constant enumeration
const enum E {A}

// Export by default
export = s


Copy the code

If Babel is not available, Typescript is compiled in conjunction with TS-Loader

If Babel is already used in your project, install @babel/preset-typescript(for TSC type checking)

Do not mix the two compilation tools

Code inspection tool

Typescript officially switched to ESLint because:

TSLint has architectural issues that affect performance, and fixing those performance would break existing rules;
ESLint has better performance, and community users generally own ESLint rule configurations (e.g. for React, VUE) rather than TSLint rules

How to use ESLint in TS

"@typescript-eslint/eslint-plugin": "^ 1.10.2".// Elsint recognizes some special syntax for ts
"@typescript-eslint/parser": "^ 1.10.2".// Provides a parser for ESLint


// .babelrc
{
    "presets": "@babel/preset-typescript"."parserOptions": {
        "project": "./tsconfig.json",},"plugins": [
        "pulgin:@typescript-eslint/recommended"]}// package.json
"script": {
    "lint": "eslint src --ext .js,.ts"
}
Copy the code

Babel-eslint: Supports additional syntax checking that typescript doesn’t have, abandons typescript and doesn’t support type checking

Typescript-eslint: typescript-based ast that supports the creation of rules based on type information (tsconfig.json)

Don’t share

Typescript compilation tools and code checking tools (TSLint and ESLint)