TypeScript 是什么？从零开始认识它 – wiki基地

作者： /

揭开 TypeScript 的神秘面纱：从零开始，深入理解这门改变前端世界的语言

你是否曾在使用 JavaScript 开发大型项目时感到力不暇接？是否曾遇到那些只在运行时才会暴露的、令人头疼的类型错误？是否渴望一个能让你在编写代码时就获得智能提示和错误检查的开发环境？

如果你的答案是肯定的，那么是时候认识一下 TypeScript 了。它不是一门全新的、与 JavaScript 毫无关联的语言，而是基于 JavaScript 构建的、更加强大和可靠的工具。

本文将带你从零开始，一步步揭开 TypeScript 的神秘面纱，理解它是什么，它能为你带来什么，以及如何开始使用它。无论你是一名经验丰富的 JavaScript 开发者，还是刚刚踏入前端领域的新手，本文都将为你提供一份全面且深入的指南。

第一章：理解痛点 —— JavaScript 的局限性

在深入 TypeScript 之前，我们先来聊聊为什么我们需要它。JavaScript 是一门极其灵活、充满活力的语言，它的动态性是其受欢迎的原因之一。然而，正是这种动态性，在构建大型、复杂的应用时，也带来了一些挑战：

  1. 运行时错误（Runtime Errors）： JavaScript 是一门动态类型语言。这意味着变量的类型在运行时才会确定，而且可以在运行时改变。这种灵活性导致许多类型相关的错误直到代码真正执行时才会暴露。例如，你可能在一个本应接收数字的函数中传入了一个字符串，直到程序运行到那里，才会抛出 TypeError。在大项目中，这种错误难以预测和调试。
  2. 代码难以理解和维护： 当项目规模扩大，团队成员增多时，理解别人的代码变得困难。一个函数期望什么类型的参数？返回什么类型的值？一个对象有哪些属性？在没有明确类型信息的情况下，你通常需要阅读函数实现或文档（如果存在的话）才能搞清楚，这降低了开发效率和代码的可维护性。
  3. 重构困难： 修改现有代码（重构）时，很容易不小心破坏依赖它的其他部分。由于缺乏类型约束，编译器无法帮你检测出因为类型不匹配导致的潜在问题，你只能依赖大量的运行时测试来验证修改的正确性。
  4. 工具支持有限： 尽管现代 IDE 对 JavaScript 的支持越来越好，但由于缺乏静态类型信息，智能提示、自动补全、代码导航和重构等功能往往不如静态类型语言那样强大和准确。

这些问题在一个小型脚本中可能无关紧要，但在一个拥有成千上万行代码、由多人协作开发的项目中，它们可能成为效率低下、 Bug 频出的罪魁祸首。

第二章：TypeScript 是什么？—— JavaScript 的超集与类型卫士

正是在这样的背景下，微软推出了 TypeScript。那么，TypeScript 到底是什么呢？

最核心的定义是：TypeScript 是 JavaScript 的一个超集（Superset），并为 JavaScript 添加了静态类型（Static Typing）。

让我们拆解这句话：

  1. JavaScript 的超集： 这意味着任何合法的 JavaScript 代码都是合法的 TypeScript 代码。你可以直接把现有的 .js 文件改成 .ts 文件，它们仍然可以工作（尽管你可能无法立即享受到 TypeScript 的所有好处，因为它还没有类型信息）。这意味着学习 TypeScript 并不是从头开始学习一门全新的语言，而是在你熟悉的 JavaScript 基础上增加新的特性。
  2. 添加静态类型： 这是 TypeScript 最重要的特性。与 JavaScript 的动态类型不同，静态类型意味着在代码执行之前（即编译阶段），TypeScript 编译器就会检查代码中的类型是否匹配。如果你尝试将一个不兼容类型的值赋给一个变量，或者将错误类型的参数传递给函数，TypeScript 编译器就会在你运行代码之前 báo 错。

你可以把 TypeScript 理解为一个披着 JavaScript 外衣的“类型卫士”。它在你的开发流程中增加了一个“检查站”，在你把代码交给 JavaScript 运行时（比如浏览器或 Node.js）执行之前，先进行严格的类型检查。

