TypeScript入门指南和常规指令集

---

TypeScript 完整指南

---

1. 什么是 TypeScript？

TypeScript 是微软开发的开源编程语言，是 JavaScript 的超集，添加了可选的静态类型和基于类的面向对象编程。TypeScript 最终会被编译成纯 JavaScript，因此可以在任何支持 JavaScript 的环境中运行。

---

2. 发展历史

• 2012年：TypeScript 首次发布。
• 2013年：引入泛型支持。
• 2014年：TypeScript 1.0 发布，进入稳定阶段。
• 2016年：TypeScript 2.0 发布，引入非空断言、控制流分析等特性。
• 2018年：TypeScript 3.0 发布，支持项目引用、元组类型等。
• 2020年：TypeScript 4.0 发布，引入可变元组类型等。
• 2021年：TypeScript 4.5 发布，支持模板字符串类型、Awaited 类型等。

---

3. 核心特性

• 静态类型检查：通过类型注解和类型推断，在编译时捕获错误。
• 面向对象编程：支持类、接口、继承等。
• 模块化：支持 ES 模块和 CommonJS 模块。
• 工具支持：与 Visual Studio Code 等 IDE 深度集成。
• 兼容性：任何合法的 JavaScript 代码都是合法的 TypeScript 代码。

---

4. 应用场景

• 大型应用开发：静态类型检查和模块化特性适合大型项目。
• 前端开发：与 React、Angular、Vue 等框架结合使用。
• Node.js 开发：提供更好的类型安全和工具支持。
• 库和框架开发：许多流行的 JavaScript 库和框架使用 TypeScript 开发。

---

5. 学习路径

5.1 环境搭建

1. 安装 Node.js：从 Node.js 官网 下载并安装。
2. 安装 TypeScript：

   npm install -g typescript
   

3. 安装 IDE：推荐使用 Visual Studio Code。

5.2 基础语法

• 类型注解：

let message: string = "Hello, TypeScript!";

• 接口：

interface User {
  name: string;
  age: number;
}

• 类：

class Animal {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

• 模块：

// math.ts
export function add(x: number, y: number): number {
  return x + y;
}

// main.ts
import { add } from './math';
console.log(add(1, 2));

5.3 进阶学习

• 泛型：

function identity<T>(arg: T): T {
  return arg;
}

• 装饰器：

function log(target: any, key: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;
  descriptor.value = function (...args: any[]) {
    console.log(`Calling ${key} with`, args);
    return originalMethod.apply(this, args);
  };
  return descriptor;
}

class Calculator {
  @log
  add(x: number, y: number): number {
    return x + y;
  }
}

• 高级类型：

type StringOrNumber = string | number;
type Person = { name: string } & { age: number };

5.4 项目实践

• 构建一个简单的项目：如 Todo 应用。
• 参与开源项目：了解大型项目中的 TypeScript 使用。

---

6. 项目工程创建与编译配置

6.1 创建项目

1. 初始化项目：

   mkdir my-ts-project
   cd my-ts-project
   npm init -y
   

2. 安装 TypeScript：

   npm install typescript --save-dev
   

3. 生成 tsconfig.json：

   npx tsc --init
   

6.2 配置 tsconfig.json

生成的 tsconfig.json 包含许多默认选项，以下是一些常用配置：

{
  "compilerOptions": {
    "target": "es6", // 编译目标版本
    "module": "commonjs", // 模块系统
    "outDir": "./dist", // 输出目录
    "rootDir": "./src", // 源码目录
    "strict": true, // 启用严格模式
    "esModuleInterop": true, // 支持 CommonJS 和 ES 模块的互操作
    "skipLibCheck": true, // 跳过库文件的类型检查
    "forceConsistentCasingInFileNames": true // 强制文件名大小写一致
  },
  "include": ["src/**/*"], // 包含的文件
  "exclude": ["node_modules", "**/*.spec.ts"] // 排除的文件
}

6.3 编译项目

1. 编译整个项目：

   npx tsc
   

2. 监视文件变化并自动编译：

