TypeScript 针对前端项目的渐进式采用策略

在前端项目中逐步采用 TypeScript 的策略通常包括：

TypeScript 简介

如果我们有一个简单的 JavaScript 模块“utils.js”，其中包含一个计算两个数字和的函数：

// utils.js
export function add(a, b) {
    return a + b;
}

首先，我们将文件扩展名改为.ts，然后开始逐步添加类型注释：

// utils.ts
export function add(a: number, b: number): number {
    return a + b;
}

设置 tsconfig.json

在项目根目录下创建`tsconfig.json`来配置`TypeScript`编译器：

{
// Specify the target ECMAScript version for compilation
"target": "es6",

// Specify the module system
"module": "esnext",

// Output directory, where the compiled files are stored
"outDir": "./dist",

// Whether to include source map files for debugging
"sourceMap": true,

// Enable strict type checking options
"strict": true,

// Allow default imports from modules that do not set default exports
"esModuleInterop": true,

// Ignore type checking for libraries
"skipLibCheck": true,

// Ensure consistent case for file names
"forceConsistentCasingInFileNames": true,

// Which files to include for compilation
"include": [
    "src/**/*.ts",
    "src/**/*.tsx" // If TypeScript's JSX is used in the project
],

// Which files or directories are excluded from compilation
"exclude": [
    "node_modules",
    "**/*.spec.ts" // Exclude test files
]
}

**高级配置项**

`paths`：用于路径别名配置，方便导入模块时进行路径管理。

"paths": {
    "@components/*": ["src/components/*"]
}

`baseUrl`：设置项目的基础目录，与路径一起使用可以提供更简洁的导入路径。

"baseUrl": "./src"

`resolveJsonModule`：允许直接导入 JSON 文件。

"resolveJsonModule": true

`lib`：指定项目中使用的库文件集合，比如ECMAScript、DOM等。

"lib": ["es6", "dom"]

`jsx`：如果项目使用了JSX语法，则需要设置此选项。

"jsx": "react-jsx"

**继承配置**

如果你的项目结构比较复杂，可能需要在不同的目录中使用不同的配置，可以使用 extends 属性来继承一个基本的 tsconfig.json：

// tsconfig.app.json in a subdirectory
{
    "extends": "../tsconfig.json",
    "compilerOptions": {
    // You can override or add application-specific compilation options here
    },
    // You can add or modify include and exclude here
}

将 TypeScript 集成到构建过程中

将 TypeScript 集成到构建过程中通常需要调整构建工具（例如 Webpack、Rollup 或 Parcel）的配置。并在配置文件中添加 TypeScript 处理规则。

npm install --save-dev typescript ts-loader webpack webpack-cli

**webpack.config.js配置文件**

const path = require('path');

module.exports = {
  entry: './src/index.ts', // Your entry file, usually index.ts
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx'], // Add .ts and .tsx extensions
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/, // Exclude the node_modules directory
      },
    ],
  },
  devtool: 'source-map', // Generate source map for easy debugging during development
};

在 `tsconfig.json` 中，确保已经配置了正确的 outDir 以匹配 Webpack 的输出目录：

{
  // ...
  "outDir": "./dist",
  // ...
}

现在，您可以通过从命令行运行以下命令来启动构建过程：

npx webpack

这将使用 Webpack 和 ts-loader 将 TypeScript 源代码编译为 JavaScript 并将其输出到 dist 目录。

如果您使用 npm 脚本，则可以向 package.json 添加构建脚本：

{
  "scripts": {
    "build": "webpack"
  }
}

然后通过“npm run build”运行构建。

使用类型定义

如果你在项目中使用了第三方库，请确保安装相应的类型定义包，例如 @types/lodash。对于没有官方类型定义的库，你可以尝试社区提供的定义或编写自己的声明文件。

1.安装类型定义包：

大多数流行的库都有相应的类型定义包，通常位于 @types 命名空间中。例如，如果你在项目中使用 lodash，则可以运行以下命令来安装其类型定义：

npm install --save-dev @types/lodash

**或者使用 Yarn：**

yarn add --dev @types/lodash

2. 自动类型推断

安装类型定义后，TypeScript 编译器将自动识别并使用这些类型定义。您无需在代码中显式导入它们，只需在项目中正常引用该库即可。

3. 自定义类型定义

如果您使用的库没有官方类型定义，或者官方类型定义不完整，您可以编写自己的类型声明文件（`.d.ts`）。通常，此文件应放在与库的 JavaScript 文件相同的位置，或者放在 types 或 @types 目录中。

例如，假设有一个名为“customLib”的库，它的主文件是“customLib.js”。您可以创建一个“customLib.d.ts”文件来声明它的类型：

declare module 'customLib' {
    export function doSomething(data: string): void;
    export interface CustomInterface {
     property: number;
    }
}

然后在你的代码中，TypeScript 将识别并使用这些类型。

4. 社区类型定义

有时社区会提供非官方的类型定义，你可以在 DefinitelyTyped 仓库（https://github.com/DefinitelyTyped/DefinitelyTyped）中找到，或者在 GitHub 上搜索 `@types/library-name`。

5. 类型定义的限制

虽然类型定义有助于提高代码质量，但并非所有库都提供完整的类型定义，或者它们可能与库的实际行为不完全匹配。在这种情况下，您可能需要在代码中使用 any type 或 // @ts-ignore 注释来跳过特定的类型检查。

IDE 集成

确保您的 IDE（例如 VSCode）安装了 TypeScript 插件以获得代码完成、类型检查和其他功能。

逐步迁移其他模块

随着时间的推移，你可以逐渐将其他 JavaScript 模块转换为 TypeScript。例如，假设有一个 app.js，可以类似地将其转换为 app.ts 并添加类型注释。

将app.js重命名为app.ts。这一步标志着该模块正式进入TypeScript环境。

打开 app.ts 并开始向变量、函数参数、返回值等添加类型注释。这有助于 TypeScript 编译器执行类型检查并减少潜在的类型错误。

// JavaScript
function fetchData(url) {
    return fetch(url).then(response => response.json());
}

// Convert to TypeScript
async function fetchData(url: string): Promise {
const response = await fetch(url);
return response.json();
}

对于复杂的数据结构，考虑使用接口（interface）或类型别名（type alias）来定义类型，以提高代码的可读性和可维护性。

interface User {
    id: number;
    name: string;
    email: string;
}

function getUser(): User {
// ...
}

加强类型检查

当你的团队习惯了 TypeScript 之后，你可以在 `tsconfig.json` 中逐步启用更严格的类型检查选项，例如 `strictNullChecks`。

CLIS.CC