我们的期望是做到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中的配置进行修改：
但是现阶段的检测仅仅是针对于js的一些基本的检查，对于一些有针对性检查ts的检测我们并没没有做详细的定义，接下来我们来定义这部分的规则
首先使用npm下载一些我们需要用到的包
npm install @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint@6.0.0 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 }],
};
