TS项目搭建所需配置总结

tsConfig.json 文件

该文件存在于项目的根目录下，用于指定编译项目所需的文件和编译选项。

compilerOptions：编译选项

常用的比如：

配置	含义
`"jsx": "react"`	在tsx文件中支持react的jsx语法
`"baseUrl": "."`	解析非相对模块名的基准目录。
`"paths":{"@/": ["src/"]}`	模块名到基于 `baseUrl`的路径映射的列表。可以用`@`开头的简化路径
`"moduleResolution": "node"`	模块解析策略采用Nodejs的算法
`"declarationDir": "dist/types"`	生成的声明文件的储存目录
`"declaration": true`	生成相应的`.d.ts`文件

指定编译文件

如果files include exclude 都没有指定，那么会把目录下所有的ts文件进行编译

files

用来指定待编译文件，一个具体的文件列表

include

指定待编译文件，写了这个属性就不需要files了。写法是正则匹配

exclude

从指定的待编译文件中过滤不需要编译的文件

typings.d.ts 文件

文件存放在根目录下，文件名可以自行修改

目前我们项目中这个文件主要是解决一些三方库没有声明文件会报错的问题，通过在项目根目录下的typings.d.ts文件做如下声明可以解决：

declare module 'xxx';

另外一种情况比较常见，如果我import了一个less文件，会报一个找不到module的错。所以需要这样声明：

declare module '*.less';

eslint与tslint

官方消息tslint在2019年将会被弃用，所以项目中也不再使用tslint。

首先，安装依赖：

$npm install eslint --save-dev
$npm install @typescript-eslint/parser --save-dev

eslint版本建议在6.0.0以上

@typescript-eslint/parser这个包是一个解析器，允许eslint能够实现对ts代码的语法检测。
接着在根目录下建立.eslintrc.js文件，并指明parser:

module.exports = {
    parser: '@typescript-eslint/parser',
}

然后，安装语法检测插件

$npm install @typescript-eslint/eslint-plugin --save-dev

该插件必须和上面的解析器一同使用，用来具体实现定义的ts检测规则，至此，你也可以开始配置你所需要的检测规则了，支持配置的规则详见：Supported Rules

module.exports = {
    parser: '@typescript-eslint/parser',
    plugins: ['@typescript-eslint'],
    extends: [  
      'plugin:react/recommended',  
      'plugin:@typescript-eslint/recommended',  
    ],
    rules:{
        
    }
}

Prettier

仓库地址

用来根据你配置的lint来格式化代码的工具。本节主要介绍如何接入prettier到你的仓库以及搭配eslint来使用

首先，安装必要依赖

$npm install prettier --save-dev
$npm install eslint-config-prettier --save-dev
$npm install eslint-plugin-prettier --save-dev

eslint-config-prettire: 用于关闭所有不必要或与prettier冲突的规则
eslint-plugin-prettier：根据你配置的lint来格式化代码

然后，配置eslintrc.js扩展

module.exports = {
    extends: [
    'plugin:react/recommended',  
    'plugin:@typescript-eslint/recommended',  
    'prettier',  
    'prettier/@typescript-eslint',
    ]
}

通常格式化代码需要在提交之前进行，或者保存文件的时候。那么如果需要在提交前进行，需要参考以下文档

https://prettier.io/docs/en/precommit.html

这里又会涉及两个依赖：husky pretty-quick，具体不再赘述，可以github一下