TypeScript 特性

相对 JavaScript,TypeScript 增加了许多关键功能,特别是围绕类型系统和代码结构的增强功能。

TypeScript 的一些关键特性:

  • 静态类型检查:TypeScript 在编译时就会检查代码的类型是否匹配,能够发现很多潜在的错误。即使是简单的错误(例如拼写错误或类型不一致),也可以在编写代码时被捕获到。

  • 类型推断:TypeScript 能够自动推断变量的类型。比如当你声明一个变量并赋值时,TypeScript 会根据赋值来推断这个变量的类型,不需要每次都显式声明类型。

  • 接口和类型定义:TypeScript 提供了 interfacetype 关键字,允许你定义复杂的数据结构。这对于项目中不同部分的代码协作和数据交互来说非常重要。

  • 类和模块支持:TypeScript 支持面向对象编程中的类(class)概念,增加了构造函数、继承、访问控制修饰符(如 publicprivateprotected),并且支持 ES 模块化规范。

  • 工具和编辑器支持:TypeScript 拥有良好的编辑器支持,特别是与 Visual Studio Code 集成时,能提供智能提示、自动补全、重构等工具,使开发过程更高效。

  • 兼容 JavaScript:TypeScript 是 JavaScript 的超集,这意味着所有合法的 JavaScript 代码都是合法的 TypeScript 代码。这使得 JavaScript 项目可以逐步迁移到 TypeScript,而无需完全重写。

以下是 TypeScript 增加的主要功能:

1. 静态类型

TypeScript 的最大特性就是增加了静态类型系统。在 TypeScript 中,开发者可以显式地声明变量、参数、返回值的类型,这样可以在编译时捕获很多潜在的类型错误。常见类型包括 numberstringbooleanarraytupleenum 等,此外也支持自定义类型。

let name: string = "Alice";
let age: number = 25;

2. 类型推断

TypeScript 可以自动推断变量类型,即使不显式声明类型,TypeScript 也会根据变量的赋值内容来推断类型,从而在大多数情况下减少类型注解的书写量。

let name = "Alice"; // 推断为 string

3. 接口 (Interfaces)

TypeScript 提供了接口,允许定义复杂的对象结构。接口可以定义属性和方法,还可以通过 implements 关键字实现接口,或者通过 extends 进行扩展,便于定义复杂的数据类型。

interface Person {
  name: string;
  age: number;
  greet(): void;
}

class Student implements Person {
  constructor(public name: string, public age: number) {}

  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

4. 类型别名 (Type Aliases)

类型别名 (type) 可以为复杂的类型定义简短的别名,便于代码复用。

type StringOrNumber = string | number;
let value: StringOrNumber = 42;

5. 枚举 (Enums)

TypeScript 引入了 enum 类型,用于定义一组命名的常量,提高代码的可读性。枚举在 JavaScript 中没有直接的对应。

enum Direction {
  Up,
  Down,
  Left,
  Right,
}
let dir: Direction = Direction.Up;

6. 元组 (Tuples)

元组允许定义具有固定数量和类型的数组。它适用于需要固定数据结构的场景,比如坐标或 RGB 颜色值。

let point: [number, number] = [10, 20];

7. 访问控制修饰符 (Access Modifiers)

TypeScript 在类中提供了 publicprivateprotected 修饰符,允许控制属性或方法的可见性,支持更好的封装。

class Person {
  private name: string;
  protected age: number;
  public constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}

8. 抽象类 (Abstract Classes)

TypeScript 支持抽象类,抽象类不能直接实例化,需要由子类实现。抽象类适用于定义通用行为和抽象方法的类层次结构。

abstract class Animal {
  abstract makeSound(): void;
}

class Dog extends Animal {
  makeSound() {
    console.log("Woof!");
  }
}

9. 泛型 (Generics)

TypeScript 支持泛型,允许在类、接口和函数中使用参数化类型,使得代码可以适应不同的类型需求,同时保持类型安全。

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

let num = identity<number>(42);

10. 模块和命名空间

TypeScript 提供了基于 ES6 的模块系统,使用 importexport 导入和导出模块。此外,TypeScript 还支持命名空间(Namespace),用于组织代码和避免命名冲突。

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

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

11. 类型守卫 (Type Guards)

TypeScript 提供了类型守卫,可以在代码中检查变量类型,帮助编译器推断更加具体的类型。这对于联合类型尤为重要。

function printId(id: string | number) {
  if (typeof id === "string") {
    console.log(id.toUpperCase());
  } else {
    console.log(id.toFixed(2));
  }
}

12. 可选链和空值合并运算符

TypeScript 增加了 JavaScript 的可选链 (?.) 和空值合并运算符 (??),简化了代码中对可能为 nullundefined 值的处理。

let user = { name: "Alice", address: { city: "Wonderland" } };
console.log(user?.address?.city); // 如果 address 存在则输出 city,否则返回 undefined

let value = null;
console.log(value ?? "default"); // 如果 value 为 null 或 undefined,则返回 "default"

13. 类型兼容性和工具类型

TypeScript 提供了一些工具类型,如 PartialPickReadonlyRecord 等,这些类型可以帮助生成新的类型,简化类型定义。

interface Todo {
  title: string;
  description: string;
}

let partialTodo: Partial<Todo> = { title: "Learn TypeScript" }; // 可选属性

14. 编译期错误检查

TypeScript 提供的编译期错误检查可以捕获 JavaScript 中不易发现的错误,如拼写错误、类型不匹配等,帮助提升代码质量。

15. ES 新特性支持

TypeScript 提前支持了一些还未在所有环境中普及的 ES 特性,如装饰器(Decorators)、异步迭代器等,且能够将其编译成兼容 JavaScript 版本。

通过这些特性,TypeScript 提供了更安全、更结构化的代码能力,在大型项目和多人协作中尤其具有优势。