TypeScript 常用命令

TypeScript 是 JavaScript 的超集，添加了静态类型系统，提供更好的代码提示、重构能力和错误检查。

安装

# 安装 TypeScript
npm install -D typescript

# 查看版本
npx tsc --version

# 全局安装（可选）
npm install -g typescript

项目初始化

# 生成 tsconfig.json 配置文件
npx tsc --init

常用命令

编译 TypeScript

# 编译指定文件
npx tsc index.ts

# 编译整个项目（根据 tsconfig.json）
npx tsc

# 编译到指定目录
npx tsc --outDir dist

# 监听文件变化，自动编译
npx tsc --watch
npx tsc -w

类型检查（不生成文件）

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

# 常用于 CI 或 lint 脚本
npx tsc --noEmit --pretty

tsconfig.json 常用配置

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "strict": true,
    "jsx": "preserve",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,
    "noEmit": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
  "exclude": ["node_modules", "dist"]
}

常用配置项说明

配置项	说明	大白话解释
strict	启用所有严格类型检查	开启后 TypeScript 会更严格地检查你的代码，帮你发现更多潜在问题。建议新项目都开启
target	编译目标 ES 版本	编译后的 JS 代码要用什么版本的语法。ES2020 表示输出的代码可以在支持 ES2020 的环境中运行
module	模块系统	使用哪种模块语法。ESNext 用 import/export，CommonJS 用 require/module.exports
moduleResolution	模块解析策略	决定 TypeScript 如何查找 import 的模块。bundler 适合 Vite/Webpack 等打包工具项目（推荐），node 适合直接用 Node.js 运行的项目
noEmit	不输出文件	Vite 自己处理编译（通过 esbuild），不需要 tsc 输出 JS 文件。开启后 tsc 只做类型检查，编译交给 Vite
jsx	JSX 处理方式	preserve 保持 JSX 不变（交给 Vite 处理），react 会编译成 React.createElement
paths	路径别名映射	配置 @/ 这样的别名，避免写很长的相对路径 ../../../
skipLibCheck	跳过 .d.ts 文件检查	不检查第三方库的类型声明文件，加快编译速度。一般建议开启
isolatedModules	确保每个文件可独立编译	Vite 使用 esbuild 单文件编译（不跨文件分析类型），开启此选项能提前发现只有在跨文件编译时才能通过的代码错误，避免线上问题

Vite 项目中的 TypeScript

Vite 项目不需要手动编译 TypeScript，Vite 内置了 esbuild 处理 TS：

# 开发（自动处理 TS）
npm run dev

# 构建（自动类型检查 + 编译）
npm run build

在 package.json 中添加类型检查脚本：

{
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "type-check": "vue-tsc --noEmit"
  }
}

💡 Vite 项目中 tsconfig.json 建议设置 "noEmit": true，类型检查交给 vue-tsc 或 IDE。

常见问题

找不到模块或类型声明

# 安装缺失的类型声明
npm install -D @types/node
npm install -D @types/react

# 如果包自带类型，确保 tsconfig.json 中包含
# "moduleResolution": "bundler" 或 "node"

配置路径别名后 IDE 不识别

在 tsconfig.json 中配置 paths，同时在 Vite 中配置 resolve.alias（详见 Vue 3 + Vite 开发指南）：

// vite.config.ts
import { defineConfig } from 'vite'
import path from 'path'
import { fileURLToPath } from 'url'

const __dirname = path.dirname(fileURLToPath(import.meta.url))

export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
})

// tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

编译速度慢

# 启用增量编译
npx tsc --incremental

# 跳过库文件检查
# tsconfig.json
{
  "compilerOptions": {
    "skipLibCheck": true
  }
}

参考

• TypeScript 官方文档
• TypeScript 中文文档
• TypeScript GitHub

---

Vue 3 + Vite 项目完整配置示例

安装依赖

npm install -D typescript vue-tsc @vue/tsconfig

tsconfig.json 配置

{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "strict": true,
    "jsx": "preserve",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,
    "noEmit": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
    "types": ["vite/client", "node"]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "env.d.ts"
  ],
  "exclude": ["node_modules", "dist"]
}

env.d.ts（类型声明文件）

/// <reference types="vite/client" />

declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}

interface ImportMetaEnv {
  readonly VITE_APP_TITLE: string
  readonly VITE_API_URL: string
}

interface ImportMeta {
  readonly env: ImportMetaEnv
}

package.json 脚本

{
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview",
    "type-check": "vue-tsc --noEmit",
    "type-check:watch": "vue-tsc --noEmit --watch"
  }
}

路径别名配置

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import { fileURLToPath } from 'url'

const __dirname = path.dirname(fileURLToPath(import.meta.url))

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
})