精通 TypeScript：从入门到实践 – wiki词典

作者： /

精通 TypeScript：从入门到实践

在现代前端和后端开发中，JavaScript 扮演着举足轻重的角色。然而，随着项目规模的扩大和复杂度的增加，JavaScript 的动态特性也带来了一些挑战，例如类型不确定性导致的运行时错误、代码可维护性下降等。为了解决这些问题，Microsoft 推出了 TypeScript——一个 JavaScript 的超集，它在编译时提供了静态类型检查，极大地提升了开发效率和代码质量。

本文将带领你从 TypeScript 的基础概念入手，逐步深入到高级特性，并探讨如何在实际项目中有效地运用它。

一、TypeScript 简介：为何选择它？

1.1 什么是 TypeScript？

TypeScript (TS) 是一种由微软开发的自由和开源的编程语言。它是 JavaScript 的一个超集，这意味着任何合法的 JavaScript 代码也都是合法的 TypeScript 代码。TS 最终会被编译（Transpile）成纯 JavaScript 代码，因此它可以在任何支持 JavaScript 的环境中运行。

1.2 为何使用 TypeScript？

  • 静态类型检查： 这是 TypeScript 最核心的优势。在代码编译阶段就能发现潜在的类型错误，而非等到运行时才暴露，从而减少 Bug，提高代码质量。
  • 更好的可维护性： 类型定义让代码意图更清晰，降低了理解成本。当团队成员接手新代码时，通过类型信息能更快地把握数据结构和函数签名。
  • 强大的 IDE 支持： 现代 IDE（如 VS Code）对 TypeScript 有一流的支持。它能提供智能代码补全、错误提示、重构工具、定义跳转等功能，极大地提高开发效率。
  • 支持 ES6+ 新特性： TypeScript 紧跟 JavaScript 最新标准，甚至能提前使用一些仍在提案阶段的特性，并将其编译成目标 ES 版本。
  • 大型项目友好： 在大型企业级应用中，类型系统能够有效管理复杂的数据流和模块依赖，提升团队协作效率。
  • 跨平台： 由于最终编译成 JavaScript，TypeScript 可以用于前端（React, Angular, Vue）、后端（Node.js）、桌面应用（Electron）等多种场景。

二、TypeScript 核心概念：打下坚实基础

2.1 基础类型

TypeScript 扩展了 JavaScript 的基础类型，提供了更严格的类型定义：

  • 布尔类型 (boolean)： let isDone: boolean = false;
  • 数字类型 (number)： 支持整数和浮点数。let decimal: number = 6;
  • 字符串类型 (string)： let color: string = "blue";
  • 数组类型 (Array<elementType> 或 elementType[])：
    let list: number[] = [1, 2, 3];
    let list2: Array<number> = [1, 2, 3];
  • 元组类型 ([type, type, ...])： 表示已知元素数量和类型的数组。
    let x: [string, number]; x = ["hello", 10];
  • 枚举类型 (enum)： 为一组数值赋予友好的名字。
    enum Color {Red, Green, Blue} let c: Color = Color.Green;
  • Any 类型 (any)： 放弃类型检查，可以赋予任意类型的值。通常用于在开发早期、处理遗留 JavaScript 代码或动态内容时。
    let notSure: any = 4; notSure = "maybe a string";
  • Void 类型 (void)： 表示函数没有返回值。
    function warnUser(): void { console.log("This is my warning message"); }
  • Null 和 Undefined 类型 (null, undefined)： 默认情况下，它们是所有类型的子类型。但在 --strictNullChecks 模式下，只能将 null 和 undefined 赋值给它们自身或 void。
  • Never 类型 (never)： 表示永不存在的值的类型。例如，总是抛出异常或无限循环的函数的返回值类型。
    function error(message: string): never { throw new Error(message); }
  • Unknown 类型 (unknown)： 安全的 any 类型。在对 unknown 类型的值执行操作之前，必须先进行类型检查。
    let u: unknown = 10; let s: string = u as string; // 需要类型断言

2.2 接口（Interfaces）

接口是 TypeScript 中定义对象结构的重要方式。它定义了一个契约，规定了对象应该有哪些属性和方法。

“`typescript
interface Person {
readonly id: number; // 只读属性
name: string;
age?: number; // 可选属性
greet?(message: string): void; // 可选方法
}

let user: Person = {
id: 1,
name: “Alice”,
age: 30,
greet: (msg) => console.log(msg)
};

user.greet(“Hello!”); // Hello!
// user.id = 2; // Error: Cannot assign to ‘id’ because it is a read-only property.
“`

接口还可以描述函数类型、可索引类型和类类型。

2.3 类（Classes）

