老前端代码增加类型检测

不知道大家在做前端项目的时候有没有遇到过类似的需求：领导不知道从哪里接手了一个前端老项目，扔给你，接手之后，你惊奇的发现，这代码写的和💩一样，这个时候难免心里有一千只羊驼赛跑。。。

虽然是坨💩，但为了窝囊费，工作还得继续不是。

其实倒也不用灰心，往往这种情况才能体现出我们程序员的品质不是。

闲话到此为止，今天就说说如何在老前端代码中引入类型检测。这里说的老前端代码指的就是没有使用ts或者其他类型检测系统的项目，这种项目写功能的时候确实爽啊，但是一旦转移给其他人，那可真的就是"以后就不关我的事了哈"。

解决问题的核心是利用了ts结合jsdoc的技术。其实，很多刚毕业的同学，如果一开始就是用typescript进行开发，难免会有"那岂不是要将js文件改成ts文件"这种疑惑(・∀・(・∀・(・∀・*)

其实我们用ts也不一定完整的使用，只用其一部分也是可以的，比如我只想用它来辅助检测类型是否正确，并不想经过它的编译步骤。

我们来一起看看怎么做吧：

首先就是要安装ts，这很好理解，不安装就无法使用：

shell 复制代码

npm install --save-dev typescript

或者：

shell 复制代码

yarn add typescript -D

安装完毕之后，用下面的命令生成一个tsconfig.json配置文件

shell 复制代码

npx tsc --init

如果你细心观察的话，不难发现，其实tsconfig.json作为json文件里面竟然写着注释！！而且IDE还不报错。如果大家对这个感兴趣的话，请在评论区留言哟~

不过我把注释什么的都删掉了。。

现在我们需要让ts干活了，吃白饭可不行。

随便找个文件，就src/App.js好了，在其中写上一个函数，然后调用。注意这个函数需要jsdoc注释，这也是ts对js文件进行检测的依据。

js 复制代码

/**
 * @param {number} a 参数1
 * @param {number} b 参数2
 */
const add = (a,b) => {
  return a+b;
}

add(1,'a');

从jsdoc得知这个add函数需要两个number类型的参数，但是在调用的时候第二个参数的类型是string。

这个时候ts就该报错了。但是没有出意外的话，你会发现，ts现在并没有什么卵用。

那么为什么会这样呢？

其实答案很简单，ts默认是不检查js的，这不就和我一样吗，能偷懒绝不多干一点。、

所以你需要明确的告诉它要去检测js文件中的类型，它其实是知道根据jsdoc注释来检查的。

所以，对tsconfig.json加强配置，如下：

json 复制代码

{
  "compilerOptions": {
    "target": "es2016",
    "module": "commonjs",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true,
    "allowJs": true,
    "checkJs": true
  }
}

配置的两个属性从字面上应该很好理解：项目中允许js文件存在不？允许！要不要检测js，答案是：要！

很好！现在所有的js都开始报错了，我勒个亲娘勒~

就问你慌不慌？

莫慌，还不是你刚才没说清楚，在ts眼中，要么不干，要么全干。

这可怎么行呢？作为一门成熟的语言，这样极端，会被讨厌的。

所以，需要告诉ts干哪些文件。继续对tsconfig.json加强配置：

json 复制代码

{
  "compilerOptions": {
    "target": "es2016",
    "module": "commonjs",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true,
    "allowJs": true,
    "checkJs": true
  },
  "include": [
    "src/app.js"
  ]
}

include的意思就是明确了ts的工作范围，我们目前只打算在写了jsdoc的文件中做类型检测，所以就告诉ts只需要检测这个文件就可以了。

其实，这里可以使用通配符的，一般来说会被写成：src/**/*.js

道理也很简单，不管是啥都要灵活，灵活很重要哦！

等等，还有一个重要的问题没有解决！！！

为什么所有的jsx部分都开始报错了？？

这个问题也很简单，ts初来乍到，也不认识jsx呀！

那就让它认识认识：

先买点学习资料：

bash 复制代码

yarn add @types/react -D

然后投喂给它：

json 复制代码

{
  "compilerOptions": {
    "target": "es2016",
    "module": "commonjs",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true,
    "allowJs": true,
    "checkJs": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src/app.js"
  ]
}

大功告成！现在看看你刚才的代码，是不是被类型检测了呢？

好了，今天就到此为止了吧，总结一下：

对于老项目，直接引入ts风险太大，使用ts+jsdoc注释的方式比较温和
完成上面目标的步骤
可以结合// @ts-ignore等实现更加灵活的类型检测
灵活（圆滑）很重要！