koa+typescript+eslint+vscode 环境配置和解决路径引用问题

本文将会讲述如下几方面：

1.koa 中使用 typescript 时，如何配置tsconfig.json 文件路径

2.koa +typescript 中路径映射的使用方法

3.解决设置 typescript 路径映射后，导致的 eslint 报错

1.koa+typescript的用法

koa 中使用typescript 主要需要配置几个东西:

1. nodemon 可以监听文件变化
2. tsconfig.json vscode中typescript 配置文件，用于配置ts的一些功能
3. ts-node 可以直接运行ts文件

2.typescript 文件路径映射的用法

路径映射可以让，编辑器自动导入和识别正确的文件路径

下面是我的项目中用到的tsconfig.json配置，其中 compilerOptions.paths 就是路径映射。

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es2017",
        "noImplicitAny": true,
        "moduleResolution": "node",
        "sourceMap": true,
        "outDir": "dist",
        "baseUrl": ".",
        "allowSyntheticDefaultImports": true,
        "suppressImplicitAnyIndexErrors": true,
        "paths": {
            "*": [
              	"src/*",
                "/node_modules/*",
                
            ]
        }
    },
    "include": [
        "src/**/*"
    ]
}

⚠️注意：路径映射基于 compilerOptions.baseUrl

也就是说，当 a.ts 文件中引入另外一个 c/b.ts 的时候，ts会去查找文件。查找规则如下：

1. 先查找 a.ts 的同级目录下是否存在b.ts
2. 如果不存在，则进入 compilerOptions.baseUrl 中，去匹配，按照 src/c/b.ts 去查找
3. 如果文件不存在，则进入./node_modules/c/b.ts 去查找

3.ts路径映射导致 eslint报错的解决方法

eslint 会报错如下：Unable to resolve path to module ‘controller/history/MovieHistory’.

大致就是不能解析出路径。因此需要配置插件 eslint mport/resolver

module.export = {
  settings: {
    'import/resolver': {
      typescript: {},
    },
  },
}