TypeScript 完全支持 ES6 的类，并在此基础上增加了类型注解、访问修饰符（public, private, protected）和抽象类等。

“`typescript
class Animal {
public name: string; // 默认为 public
private age: number;
protected species: string;

constructor(name: string, age: number, species: string) {
    this.name = name;
    this.age = age;
    this.species = species;
}

move(distanceInMeters: number = 0) {
    console.log(`${this.name} moved ${distanceInMeters}m.`);
}

}

class Dog extends Animal {
constructor(name: string, age: number) {
super(name, age, “Canine”);
}

bark() {
    console.log("Woof! My species is " + this.species); // 可以访问 protected 属性
}

}

let dog = new Dog(“Buddy”, 3);
dog.bark(); // Woof! My species is Canine
dog.move(10); // Buddy moved 10m.
// console.log(dog.age); // Error: Property ‘age’ is private.
“`

2.4 函数（Functions）

TypeScript 提供了更强大的函数类型定义，包括参数类型、返回值类型、可选参数、默认参数和剩余参数。

“`typescript
// 具名函数
function add(x: number, y: number): number {
return x + y;
}

// 匿名函数
let myAdd = function(x: number, y: number): number {
return x + y;
};

// 可选参数
function buildName(firstName: string, lastName?: string): string {
if (lastName) {
return firstName + ” ” + lastName;
}
return firstName;
}

// 默认参数
function buildNameWithDefault(firstName: string, lastName: string = “Smith”): string {
return firstName + ” ” + lastName;
}

// 剩余参数
function sum(…restOfNumbers: number[]): number {
return restOfNumbers.reduce((acc, curr) => acc + curr, 0);
}
console.log(sum(1, 2, 3, 4)); // 10
“`

2.5 泛型（Generics）

泛型允许你在定义函数、接口或类时，不预先指定具体类型，而是在使用时再指定。这增强了代码的灵活性和重用性。

“`typescript
// 泛型函数
function identity(arg: T): T {
return arg;
}

let output1 = identity(“myString”); // output1 的类型是 string
let output2 = identity(123); // 类型推断为 number

// 泛型接口
interface GenericIdentityFn {
(arg: T): T;
}

let myIdentity: GenericIdentityFn = identity;

// 泛型类
class GenericNumber {
zeroValue: T;
add: (x: T, y: T) => T;

constructor(zeroValue: T, addFunction: (x: T, y: T) => T) {
    this.zeroValue = zeroValue;
    this.add = addFunction;
}

}

let myGenericNumber = new GenericNumber(0, (x, y) => x + y);
console.log(myGenericNumber.add(5, 10)); // 15
“`

三、TypeScript 高级特性：深入挖掘潜力

3.1 类型推断（Type Inference）

TypeScript 编译器在没有明确指定类型的地方，会尝试根据上下文推断出变量的类型。

“`typescript
let x = 3; // 推断为 number
let s = “hello”; // 推断为 string

// 当赋值联合类型时
let arr = [0, 1, null]; // 推断为 (number | null)[]
“`

良好的类型推断可以减少冗余的类型注解，让代码更简洁。

3.2 类型断言（Type Assertions）

当你比 TypeScript 更了解某个值的类型时，可以使用类型断言来告诉编译器。它不会改变数据结构，只影响编译时的类型检查。

两种形式：

  • 尖括号语法 (不推荐在 JSX/TSX 中使用)：<Type>value
  • as 语法 (推荐)：value as Type

“`typescript
let someValue: any = “this is a string”;

let strLength1: number = (someValue).length;
let strLength2: number = (someValue as string).length;
“`

3.3 类型守卫（Type Guards）

类型守卫是一种在运行时检查类型的方式，它能够帮助 TypeScript 编译器在特定的代码块中缩小变量的类型范围。

常用的类型守卫：

  • typeof 守卫： 适用于 number, string, boolean, symbol, bigint, undefined, object, function。
    typescript
    function printLength(x: string | number) {
    if (typeof x === "string") {
    console.log(x.length); // x 在这里被推断为 string
    } else {
    console.log(x.toFixed(2)); // x 在这里被推断为 number
    }
    }

  • instanceof 守卫： 检查一个对象是否是某个类的实例。
    “`typescript
    class Dog { bark() {} }
    class Cat { meow() {} }

    function animalSound(animal: Dog | Cat) {
    if (animal instanceof Dog) {
    animal.bark();
    } else {
    animal.meow();
    }
    }
    * **`in` 操作符守卫：** 检查对象是否包含某个属性。typescript
    interface Bird { fly(): void; birdName: string; }
    interface Fish { swim(): void; fishName: string; }

    function isBird(animal: Bird | Fish): animal is Bird {
    return (animal as Bird).fly !== undefined;
    }

    function move(animal: Bird | Fish) {
    if (“birdName” in animal) { // “birdName” in animal 也是一种类型守卫
    animal.fly();
    } else {
    animal.swim();
    }
    }
    * **自定义类型守卫：** 函数返回值为 `parameterName is Type`。typescript
    function isFish(pet: Bird | Fish): pet is Fish {
    return (pet as Fish).swim !== undefined;
    }
    “`

