typescript-eslint&ts-jest(六)

tslint到eslint

緣由

• tslint執行規則的方式存在一些架構問題，從而影響性能，而修復這些問題會破壞現有規則
• eslint性能更好，社區一般擁有eslint的規則配置（vue或react），而不會擁有tslint的規則配置； typescript和eslint
• ts : 類型檢查、語法轉換
• eslint：代碼風格

typescript-eslint

• 有官方血統，爲eslint專門提供瞭解析eslint的編譯器

開始：

npm i eslint
npm i typescript-eslint/eslint-plugin  // 識別ts的特殊語法
npm i typescript-eslint/parser // 爲eslint提供解析器

// package.json
{
    "script": {
        "lint": "eslint src --ext .js,.ts" 
        "test": "jest"
    }
}
// .eslintrc.json
{
    "parser": "typescript-eslint/parser", // 爲eslint指定解析器、
    "plugins": ["@typescript-eslint"], // 指定插件
    "parserOptions": {
        "project": "./tsconfig.json", // 有一些規則是要使用類型信息的
    }                   // 能夠利用tsconfig裏面的類型信息
    "extends": [
        "plugin:@typescript-eslint/recommended", // 能夠指定規則，官方推薦
    ],
    "rules": {
        "@typescript-eslint/no-inferrable-types": "off"
    }
    }
}

除了使用腳本，能夠按照eslint插件輔助開發 vscode > eslint

babel-eslint和typescript-eslint

• babel-eslint: 支持ts，沒有額外的語法檢查，拋棄了ts，不支持類型檢查
• typescript-eslint: 基於ts的AST,支持建立基於類型信息的規則（tsconfig） 建議：
• 二者底層機制不同，不要一塊兒使用
• babel體系建議使用babel-eslint,不然能夠使用typescript-eslint

使用jest進行單元測試

ts-jest和babel-jest

// ts-jest
- npm i jest ts-jest -D
- npx ts-jest config:init

// jest.config.js
module.exports = {
    preset: 'ts-jest',
    testEnvironment: 'node'
}

// babel-jest 
npm i -D jest babel-jest @types/jest @types/node
// 只編譯，不進行類型檢查，類型檢查須要啓動單獨的腳本； npm run type-check