编译（Compilation）/转译（Transpilation）：

浏览器或 Node.js 只能直接执行 JavaScript 代码，它们不认识 TypeScript 的类型语法。因此，TypeScript 代码需要一个转换过程才能运行。这个过程叫做编译或转译。

TypeScript 官方提供了一个编译器 tsc（TypeScript Compiler）。当你写完 TypeScript 代码（.ts 文件）后，使用 tsc 命令运行编译器，它会检查你的代码是否存在类型错误，并在没有错误的情况下，将你的 TypeScript 代码“编译”成纯粹的 JavaScript 代码（.js 文件）。最终在浏览器或 Node.js 中运行的是这些生成的 .js 文件。

这个编译过程是 TypeScript 工作流程中不可或缺的一环。

第三章：TypeScript 的核心特性——静态类型详解与基础类型

现在我们知道 TypeScript 添加了静态类型，但具体是怎么添加的？有哪些类型？让我们深入了解。

TypeScript 允许你在声明变量、函数参数、函数返回值等地方明确指定它们应该是什么类型。

3.1 基本类型

JavaScript 有一些原始类型，TypeScript 也支持它们，并为它们提供了明确的类型名称：

  • number： 表示数字，包括整数和浮点数。
    typescript
    let age: number = 30;
    let price: number = 19.99;
    // age = "twenty"; // 错误：不能将类型'string'分配给类型'number'
  • string： 表示文本字符串。
    typescript
    let name: string = "Alice";
    let message: string = `Hello, ${name}!`;
    // name = 123; // 错误：不能将类型'number'分配给类型'string'
  • boolean： 表示布尔值，只有 true 和 false。
    typescript
    let isDone: boolean = false;
    let isLoading: boolean = true;
    // isDone = 0; // 错误：不能将类型'number'分配给类型'boolean'

  • null 和 undefined： 表示 JavaScript 中的原始值 null 和 undefined。默认情况下，null 和 undefined 是所有类型的子类型，这意味着你可以把 null 或 undefined 赋值给其他类型的变量。但在严格模式下（通常通过 tsconfig.json 中的 strictNullChecks 选项开启），你需要显式地允许它们。
    “`typescript
    let n: null = null;
    let u: undefined = undefined;

    // 在 strictNullChecks 关闭时：
    let value: string = null; // 允许

    // 在 strictNullChecks 开启时：
    let valueStrict: string = null; // 错误
    let maybeString: string | null = null; // 允许（使用了联合类型，稍后介绍）
    ``
    推荐开启    strictNullChecks`，这能有效避免很多常见的错误。

  • symbol： 表示独一无二的值，通过 Symbol() 函数创建。
    typescript
    const sym1: symbol = Symbol('key1');
    const sym2: symbol = Symbol('key2');
    // console.log(sym1 === sym2); // false

  • bigint： 表示任意大的整数。
    typescript
    let bigNumber: bigint = 100n;
    // let normalNumber: number = 100n; // 错误：不能将类型'bigint'分配给类型'number'

3.2 数组类型

表示同一种类型元素的集合。有两种常用的表示方式：

  • ElementType[]： 元素的类型后面加上 []。
    typescript
    let numbers: number[] = [1, 2, 3, 4];
    let names: string[] = ["Alice", "Bob"];
    // numbers.push("five"); // 错误：类型'string'的参数不能赋给类型'number'的参数
  • Array<ElementType> (泛型数组)： 使用泛型语法表示。
    typescript
    let numbers2: Array<number> = [5, 6, 7];
    这两种方式是等价的，选择哪种取决于个人偏好或项目规范。

3.3 元组类型 (Tuple)

元组是一种特殊的数组，已知元素数量和对应位置的类型，但允许包含不同类型的元素。这在表示固定结构的数据时非常有用，例如一个坐标对 [x, y]。