3.4 联合类型（Union Types）和交叉类型（Intersection Types）

  • 联合类型 (|)： 表示一个值可以是几种类型之一。
    let value: string | number;

  • 交叉类型 (&)： 将多个类型合并为一个类型，它包含了所有类型的特性。
    “`typescript
    interface Colorful {
    color: string;
    }
    interface Circle {
    radius: number;
    }

    type ColorfulCircle = Colorful & Circle; // 包含了 color 和 radius 属性
    let cc: ColorfulCircle = { color: “red”, radius: 10 };
    “`

3.5 类型别名（Type Aliases）

类型别名为现有类型创建新名称，这在处理复杂类型时特别有用。

“`typescript
type ID = string | number;
type Point = {
x: number;
y: number;
};
type Greeter = (name: string) => void;

let userId: ID = 123;
let pos: Point = { x: 10, y: 20 };
“`

3.6 声明文件（Declaration Files .d.ts）

当你在 TypeScript 项目中使用纯 JavaScript 库时，为了让 TypeScript 编译器理解这些库的类型，你需要 .d.ts 声明文件。这些文件只包含类型信息，没有实际的实现代码。

大多数流行的 JavaScript 库都提供了自己的 .d.ts 文件，或者你可以在 DefinitelyTyped 社区找到并安装它们（例如：npm install --save-dev @types/react）。

四、TypeScript 工具与生态：提升开发体验

4.1 编译器（TSC）

TypeScript 编译器 (tsc) 是将 TypeScript 代码转换成 JavaScript 代码的核心工具。

  • 安装： npm install -g typescript
  • 编译文件： tsc your_file.ts
  • 监控模式： tsc --watch your_file.ts (文件变动时自动编译)
  • 配置文件 (tsconfig.json)： 项目根目录下的 tsconfig.json 文件是 TypeScript 项目的灵魂。它定义了编译选项、要包含的文件、要排除的文件等。
    json
    {
    "compilerOptions": {
    "target": "es2016", // 编译目标 JS 版本
    "module": "commonjs", // 模块化方案
    "strict": true, // 启用所有严格类型检查选项
    "esModuleInterop": true, // 允许 CommonJS 和 ES 模块之间的互操作性
    "forceConsistentCasingInFileNames": true, // 不允许对同一个文件使用大小写不同的名称
    "outDir": "./dist", // 输出目录
    "rootDir": "./src" // 源码目录
    },
    "include": ["src/**/*.ts"], // 包含的文件
    "exclude": ["node_modules"] // 排除的文件
    }

4.2 IDE 支持

Visual Studio Code (VS Code) 对 TypeScript 有着开箱即用的强大支持。它能够：

  • 实时错误检查： 在你编写代码时就能指出类型错误。
  • 智能代码补全： 基于类型信息提供准确的建议。
  • 重构： 轻松进行变量重命名、提取函数等操作。
  • 定义跳转： 快速查看变量、函数或类的定义。
  • 悬停信息： 将鼠标悬停在变量上即可显示其类型信息。

4.3 构建工具集成

在现代前端项目中，TypeScript 通常与 Webpack、Vite、Rollup 等构建工具结合使用。

  • Webpack/Rollup： 通过 ts-loader 或 rollup-plugin-typescript2 等插件，将 TypeScript 文件视为模块进行处理。
  • Vite： 原生支持 TypeScript，利用 ESBuild 进行超快的编译。
  • Next.js/Nuxt.js： 现代框架通常内置了对 TypeScript 的支持，只需简单的配置即可。

4.4 Linter（ESLint）

ESLint 是 JavaScript 和 TypeScript 代码的静态分析工具，用于发现代码中的问题和强制代码风格。结合 @typescript-eslint/parser 和 @typescript-eslint/eslint-plugin，ESLint 能对 TypeScript 代码进行类型感知的检查。

五、TypeScript 实践：最佳模式与技巧

5.1 项目结构

一个典型的 TypeScript 项目结构：

my-ts-project/
├── src/
│ ├── components/
│ │ ├── Button.ts
│ │ └── index.ts
│ ├── utils/
│ │ ├── helpers.ts
│ │ └── types.ts // 存放公共类型定义
│ ├── services/
│ │ └── api.ts
│ └── index.ts // 入口文件
├── node_modules/
├── dist/ // 编译后的 JS 文件
├── tsconfig.json
├── package.json
├── .eslintrc.js
└── README.md

