不是重写所有文件,而是通过渐进式方式启用类型检查:先配置tsconfig.json启用allowjs和checkjs,再用jsdoc为js文件添加类型注释,辅以.d.ts声明补全类型,最后集成type-check脚本实现开发时提示与ci门禁。

在现有 JavaScript 项目中引入 TypeScript,**不是要把所有文件重写成 .ts**,而是通过渐进式方式启用类型检查,保留原有 JS 代码的同时获得类型提示和错误预警。核心是利用 TypeScript 的“JavaScript 模式”(checkJs)和类型声明支持。
1. 安装 TypeScript 并初始化配置
在项目根目录运行:
npm install --save-dev typescript-
npx tsc --init生成tsconfig.json
然后在 tsconfig.json 中启用对 JS 文件的检查:
{
"compilerOptions": {
"allowJs": true,
"checkJs": true,
"skipLibCheck": true,
"noEmit": true,
"strict": false,
"jsx": "preserve",
"moduleResolution": "node"
},
"include": ["**/*.js", "**/*.jsx"],
"exclude": ["node_modules"]
}
注意:"noEmit": true 表示只检查、不编译输出,避免干扰现有构建流程;"strict": false 降低初始门槛,后续可逐步开启(如 strictNullChecks)。
2. 为 JS 文件添加类型注释(可选但推荐)
TypeScript 能理解 JSDoc 注释,用于标注类型。例如:
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
// utils.js
/**
* @param {string} name
* @param {number} age
* @returns {Object}
*/
function createUser(name, age) {
return { name, age };
}
<p>// 调用时如果传错类型,TS 会报错
createUser("Alice", "30"); // ❌ 类型错误:age 应为 number
</p>
常见 JSDoc 类型写法:
-
@type {Array<string>}</string>→ 字符串数组 -
@type {import('./types').User}→ 引入外部类型定义 -
@typedef {Object} Config <prop> {string} host</prop>→ 自定义类型别名
3. 添加类型声明文件(.d.ts)补全缺失类型
第三方库若无类型定义,可手动创建 src/types/global.d.ts(需在 tsconfig.json 的 include 中包含):
// src/types/global.d.ts
declare module 'some-legacy-lib' {
const value: any;
export default value;
}
<p>// 或为全局变量声明
declare const <strong>DEV</strong>: boolean;
</p>
也可安装社区维护的类型包:npm install --save-dev @types/react @types/lodash(查 DefinitelyTyped)。
4. 集成到开发与构建流程
在 package.json 中添加脚本:
"scripts": {
"type-check": "tsc --noEmit",
"type-check:watch": "tsc --noEmit --watch"
}
配合编辑器(VS Code 开箱即用)实时提示;CI 中运行 npm run type-check 做类型门禁。Webpack/Vite 用户无需改动配置——TypeScript 此时仅做检查,不参与打包。
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南