“`typescript
// 声明一个元组，第一个元素是string，第二个元素是number
let person: [string, number];

// 赋值必须符合类型和数量
person = [“Alice”, 25];

// person = [25, “Alice”]; // 错误：类型不匹配
// person = [“Bob”, 30, true]; // 错误：数量不匹配

console.log(person[0].substring(1)); // “lice” (string方法可用)
console.log(person[1].toFixed(2)); // “25.00” (number方法可用)

// 注意：元组在特定位置的类型是固定的，但可以向元组中添加允许的联合类型元素（行为类似普通数组push，但不太常用且容易混淆）
person.push(“Manager”); // 允许，因为 “Manager” 是 string 类型，在 [string, number] 元组中，push 允许 string | number
// person.push(true); // 错误，boolean 不在 string | number 联合类型中
“`
元组在表示固定结构的数据时比普通数组更精确。

3.4 枚举类型 (Enum)

枚举是 TypeScript 特有的特性（编译后会被转换为 JavaScript 对象），用来定义一组命名的常量。它可以让代码更易读，避免使用魔术字符串或魔术数字。

“`typescript
// 数字枚举
enum Direction {
Up, // 默认值为 0
Down, // 自动递增为 1
Left, // 自动递增为 2
Right // 自动递增为 3
}

let move: Direction = Direction.Up;
console.log(move); // 输出 0

// 手动指定值
enum Status {
Success = 200,
NotFound = 404,
ServerError = 500
}
let responseStatus: Status = Status.Success;
console.log(responseStatus); // 输出 200

// 字符串枚举
enum HttpMethod {
Get = “GET”,
Post = “POST”,
Put = “PUT”,
Delete = “DELETE”
}
let method: HttpMethod = HttpMethod.Get;
console.log(method); // 输出 “GET”

// 枚举的用途：让代码意图更清晰
if (responseStatus === Status.Success) {
console.log(“请求成功！”);
}
“`
枚举非常适合表示状态、选项、方向等有限集合的值。

3.5 Any 类型

当你不知道一个变量的类型，或者希望跳过类型检查时，可以使用 any 类型。any 类型可以被赋值为任何类型的值，并且可以调用任何方法或访问任何属性，而不会在编译时报错。

“`typescript
let uncertain: any = 10;
uncertain = “maybe a string now”;
uncertain = false;

uncertain.toFixed(); // 编译时不会报错，但运行时可能出错
uncertain.toUpperCase(); // 编译时不会报错
``any类型提供了最大的灵活性，但也丧失了 TypeScript 带来的类型安全优势。**应尽量避免使用any`**，或者仅在过渡期、或确实无法确定类型（如处理来自外部的、结构不定的数据）时谨慎使用。

3.6 Void 类型

void 表示函数没有返回值。

“`typescript
function warnUser(): void {
console.log(“This is a warning message.”);
// return “hello”; // 错误：类型’string’不能分配给类型’void’
}

// 声明一个void类型的变量意义不大，它只能被赋值为 null 或 undefined（取决于strictNullChecks）
let unusable: void = undefined;
// unusable = null; // 在 strictNullChecks 关闭时允许
“`

3.7 Never 类型

never 类型表示函数永远不会返回。这通常出现在会抛出异常或包含无限循环的函数中。

“`typescript
function error(message: string): never {
throw new Error(message);
}

function infiniteLoop(): never {
while (true) {
// …
}
}

// never 是所有类型的子类型，但没有类型是 never 的子类型（除了 never 本身）
// 任何变量都不能赋值为 never 类型的值 (因为永远无法到达)
``never` 类型主要用于更高级的类型编程，或者在穷尽检查（Exhaustive Checking）时使用，以确保处理了所有可能的类型情况。

3.8 Unknown 类型

unknown 类型表示该变量可能是任何类型。它与 any 类似，但更安全。unknown 类型的变量不能直接赋值给其他类型（除了 any 和 unknown 本身），也不能直接在其上进行操作，除非你先进行类型检查或类型断言。

