# 检查 Node.js 版本
node --version   # 应输出 v18.x.x 或更高

# 检查 npm 版本
npm --version    # 应输出 9.x.x 或更高

# 使用 npm 全局安装
npm install -g typescript

# 或使用 yarn
yarn global add typescript

# 或使用 pnpm
pnpm add -g typescript

# 验证安装
tsc --version
# 输出：Version 5.x.x

# 初始化项目
mkdir my-ts-project && cd my-ts-project
npm init -y

# 作为开发依赖安装
npm install -D typescript

# 通过 npx 运行
npx tsc --version

# 编译单个文件
tsc app.ts

# 编译多个文件
tsc app.ts utils.ts

# 使用配置文件编译（默认读取 tsconfig.json）
tsc

# 监听模式（文件变更时自动编译）
tsc --watch
# 或简写
tsc -w

# 指定输出目录
tsc --outDir dist

# 指定目标 ES 版本
tsc --target ES2022

# 启用严格模式
tsc --strict

# 指定模块系统
tsc --module ESNext

# 仅做类型检查，不输出文件
tsc --noEmit

# 显示所有编译选项
tsc --help

# 生成默认的 tsconfig.json
tsc --init

{
  "compilerOptions": {
    /* 语言和环境 */
    "target": "ES2022",
    "lib": ["ES2022", "DOM", "DOM.Iterable"],
    "jsx": "react-jsx",

    /* 模块系统 */
    "module": "ESNext",
    "moduleResolution": "bundler",
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },

    /* 输出 */
    "outDir": "./dist",
    "rootDir": "./src",
    "declaration": true,
    "declarationMap": true,
    "sourceMap": true,

    /* 严格检查 */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,

    /* 互操作 */
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,

    /* 性能 */
    "skipLibCheck": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

// target: "ES5" 时
// 解构赋值会被编译为兼容代码
const { name, age } = user;
// ↓ 编译后
// var name = user.name;
// var age = user.age;

// target: "ES2022" 时
// 解构赋值保持原样
const { name, age } = user;

// strictNullChecks: false（默认）
const element = document.getElementById("app"); // HTMLElement | null
element.innerHTML = "Hello"; // ✅ 不报错，但运行时可能为 null

// strictNullChecks: true
const element = document.getElementById("app"); // HTMLElement | null
element.innerHTML = "Hello"; // ❌ 编译错误：element 可能为 null
if (element) {
  element.innerHTML = "Hello"; // ✅ 类型收窄后安全
}

// tsconfig.json（根配置）
{
  "files": [],
  "references": [
    { "path": "./packages/core" },
    { "path": "./packages/utils" },
    { "path": "./packages/app" }
  ]
}

// packages/core/tsconfig.json
{
  "compilerOptions": {
    "composite": true,
    "outDir": "./dist",
    "rootDir": "./src"
  },
  "include": ["src/**/*"]
}

# 构建所有项目
tsc --build

# 增量构建
tsc --build --incremental

// .vscode/settings.json
{
  "typescript.tsdk": "node_modules/typescript/lib",
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  }
}

# 1. 安装 TypeScript
npm install -D typescript

# 2. 生成 tsconfig.json
npx tsc --init

# 3. 将 .js 文件逐步重命名为 .ts
mv src/app.js src/app.ts

{
  "compilerOptions": {
    "allowJs": true,  // 允许编译 JavaScript 文件
    "checkJs": true   // 对 JavaScript 文件也进行类型检查
  }
}

{
  "compilerOptions": {
    "target": "ES2022",
    "lib": ["ES2022", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "moduleResolution": "bundler",
    "jsx": "react-jsx",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "baseUrl": ".",
    "paths": {
      "@components/*": ["src/components/*"],
      "@utils/*": ["src/utils/*"],
      "@hooks/*": ["src/hooks/*"],
      "@types/*": ["src/types/*"]
    }
  },
  "include": ["src/**/*", "vite-env.d.ts"],
  "exclude": ["node_modules", "dist"]
}