老项目渐进式支持 Typescript

一年多前搭建的一个项目，使用的是 Webpack5 和 Babel7，本来以为项目一次性结束了，新项目会用 Vite，然而新项目竟然直接拷过去用了！正好我也要离职了，闲来无事索性便把 TypeScript 给支持上，让小伙伴们有更多发挥的空间，也算是跟上潮流吧，毕竟今年给人的感觉是不会 TypeScript 的都是垃圾，因为市场不好所以增加了很多门槛。

首先，配置 Webpack 支持 ts 和 tsx 文件扩展名

extensions: ['.js', '.jsx', '.ts', '.tsx'],

安装 Babel 插件

npm i @babel/preset-typescript -D

配置 Babel 配置文件

presets: [
  "@babel/preset-env", 
  ["@babel/preset-react", {
    development: devMode,
    runtime: 'automatic',
  }],
  "@babel/typescript",
]

添加 tsconfig.json 文件（如果之前有用到 VS Code 的 Path alias，那么应该已经有这个文件了）

{
  "compilerOptions": {
    "target": "esnext",
    "noEmit": true,
    "esModuleInterop": true,
    "baseUrl": "./",
    "jsx": "react-jsx",
    "allowJs": true,
    "experimentalDecorators": false,
  }
}

然后，写一个测试组件并使用它

export default function Test({ name, age } : { name: string, age: number }) {
  return <div>
    {name}'s age is {age}
  </div>
}

import Test from './test';
...
<Test name='tom' age={30} />

webpack 5.69.0 compiled successfully in 1076 ms

看到页面效果，并且 debug 断点可以正常进入

tom's age is 30