“`typescript
let value: unknown;

value = “hello”;
value = 123;

// let s: string = value; // 错误：不能将类型’unknown’分配给类型’string’
let a: any = value; // 允许

// 必须进行类型检查后才能使用
if (typeof value === ‘string’) {
let s: string = value; // 现在允许了，在if块内value被缩小为string类型
console.log(value.toUpperCase());
}
``unknown是比any` 更好的选择，因为它强制你在使用变量之前进行类型检查，从而提高了安全性。

3.9 类型断言 (Type Assertion)

类型断言用来告诉编译器“我知道这个变量是什么类型，请相信我”。它不会在运行时产生任何影响，仅用于编译时的类型检查。有两种形式：

  • “尖括号”语法： <Type>value
    typescript
    let someValue: any = "this is a string";
    let strLength: number = (<string>someValue).length;
  • as 语法： value as Type
    typescript
    let anotherValue: any = "this is also a string";
    let anotherStrLength: number = (anotherValue as string).length;
    推荐使用 as 语法，因为它在 JSX 中不会与标签语法冲突。

注意： 类型断言是强大的工具，但也可能引入错误，因为它绕过了编译器的类型检查。只有当你确实确定某个变量的类型时才使用它。如果你断言的类型是错误的，那么运行时仍然可能出现错误。

3.10 类型推断 (Type Inference)

尽管我们可以显式地为变量标注类型，但 TypeScript 在许多情况下可以自动推断出变量的类型。这是 TypeScript 的一个非常方便的特性，可以减少代码中的类型标注，让代码看起来更简洁，同时又不失类型安全性。

“`typescript
let age = 30; // TypeScript 推断 age 的类型是 number
// age = “hello”; // 错误：不能将类型’string’分配给类型’number’

let name = “Bob”; // TypeScript 推断 name 的类型是 string

let isReady = false; // TypeScript 推断 isReady 的类型是 boolean

const numbers = [1, 2, 3]; // TypeScript 推断 numbers 的类型是 number[]

let person = { name: “Alice”, age: 28 }; // TypeScript 推断 person 的类型是 { name: string; age: number; }

function add(x: number, y: number) { // 函数参数需要显式标注（尽管有时也能推断），但返回值类型通常可以推断
return x + y; // TypeScript 推断返回类型是 number
}

let sum = add(5, 3); // TypeScript 推断 sum 的类型是 number
// add(“a”, “b”); // 错误：类型’string’的参数不能赋给类型’number’的参数
“`
利用好类型推断，可以让你在享受类型安全的同时，避免编写过多的重复类型代码。只有在 TypeScript 无法正确推断、或者你需要更精确地控制类型时，才需要显式地进行类型标注。

第四章：进阶类型概念——让类型更灵活和结构化

除了基本类型，TypeScript 还提供了更强大的方式来定义复杂的类型结构和关系。

4.1 接口 (Interfaces)

接口是 TypeScript 中非常重要的概念，用于定义对象的结构。它可以用来约束对象必须包含哪些属性、属性的类型是什么，以及对象可能包含哪些方法。

“`typescript
// 定义一个表示“人”的接口
interface Person {
name: string;
age: number;
// 可选属性，使用 ?
address?: string;
// 只读属性，初始化后不能修改
readonly id: number;
// 索引签名，表示可以添加任意数量的、键为string、值为any的属性
[propName: string]: any;
}

// 创建符合接口定义的对象
let user: Person = {
id: 123,
name: “Bob”,
age: 40,
address: “123 Main St”,
occupation: “Engineer” // 允许，因为有索引签名 [propName: string]: any;
};

// user.id = 456; // 错误：不能修改只读属性
// user.age = “forty”; // 错误：类型不匹配

// 接口也可以用来描述函数的形状
interface SearchFunc {
(source: string, subString: string): boolean;
}

let mySearch: SearchFunc;
mySearch = function(src: string, sub: string): boolean {
return src.search(sub) > -1;
};

// mySearch = function(src: number, sub: string): boolean { … } // 错误：参数类型不匹配
“`
接口在定义数据结构、函数类型、以及类需要遵循的契约时非常有用。

4.2 类型别名 (Type Aliases)

类型别名用来给一个类型起一个新的名字。这可以是基本类型、联合类型、交叉类型、对象类型等等。类型别名使用 type 关键字。