   npx tsc --watch
   

---

7. 常用指令集

TypeScript 提供了丰富的命令行工具，以下是一些常用指令及其详细说明：

7.1 安装 TypeScript

在全局环境中安装 TypeScript：

npm install -g typescript

7.2 编译 TypeScript 文件

将 TypeScript 文件（.ts）编译为 JavaScript 文件（.js）：

tsc filename.ts

7.3 监视文件变化并自动编译

使用 --watch 或 -w 参数，监视文件变化并自动重新编译：

tsc filename.ts --watch

7.4 编译整个项目

如果项目中有 tsconfig.json 文件，直接运行 tsc 会编译整个项目：

tsc

7.5 生成 tsconfig.json 文件

tsconfig.json 是 TypeScript 项目的配置文件，用于定义编译选项。可以通过以下命令生成默认的 tsconfig.json：

tsc --init

7.6 指定编译配置文件

如果项目中有多个 tsconfig.json 文件，可以指定使用哪个配置文件：

tsc --project path/to/tsconfig.json

7.7 编译为特定版本的 JavaScript

通过 --target 参数指定编译后的 JavaScript 版本：

tsc filename.ts --target es6

支持的版本包括：es3, es5, es6, es2015, es2016, es2017, es2018, es2019, es2020, es2021, es2022, esnext。

7.8 输出到指定目录

使用 --outDir 参数指定编译后的文件输出目录：

tsc --outDir dist

7.9 启用严格模式

严格模式可以帮助捕获潜在的错误。可以在 tsconfig.json 中启用，也可以通过命令行启用：

tsc --strict

7.10 类型检查

在不生成 JavaScript 文件的情况下，只进行类型检查：

tsc --noEmit

7.11 生成声明文件

生成 .d.ts 声明文件，用于描述 TypeScript 模块的类型信息：

tsc --declaration

7.12 检查 TypeScript 版本

查看当前安装的 TypeScript 版本：

tsc --version

7.13 调试 TypeScript 代码

使用 sourceMap 选项生成 .map 文件，便于调试：

tsc --sourceMap

7.14 排除特定文件

在 tsconfig.json 中使用 exclude 字段排除特定文件或目录，或者在命令行中使用：

tsc --excludeFiles "**/*.spec.ts"

7.15 显示帮助信息

查看所有可用的命令行选项：

tsc --help

7.16 使用 ts-node 直接运行 TypeScript 文件

ts-node 是一个工具，可以直接运行 TypeScript 文件而无需手动编译。首先安装：

npm install -g ts-node

然后直接运行 TypeScript 文件：

ts-node filename.ts

7.17 使用 tsc 的增量编译

启用增量编译，只编译发生变化的文件，以提高编译速度：

tsc --incremental

7.18 生成项目引用

在大型项目中，可以使用项目引用（Project References）来组织代码：

tsc --build path/to/tsconfig.json

7.19 清理编译输出

删除编译生成的 JavaScript 文件：

tsc --clean

7.20 禁用类型检查

在某些情况下，可以禁用类型检查（不推荐）：

tsc --noEmitOnError

7.21 指定模块系统

通过 --module 参数指定模块系统：

tsc --module commonjs

支持的模块系统包括：commonjs, amd, system, umd, es6, es2015, es2020, esnext。

7.22 启用 allowJs

允许编译 JavaScript 文件：

tsc --allowJs

7.23 启用 checkJs

对 JavaScript 文件进行类型检查：

tsc --checkJs

7.24 指定根目录

通过 --rootDir 参数指定项目的根目录：

tsc --rootDir src

7.25 启用 noImplicitAny

禁止隐式的 any 类型：

tsc --noImplicitAny

7.26 启用 strictNullChecks

启用严格的 null 和 undefined 检查：

tsc --strictNullChecks

7.27 启用 noUnusedLocals 和 noUnusedParameters

检查未使用的局部变量和参数：

tsc --noUnusedLocals --noUnusedParameters

7.28 启用 skipLibCheck

跳过库文件的类型检查：

tsc --skipLibCheck

7.29 启用 forceConsistentCasingInFileNames

强制文件名大小写一致：

tsc --forceConsistentCasingInFileNames

7.30 启用 isolatedModules

确保每个文件可以独立编译：

tsc --isolatedModules

---

8. 学习资源

• 官方文档：TypeScript 官方文档
• 在线课程：Coursera、Udemy 等平台的 TypeScript 课程。
• 书籍：《TypeScript 入门教程》、《TypeScript 编程》。
• 社区：GitHub、Stack Overflow 等。

---

通过本指南，你可以从零开始学习 TypeScript，掌握其核心特性，并能够创建和配置 TypeScript 项目，最终成为一名 TypeScript 开发者。