npm install -D typescript @types/node

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "allowJs": true,
    "checkJs": false,
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": false,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

# 常用 @types
npm install -D @types/react @types/react-dom  # React
npm install -D @types/express                  # Express
npm install -D @types/lodash                   # Lodash
npm install -D @types/jest                     # Jest

# 检查是否有类型定义
# DefinitelyTyped: https://github.com/DefinitelyTyped/DefinitelyTyped
# 类型搜索: https://www.typescriptlang.org/dt/search

# 将 .js 文件重命名为 .ts
mv src/utils.js src/utils.ts
mv src/helpers.js src/helpers.ts

# JSX 文件使用 .tsx
mv src/App.jsx src/App.tsx

// 重命名后的文件可能有类型错误
// 临时使用 any 修复明显的错误

// 之前
function greet(name) {
  return `Hello, ${name}!`;
}

// 临时修复（允许 any）
function greet(name: any) {
  return `Hello, ${name}!`;
}

// 最终版本
function greet(name: string): string {
  return `Hello, ${name}!`;
}

// scripts/rename-to-ts.ts
import fs from "fs";
import path from "path";
import glob from "glob";

const files = glob.sync("src/**/*.js");

files.forEach(file => {
  const newPath = file.replace(/\.js$/, ".ts");
  fs.renameSync(file, newPath);
  console.log(`Renamed: ${file} → ${newPath}`);
});

// 第一步：启用 noImplicitAny
{
  "compilerOptions": {
    "noImplicitAny": true
  }
}

// 第二步：启用 strictNullChecks
{
  "compilerOptions": {
    "noImplicitAny": true,
    "strictNullChecks": true
  }
}

// 第三步：完全启用 strict
{
  "compilerOptions": {
    "strict": true
  }
}

// strictNullChecks 开启后的问题
const element = document.getElementById("app");
element.innerHTML = "Hello"; // ❌ element 可能为 null

// 解决方案 1: 空值检查
if (element) {
  element.innerHTML = "Hello";
}

// 解决方案 2: 非空断言（谨慎使用）
element!.innerHTML = "Hello";

// 解决方案 3: 可选链
element?.innerHTML;

// 解决方案 4: 默认值
const el = element ?? document.createElement("div");

# 安装类型定义
npm install -D @types/lodash

# 使用
import _ from "lodash";
_.chunk([1, 2, 3, 4], 2); // 类型安全

// types/some-untyped-lib.d.ts
declare module "some-untyped-lib" {
  export function doSomething(input: string): number;
  export interface Options {
    verbose?: boolean;
    timeout?: number;
  }
  export default function main(options?: Options): void;
}

// 使用
import doSomething from "some-untyped-lib";
doSomething("hello"); // 类型安全

// types/global.d.ts
declare global {
  // 扩展 Window 接口
  interface Window {
    __APP_CONFIG__: {
      apiUrl: string;
      debug: boolean;
    };
  }

  // 扩展 Express Request
  namespace Express {
    interface Request {
      user?: {
        id: number;
        role: string;
      };
    }
  }
}

export {};

// 解决方案 1: 创建声明文件
// types/untyped-lib.d.ts
declare module "untyped-lib" {
  const lib: any;
  export default lib;
}

// 解决方案 2: 使用 @ts-ignore
// @ts-ignore
import something from "untyped-lib";

// 解决方案 3: 使用 unknown
const data: unknown = require("untyped-lib");

// JavaScript 风格
const value = obj[key];

// TypeScript 解决方案
function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

// 或使用类型断言
const value = (obj as Record<string, any>)[key];

// JavaScript（隐式 any）
function process(data) {
  return data.map(item => item.name);
}

// TypeScript 修复
function process(data: any[]): string[] {
  return data.map(item => item.name);
}

// 最佳方案
interface Item {
  name: string;
}

function process(data: Item[]): string[] {
  return data.map(item => item.name);
}

// JavaScript
class Component {
  constructor() {
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    console.log(this);
  }
}

// TypeScript 解决方案
class Component {
  handleClick = () => {
    console.log(this);
  };
}

## 迁移检查清单

### 准备阶段
- [ ] 安装 TypeScript
- [ ] 创建 tsconfig.json
- [ ] 配置 allowJs: true
- [ ] 安装需要的 @types
- [ ] 配置构建工具支持 .ts 文件

### 文件迁移
- [ ] 重命名 .js → .ts（或 .jsx → .tsx）
- [ ] 修复编译错误（临时使用 any）
- [ ] 确保项目可以正常运行

### 类型完善
- [ ] 移除 any 类型
- [ ] 添加函数参数和返回值类型
- [ ] 定义接口和类型别名
- [ ] 处理 null 和 undefined

### 严格模式
- [ ] 启用 noImplicitAny
- [ ] 启用 strictNullChecks
- [ ] 启用 strict
- [ ] 修复所有严格模式错误

### 最终检查
- [ ] 确保 `tsc --noEmit` 无错误
- [ ] 确保所有测试通过
- [ ] 更新 CI/CD 配置
- [ ] 更新文档