“`typescript
// 给string起一个别名
type MyString = string;
let s: MyString = “hello”;

// 给对象类型起别名
type Point = {
x: number;
y: number;
};

function printCoordinates(pt: Point) {
console.log((${pt.x}, ${pt.y}));
}
printCoordinates({ x: 10, y: 20 });

// 给联合类型起别名
type ID = number | string;
function printID(id: ID) {
console.log(ID: ${id});
}
printID(101);
printID(“abc”);

// 给函数类型起别名
type GreetFunction = (name: string) => void;
function greet(fn: GreetFunction) {
fn(“World”);
}
function sayHello(name: string) {
console.log(Hello, ${name}!);
}
greet(sayHello);
“`
类型别名可以提高代码的可读性，避免重复定义复杂的类型。

4.3 Interface 与 Type Alias 的比较

Interface 和 Type Alias 在很多方面非常相似，都可以用来描述对象和函数的形状。但在一些细节上有所不同：

  • 扩展性：

    • Interface： 可以通过 extends 关键字互相继承（扩展）。同名的接口会自动合并（Declaration Merging）。这使得 Interface 在声明第三方库的类型时非常有用，因为你可以方便地为已有的接口添加属性。
      “`typescript
      interface Shape {
      color: string;
      }
      interface Square extends Shape {
      sideLength: number;
      }
      let square: Square = { color: “blue”, sideLength: 10 };

    // 声明合并示例：
    interface Box {
    width: number;
    }
    interface Box { // 再次声明同名接口
    height: number; // 会与上面的合并
    }
    let box: Box = { width: 100, height: 200 }; // 必须同时包含 width 和 height
    * **Type Alias：** 可以通过交叉类型 (`&`) 来组合多个类型，达到类似继承的效果。同名的 Type Alias 不会自动合并，会导致错误。typescript
    type ShapeType = {
    color: string;
    };
    type CircleType = ShapeType & { // 使用交叉类型组合
    radius: number;
    };
    let circle: CircleType = { color: “red”, radius: 5 };

    // type BoxType = { width: number; };
    // type BoxType = { height: number; }; // 错误：重复的类型别名
    * **表示非对象类型：** Type Alias 可以用来表示任何类型，包括基本类型、联合类型、交叉类型、元组等。Interface 主要用于描述对象和函数的结构。typescript
    type StringOrNumber = string | number; // Type Alias 可以是联合类型
    // interface StringOrNumber = string | number; // 错误
    * **函数类型表示：** 两者都可以表示函数类型。typescript
    type FuncType = (arg: string) => number;
    interface FuncInterface {
    (arg: string): number;
    }
    “`

什么时候用哪个？

  • 如果需要定义对象或函数的形状，两者都可以。
  • 如果需要利用声明合并的特性（比如为现有库的类型添加属性），使用 Interface。
  • 如果需要定义联合类型、交叉类型、基本类型别名等非对象类型，必须使用 Type Alias。
  • 如果需要继承，Interface 使用 extends，Type Alias 使用 &（交叉类型）。
  • 现代 TypeScript 开发中，很多场景下两者可以互换。选择哪一个有时是团队规范或个人偏好的问题。一些开发者倾向于对对象结构使用 Interface，对其他类型使用 Type Alias。

4.4 联合类型 (Union Types)

联合类型表示一个变量可以拥有多种类型之一。使用 | 符号分隔不同类型。

“`typescript
let result: string | number;

result = “success”; // 允许
result = 200; // 允许
// result = true; // 错误：不能将类型’boolean’分配给类型’string | number’

function printValue(value: string | number | boolean) {
// 在联合类型变量上操作时，只能访问所有成员共有的属性或方法
// console.log(value.toUpperCase()); // 错误：string和number没有toUpperCase方法
// console.log(value.toFixed(2)); // 错误：string和boolean没有toFixed方法

// 必须进行类型收窄（Type Narrowing）
if (typeof value === 'string') {
    console.log(value.toUpperCase()); // 在此分支内，value被确定为string
} else if (typeof value === 'number') {
    console.log(value.toFixed(2));  // 在此分支内，value被确定为number
} else {
    console.log(!value); // 在此分支内，value被确定为boolean
}

}
“`
联合类型非常适合处理函数参数或返回值可能属于不同类型的情况。