5.2 严格模式 (--strict)

强烈建议在所有新项目中开启 --strict 编译器选项。它会启用所有严格类型检查选项，包括：

  • --noImplicitAny (不允许隐式的 any 类型)
  • --strictNullChecks (严格的空值检查)
  • --strictFunctionTypes (严格的函数类型检查)
  • --strictPropertyInitialization (严格的属性初始化检查)
  • --noImplicitThis (不允许隐式的 this 类型)
  • --alwaysStrict (在生成文件中始终包含 "use strict")

开启严格模式能显著提高代码的健壮性。

5.3 编写声明文件 (.d.ts)

如果你正在开发一个将发布供他人使用的库，或者需要为没有声明文件的 JavaScript 库编写类型定义，掌握声明文件的编写至关重要。

  • declare 关键字： 用于声明外部变量、函数、类、模块。
  • 模块声明： declare module "some-module" { ... }
  • 全局声明： declare namespace MyLibrary { ... }

5.4 类型守卫的实际应用

在处理来自外部数据源（如 API 响应）或用户输入时，类型守卫非常有用。

“`typescript
interface ApiResponse {
status: ‘success’ | ‘error’;
data?: any; // 实际可能是不同结构
message?: string;
}

interface SuccessData {
items: string[];
count: number;
}

function isSuccessData(data: any): data is SuccessData {
return typeof data === ‘object’ && data !== null && Array.isArray(data.items) && typeof data.count === ‘number’;
}

function processResponse(response: ApiResponse) {
if (response.status === ‘success’ && response.data && isSuccessData(response.data)) {
console.log(“Fetched items:”, response.data.items);
console.log(“Total count:”, response.data.count);
} else if (response.status === ‘error’) {
console.error(“API Error:”, response.message);
} else {
console.warn(“Unexpected response format.”);
}
}
“`

5.5 使用实用工具类型（Utility Types）

TypeScript 内置了许多有用的工具类型，可以帮助你进行类型转换和操作：

  • Partial<T>： 将 T 的所有属性变为可选。
  • Required<T>： 将 T 的所有属性变为必选。
  • Readonly<T>： 将 T 的所有属性变为只读。
  • Pick<T, K>： 从 T 中选择一组属性 K。
  • Omit<T, K>： 从 T 中排除一组属性 K。
  • Exclude<T, U>： 从 T 中排除可赋值给 U 的类型。
  • Extract<T, U>： 从 T 中提取可赋值给 U 的类型。
  • NonNullable<T>： 从 T 中排除 null 和 undefined。
  • Record<K, T>： 创建一个属性名为 K 类型，属性值为 T 类型的对象类型。
  • Parameters<T>： 获取函数 T 的参数类型组成的元组。
  • ReturnType<T>： 获取函数 T 的返回值类型。

这些工具类型极大地提高了类型编程的灵活性。

六、TypeScript 在实际项目中的应用

6.1 前端框架

  • React + TypeScript： create-react-app --template typescript 或 Next.js。通过 interface 和 type 定义组件 props 和 state，使用 FC (Function Component) 或 Class Component 的泛型。
  • Angular： 从一开始就基于 TypeScript 构建，是其核心。
  • Vue + TypeScript： Vue 3 对 TypeScript 支持更佳，Composition API 结合 defineComponent 和 script setup 提供了优秀的开发体验。

6.2 Node.js 后端

  • Express + TypeScript： 定义路由处理函数的请求 (Request)、响应 (Response) 和下一个 (Next) 参数的类型。使用 interface 定义请求体、查询参数、响应数据结构。
  • NestJS： 一个渐进式 Node.js 框架，完全拥抱 TypeScript，提供了强大的模块化、依赖注入和装饰器支持。

6.3 数据结构与算法

在实现复杂的数据结构（如链表、树、图）或算法时，TypeScript 的类型系统可以确保数据的正确性，减少实现过程中的逻辑错误。

七、总结与展望

TypeScript 已经成为现代 Web 开发中不可或缺的一部分。它通过引入静态类型检查，有效解决了 JavaScript 在大型项目开发中的诸多痛点，提升了代码的可读性、可维护性和健壮性。

从基础类型、接口、类到泛型、类型守卫和声明文件，TypeScript 提供了一整套强大的工具来帮助开发者构建高质量的应用程序。配合强大的 IDE 支持和活跃的社区生态，掌握 TypeScript 无疑能让你在软件开发领域更具竞争力。

随着 WebAssembly 和 Deno 等新兴技术的兴起，TypeScript 的应用场景将更加广阔。持续学习和实践，你将能更好地驾驭这个强大的工具，编写出更加优雅、可靠且易于维护的代码。

滚动至顶部