React 的js向ts项目转移配置文件

我们的期望是做到ts和js的项目是可以共存的。
我们先要进行tsconfig的配置

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "sourceMap": true,
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  }
}

参数详情参看该连接
"target": "es5",：指定ECMAScript目标版本，我们制定的谁转换到ES5的版本
"lib": ["dom", "dom.iterable", "esnext"]：编译过程中需要引入的库文件的列表
"allowJs": true：允许js文件和ts文件共存
"skipLibCheck": true：忽略所有的声明文件（*.d.ts）的类型检查。
"allowSyntheticDefaultImports": true,:允许从没有设置默认导出的模块中默认导入。不影响代码的输出，仅为了类型检查。
"strict": true,:启用所有严格类型检查选项
"forceConsistentCasingInFileNames": true,:禁止对同一个文件的不一致的引用。
"module": "esnext":指定生成哪个模块系统代码
"moduleResolution": "node":决定如何处理模块
"isolatedModules": true,:将每个文件作为单独的模块
"noEmit": true:不生成输出文件
"jsx": "react":在.tsx文件里支持JSX
关键术语:

• esnext:是一个 JavaScript库，可以将 ES6 草案规范语法转成今天的 JavaScript语法
• ts:分别是普通的ts文件
• tsx:React 支持的 tsx文件
• .d.ts:会参与编译，但不会输出任何代码，它的主要作用是为其他 JS文件提供类型声明。 比较像C C++的 头文件。

配置tslint

1.首先安装相关的配置

npm install -D tslint tslint-react

2.在vscode安装TSlint的插件

3.在vscode的里面，配置settings的文件，具体的配置文件如下，目的是实现用es的规则来检查ts的代码：

{
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "typescript",
      "autoFix": true
    },
    {
      "language": "typescriptreact",
      "autoFix": true
    }
  ]
}

进行如下的配置的截图：

在.eslintrc.js中的配置进行修改：

es规则的配置

但是现阶段的检测仅仅是针对于js的一些基本的检查，对于一些有针对性检查ts的检测我们并没没有做详细的定义，接下来我们来定义这部分的规则

首先使用npm下载一些我们需要用到的包

npm install @typescript-eslint/eslint-plugin  @typescript-eslint/parser [email protected]  eslint-plugin-typescript typescript -D

其中我们要指定的eslint的版本为6.0.0，因为我们的项目是ts和js兼容的项目，这个时候，我们要对eslintrc.js这个文件的overrides这个参数进行配置，对于不同的后缀采用不同的规则和不同的解析方式,但是overrides的extends的参数是在6.0.0版本添加进来的

module.exports = {
  overrides: [
    {
      files: ['*.js', '*.jsx'],
      parser: 'babel-eslint',
      extends: [
        'eslint:recommended',
        'plugin:react/recommended',
        'plugin:import/recommended'
      ],
      plugins: ['react', 'react-hooks', 'import', 'jsx-a11y', 'jsdoc']
    },
    {
      files: ['*.ts', '*.tsx'],
      parser: '@typescript-eslint/parser',
      extends: [
        'plugin:@typescript-eslint/recommended',
        'plugin:@typescript-eslint/eslint-recommended',
        'eslint:recommended',
        'plugin:react/recommended',
        'plugin:import/recommended'
      ],
      plugins: ['@typescript-eslint', 'typescript', 'react', 'react-hooks', 'import', 'jsx-a11y', 'jsdoc'],
      rules: {
        '@typescript-eslint/explicit-member-accessibility': ['error'],
        '@typescript-eslint/indent': ['error', 2],
        'react/jsx-indent': ['error', 2],
        '@typescript-eslint/no-angle-bracket-type-assertion': 'off',
        '@typescript-eslint/no-triple-slash-reference': 0,
        '@typescript-eslint/prefer-interface': 0,
        '@typescript-eslint/no-object-literal-type-assertion': 0,
        'object-curly-spacing': 0,
        '@typescript-eslint/no-var-requires': 0,
        indent: ['error', 2]
      }
    }
  ],

  env: {
    browser: true,
    node: true,
    es6: true,
    jest: true
  },
  parserOptions: {
    ecmaVersion: 6,
    // project: './tsconfig.json',
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true,
      experimentalObjectRestSpread: true
    }
  },
  settings: {
    react: {
      version: 'detect'
    },
    'import/resolver': {
      node: {
        extensions: ['.js', '.jsx', '.ts', '.tsx']
      }
    }
  },
  rules: {
    // Best Practices
    'array-callback-return': ['error', { allowImplicit: true }],
};