4.5 交叉类型 (Intersection Types)

交叉类型将多个类型合并为一个新类型，新类型包含所有原始类型的成员。使用 & 符号连接不同类型。

“`typescript
interface Drawable {
draw(): void;
}

interface Movable {
move(): void;
}

// Shape既是Drawable又是Movable
type Shape = Drawable & Movable;

let myShape: Shape = {
draw: () => console.log(“Drawing…”),
move: () => console.log(“Moving…”)
};

myShape.draw();
myShape.move();

// 另一个例子：合并两个对象类型
type PersonInfo = {
name: string;
age: number;
};

type ContactInfo = {
phone: string;
email: string;
};

type FullInfo = PersonInfo & ContactInfo;

let userProfile: FullInfo = {
name: “Alice”,
age: 35,
phone: “123-456-7890”,
email: “[email protected]”
};
“`
交叉类型常用于组合现有类型，创建拥有更多属性或能力的新类型。它也是实现 Mixin 模式的一种方式。

4.6 字面量类型 (Literal Types)

字面量类型允许你指定变量只能是某个特定的字符串、数字或布尔值。

“`typescript
let direction: “up” | “down” | “left” | “right”; // 字面量联合类型

direction = “up”; // 允许
direction = “left”; // 允许
// direction = “forward”; // 错误：不能将类型'”forward”‘分配给类型'”up” | “down” | “left” | “right”‘

let statusCode: 200 | 404 | 500;
statusCode = 200; // 允许
// statusCode = 201; // 错误

let isTrue: true; // 字面量类型，只能是true
isTrue = true; // 允许
// isTrue = false; // 错误
``
字面量类型通常与联合类型结合使用，用来表示一个变量只能是有限的几个特定值之一，这比使用string或number` 类型更精确。

4.7 泛型 (Generics)

泛型提供了一种方法来创建可以在多种类型上工作的组件，同时又能保证类型安全。它允许你编写可以适用于许多不同类型的代码，而无需牺牲灵活性或类型检查。

想象一个函数，它返回传入的参数：

javascript
function identity(arg) {
return arg;
}
在 JavaScript 中，arg 可以是任何类型。如果用 TypeScript 描述：

typescript
function identityJs(arg: any): any {
return arg;
}
虽然使用了 any，但这丢失了类型信息。如果我们传入 string，函数返回的虽然是 string，但在函数外部看，它仍然是 any。

使用泛型，我们可以捕获传入参数的类型：

“`typescript
function identity(arg: T): T {
return arg;
}

// 调用时，可以显式指定类型参数（可选，通常TypeScript会推断）
let output1 = identity(“myString”); // output1 的类型是 string
let output2 = identity(123); // output2 的类型是 number

// 或者让TypeScript推断
let output3 = identity(“another string”); // TypeScript 推断 output3 的类型是 string
let output4 = identity(true); // TypeScript 推断 output4 的类型是 boolean
``
这里的就是类型变量，它代表我们之后会传入的类型。当我们调用identity(“myString”)时，T被绑定为string，函数签名就变成了(arg: string): string`。

泛型广泛应用于各种场景：

  • 数组： Array<number> (数字数组) 实际上是使用了泛型 Array<T>。
  • Promise： Promise<string> (会解析为字符串的 Promise)。
  • 自定义组件： 创建可重用的数据结构或函数，使其能处理多种数据类型。

泛型是一个比较深入的话题，初学时理解其基本概念即可：它让代码类型不固定，但类型安全。

第五章：为什么使用 TypeScript？—— 带来的巨大价值

