TypeScript 除了是一个编译 ts 文件的工具以外，还可以[作为一个静态代码检查工具使用]()。

TypeScript 会对文件进行语法解析，如果遇到一些语法错误，或使用了未定义的变量，则会报错。

ESLint 也会对文件进行语法解析，它可以对一些代码风格进行约束，发现未定义的变量，但是对于错误的属性或方法引用，却无能为力。

我们对同样一段代码分别运行 `tsc` 和 `eslint`，会得到如下报错信息：

let myName = 'Tom';

comsole.log(`My name is ${myName}`);

console.log(`My name is ${myNane}`);

console.log(`My name is ${myName.toStrng()}`);

console.log(`My name is ${ myName }`)

| 存在的问题 | `tsc` 是否报错 | `eslint` 是否报错 |

| --------- | ------------- | ---------------- |

| `console` 被勿写成了 `comsole` | ✔️ | ✔️ |

| `myName` 被勿写成了 `myNane` | ✔️ | ✔️ |

| `toString` 被勿写成了 `toStrng` | ✔️ | ✖ |

| 模版字符串中 `${}` 内前后多出了两个空格 | ✖ | ✔️ |

| 少了一个分号 | ✖ | ✔️ |

上例中，由于 `eslint` 无法识别 `myName` 存在哪些方法，所以对于拼写错误的 `toString` 没有检查出来。后面两个错误是代码风格，不影响编译，故 `tsc` 没有检查出来。而未定义的变量两者都能检查出来。

值得注意的是，`tsc` 不仅检查出来了代码问题，还非常智能的给出了修改建议。

下面 TypeScirpt 作为一个静态代码检查工具，与 ESLint 的关系图：

上图中，静态代码检查包括了很多种，其中 TypeScirpt 与 ESLint 有重叠的部分，也有各自独立的部分，虽然发现代码错误比统一的代码风格更重要，但是当一个项目越来越庞大，开发人员也越来越多的时候，代码风格的约束还是必不可少的。

下面我们就来一步一步给我们的 TypeScript 项目添加 ESLint 检查。