TypeScript 从 JavaScript 迁移

将现有 JavaScript 项目逐步迁移到 TypeScript。

迁移策略

添加 tsconfig.json
重命名 .js 为 .ts
逐步添加类型注解
启用严格模式

配置 tsconfig.json

tsconfig.json

{
"compilerOptions": {
// 初始阶段：宽松配置
"target": "ES2020",
"module": "commonjs",
"strict": false,
"noImplicitAny": false,
"strictNullChecks": false,
"skipLibCheck": true,

// 允许 JS 文件
"allowJs": true,
"checkJs": false,

// 输出目录
"outDir": "./dist",
"rootDir": "./src"
},
"include": ["src/**/*"],
"exclude": ["node_modules", "dist"]
}

逐步启用严格检查

分阶段启用

// 阶段 1: 基础迁移
{
"compilerOptions": {
"strict": false,
"noImplicitAny": false
}
}

// 阶段 2: 启用类型检查
{
"compilerOptions": {
"strict": true,
"noImplicitAny": true,
"strictNullChecks": true
}
}

// 阶段 3: 完全严格
{
"compilerOptions": {
"strict": true,
"noImplicitAny": true,
"strictNullChecks": true,
"strictFunctionTypes": true,
"strictPropertyInitialization": true
}
}

JSDoc 类型注释

在 JavaScript 中使用 JSDoc 添加类型。

utils.js

/**
* @param {number} a
* @param {number} b
* @returns {number}
*/
function add(a, b) {
return a + b;
}

/**
* @typedef {Object} User
* @property {number} id
* @property {string} name
* @property {string} email
*/

/**
* @param {number} id
* @returns {Promise<User>}
*/
function getUser(id) {
return fetch(`/api/users/${id}`).then(r => r.json());
}

运行结果：

JSDoc 注释添加成功

类型声明文件

为没有类型定义的模块创建声明。

src/types/my-module.d.ts

declare module "my-module" {
export function doSomething(param: string): void;
export class MyClass {
constructor(options: { name: string });
name: string;
}
}

declare 关键字

实例

// 声明全局变量
declare var GLOBAL_CONFIG: {
apiUrl: string;
version: string;
};

// 声明全局函数
declare function myFunction(param: string): void;

// 声明命名空间
declare namespace MyNamespace {
function doSomething(): void;
}

// 使用
console.log(GLOBAL_CONFIG.apiUrl);
myFunction("hello");
MyNamespace.doSomething();