理解了 TypeScript 的基本概念和特性后，我们再回顾一下，它究竟带来了哪些价值？

  1. 更早发现错误： TypeScript 最大的优势在于静态类型检查。大部分类型相关的错误可以在编译阶段（甚至在编写代码时，得益于编辑器的实时检查）被发现，而不是等到运行时。这大大减少了调试时间，提高了开发效率。
  2. 增强代码可读性和可维护性： 类型标注本身就是一种非常有效的文档。通过阅读类型定义，你可以快速了解变量、函数和对象的预期用途和结构，无需深入阅读具体的实现代码。这对于团队协作和新人 onboarding 尤为重要。
  3. 提升开发体验： 现代 IDE（如 VS Code）对 TypeScript 的支持非常出色。得益于丰富的类型信息，你能获得：
    • 智能代码补全 (IntelliSense)： 输入变量或对象名后，IDE 会根据其类型准确地提示可用的属性和方法。
    • 实时错误检查： 在你输入代码时，IDE 就会用红色波浪线标记出类型错误，无需等待编译或运行。
    • 导航和重构： 轻松跳转到定义、查找所有引用、安全地进行重命名等重构操作。
    • 参数信息和快速帮助： 调用函数时，IDE 会提示参数的类型和函数的文档（如果存在）。
  4. 提高代码质量和健壮性： 强制的类型检查让你在编写代码时更加严谨地思考数据结构和类型关系，减少了潜在的 Bug。
  5. 更容易进行大型项目开发： 随着项目规模的增长，JavaScript 的动态性带来的维护成本会急剧上升。TypeScript 提供的结构化和类型安全特性，使得大型项目的组织、管理和迭代变得更加容易。
  6. 社区和生态系统： TypeScript 已经成为前端开发的主流趋势之一，拥有庞大的社区和完善的生态系统。绝大多数流行的前端框架（React, Vue, Angular）、后端框架（NestJS, Koa）和工具都提供了官方或社区提供的 TypeScript 支持和类型定义。

第六章：如何开始使用 TypeScript？—— 迈出第一步

开始使用 TypeScript 并不复杂，主要包括安装编译器和配置项目。

  1. 安装 TypeScript：
    你需要 Node.js 环境。打开终端，运行 npm 命令全局安装 TypeScript 编译器：
    bash
    npm install -g typescript
    安装完成后，你可以通过运行 tsc -v 命令来检查版本。

  2. 编写第一个 TypeScript 文件：
    创建一个新文件，命名为 hello.ts：
    “`typescript
    // hello.ts
    function greet(person: string) {
    return “Hello, ” + person;
    }

    let user = “World”;
    console.log(greet(user));

    // 尝试制造一个错误，观察编译器的行为
    // let num = 123;
    // console.log(greet(num)); // 尝试将数字传递给期望字符串的函数
    “`

  3. 编译 TypeScript 文件：
    在终端中，切换到 hello.ts 文件所在的目录，然后运行 TypeScript 编译器：
    bash
    tsc hello.ts
    如果代码没有类型错误，tsc 命令会生成一个同名的 JavaScript 文件 hello.js：
    javascript
    // hello.js (tsc hello.ts 生成)
    function greet(person) {
    return "Hello, " + person;
    }
    var user = "World";
    console.log(greet(user));
    如果你的 .ts 文件中有类型错误（比如解开上面注释掉的错误代码），tsc 命令会报告错误，并且可能不会生成 .js 文件（取决于配置）。

  4. 运行生成的 JavaScript 文件：
    现在你可以像运行普通 JavaScript 文件一样运行 hello.js：
    bash
    node hello.js
    你会在控制台看到输出 Hello, World。

  5. 使用 tsconfig.json 配置项目：
    对于更复杂的项目，手动指定每个 .ts 文件进行编译是不可行的。TypeScript 项目通常使用一个名为 tsconfig.json 的配置文件，放在项目的根目录下。这个文件告诉 TypeScript 编译器如何编译你的项目中的 .ts 文件。

    在项目根目录运行以下命令可以生成一个默认的 tsconfig.json 文件：
    bash
    tsc --init
    这个文件包含了大量的配置选项，例如：
    * target: 指定编译后的 JavaScript 版本 (如 “es5”, “es2016”, “esnext”)
    * module: 指定生成的模块系统 (如 “commonjs”, “es2015”)
    * outDir: 指定编译生成 .js 文件的输出目录
    * rootDir: 指定 TypeScript 源文件的根目录
    * strict: 启用一系列严格的类型检查选项（强烈推荐开启！）
    * esModuleInterop: 允许通过 import x from "y" 导入 CommonJS 模块
    * 还有许多其他选项用于控制编译过程和类型检查的严格程度。

    有了 tsconfig.json 文件后，只需在项目根目录运行 tsc 命令（不带文件名），编译器就会查找 tsconfig.json 文件，并根据配置编译整个项目。

  6. 集成到开发流程中：
    在实际开发中，你通常会将 TypeScript 的编译集成到你的构建流程中。现代前端构建工具（如 Webpack, Parcel, Vite）或任务运行器（如 Gulp）都有相应的插件来处理 TypeScript 文件。Babel 也可以用来转译 TypeScript（尽管它只负责语法转换，类型检查仍需要 tsc 或其他工具来完成）。

  7. 编辑器支持：
    确保你使用的代码编辑器（尤其是 VS Code）安装了 TypeScript 插件或内置了对 TypeScript 的良好支持。这是获得最佳开发体验的关键。VS Code 内置了对 TypeScript 的一流支持，你甚至无需额外安装插件。

