迁移现有JavaScript项目

- · -

本节我们一起学习如何把已经存在的 Javascript 到项目迁移到 TypeScript。

1. 安装 TypeScript

可以在全局安装 typescript ，但是更推荐在项目中安装 typescript，这样可以适应不同成员的不同开发环境。

# 使用 npm
npm install -D typescript

# 使用 yarn
yarn add -D typescript

# 使用 pnpm
pnpm add -D typescript

下面的命令都是使用 pnpm 作为包管理器，你也可以使用 npm 或者 yarn。

2. 初始化 TypeScript 配置文件

安装 typescript 后会有一个 tsc 命令在项目的根目录下执行以下命令来生成 tsconfig.json 配置文件。

# 全局有tsc的情况下
tsc --init

# 只在项目中有tsc
./node_modules/.bin/tsc --init

3. 配置 TypeScript

根据项目需求，修改 tsconfig.json 文件。你可以设置目标版本、模块系统、编译选项等。

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "strict": true,
    // 使用 React 时需要
    "jsx": "react"
  },
  // 编译时包含 src 以及子目录下的所有文件
  "include": ["src/**/*"],
  // 编译时忽略 node_modules 目录
  "exclude": ["node_modules"]
}

4. 重命名文件

将项目中需要迁移到 ts 的 js 文件重命名。

• .js -> .ts
• .jsx -> .tsx

5. 类型注解

给不确定类型的值加上类型

index.tsx

- const root = createRoot(document.getElementById("root"));
+ const root = createRoot(document.getElementById("root") as HtmlDivElement);

app.tsx

- const [count, setCount] = useState();
+ const [count, setCount] = useState<number>();

6. 引入声明文件

如果你使用的是第三方 JavaScript 库，你可以在 TypeScript 中使用相应的声明文件来获取类型检查和代码提示的支持。你可以使用@types 包或者编写自己的声明文件（.d.ts）。

# 安装声明文件
pnpm add -D @types/react @types/react-dom

// 使用声明文件
import _ from "lodash";

const numbers = [1, 2, 3, 4, 5];
const sum = _.sum(numbers);
console.log(sum); // Output: 15

7. 编译 TypeScript 代码

我们可以使用 tsc 命令直接把 TypeScript 代码编译为 JavaScript 代码。这样不需要改动打包工具配置文件就可以了。

package.json

{
  "scripts": {
    "tsc": "tsc",
    // 每次代码变动自动把 TypeScript 代码编译为 JavaScript 代码
    "tsc:watch": "tsc --watch",
    // 每次编译前自动编译 TypeScript 代码
    "prebuild": "pnpm run tsc"
  }
}

这样配置以后可以使用 pnpm run tsc 命令来编译 TypeScript 代码。或者使用 pnpm run tsc:watch 命令来监听 TypeScript 代码的变动并自动编译。在执行 pnpm run build 命令时，也会先执行 pnpm run prebuild 命令自动编译。

这样在会在项目中多出很多不需要的 js 文件，可以把编译出来的 js 文件添加到 .gitignore 文件中。

# TypeScript 编译出来的 js 文件
src/index.js
src/app.js

或者可以直接把 ts 编译工作集成到构建流程中，这也是我们推荐的做法。

8. 集成到构建流程中

将 TypeScript 编译步骤集成到你的构建流程中，以便在构建代码时自动编译 TypeScript 文件。

Webpack

如果你使用 Webpack，你可以使用 ts-loader 来处理 TypeScript 文件。

pnpm add -D ts-loader

webpack.config.js

module.exports = {
  entry: "./src/index.ts",
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: "ts-loader",
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js"],
  },
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
};

Babel

如果你使用 Babel，你可以使用 @babel/preset-typescript 来处理 TypeScript 文件。

pnpm add -D install @babel/preset-typescript

babel.config.js

module.exports = {
  presets: ["@babel/preset-typescript"],
};

配置完构建工具以后，每次构建项目时，TypeScript 代码将会被编译为 JavaScript。

希望这些步骤和建议对你在现有 JavaScript 项目中集成 TypeScript 有所帮助。如果你需要进一步了解如何使用 TypeScript，请访问 TypeScript 官方文档。