第七章：TypeScript 的取舍 —— 它不是银弹

尽管 TypeScript 带来了诸多好处，但它也不是完美的“银弹”，使用它也意味着需要一些取舍：

  • 学习曲线： 相比于 JavaScript，TypeScript 增加了类型系统和一些特有的语法。初学者需要花时间学习这些新概念，特别是接口、类型别名、联合类型、交叉类型和泛型等。
  • 额外的工作量： 编写代码时，你需要考虑并编写类型注解。虽然类型推断可以减少一部分工作，但在某些复杂场景下，显式的类型定义是必须的。
  • 编译步骤： 开发流程中增加了一个编译步骤。虽然现代工具链已经优化了这一过程（如使用 tsc --watch 进行文件监控和快速编译），但相比直接运行 JavaScript，仍然多了一个环节。
  • 可能的过度设计： 有时开发者可能过度使用复杂的类型特性，导致代码难以理解。关键在于如何在类型安全和代码简洁之间找到平衡。

那么，什么时候应该使用 TypeScript？

  • 大型和复杂的项目： 项目规模越大、复杂度越高，TypeScript 带来的收益就越明显。
  • 团队协作的项目： 类型信息作为一种契约，极大地提高了团队成员之间的协作效率和代码理解度。
  • 需要高可靠性的项目： 如果项目的 Bug 会带来严重后果（如金融、医疗应用），TypeScript 的类型安全是重要的保障。
  • 长期维护的项目： 类型信息使得代码更容易理解和重构，降低了长期维护成本。

对于小型脚本或快速原型开发，或者如果你刚开始学习编程，JavaScript 可能是一个更快的入门选择。但在大多数现代应用开发场景中，TypeScript 的优势已经使其成为首选。

总结

通过本文，我们从 JavaScript 的痛点出发，认识了 TypeScript——一个为 JavaScript 添加了静态类型、旨在提高代码可靠性和可维护性的超集。我们深入了解了它的核心概念（静态类型、编译过程），探索了各种基本和进阶的类型（string, number, boolean, array, tuple, enum, any, unknown, void, never, interface, type alias, union, intersection, literal, generics），明白了它带来的巨大价值（错误早发现、可读性、工具支持），并学习了如何开始使用它。

TypeScript 不是要取代 JavaScript，而是要增强它，让你能够更有信心地构建更大、更复杂的应用。它为你提供了更强大的工具，让你在编写代码时就能获得反馈，将潜在的运行时错误扼杀在摇篮里。

学习 TypeScript 需要投入一些时间，但一旦掌握，你将发现它能极大地提升你的开发效率和代码质量，让你在面对大型项目时更加从容不迫。现在，是时候动手实践，在你的下一个项目中使用 TypeScript，亲身体验它带来的改变了！祝你旅途愉快！

滚动至顶部