Skip to content

TypeScript

以下是一些 TypeScript 面试题:

1. 基础知识:

一: 什么是 TypeScript?它与 JavaScript 有什么区别?

TypeScript 是一种由 Microsoft 开发的开源编程语言,它是 JavaScript 的一个超集。这意味着 TypeScript 包含了 JavaScript 的所有功能,并且在此基础上添加了静态类型和其他一些特性。TypeScript 的主要目标是增加代码的可维护性和可读性,尤其是在大型项目中。

与 JavaScript 的区别:

  1. 静态类型: TypeScript 引入了静态类型,开发者可以为变量、函数参数等明确定义类型。这有助于在编译阶段捕获潜在的类型错误,提高代码的健壮性。

  2. 类型检查器: TypeScript 包含一个类型检查器,能够在编译代码时检查类型错误。这有助于提前发现潜在的问题,减少在运行时出现的错误。

  3. 支持新特性: TypeScript 提供了 ECMAScript 新特性的支持,使得开发者可以使用 JavaScript 的最新标准,并逐步迁移现有的 JavaScript 代码到 TypeScript。

  4. 面向对象编程的增强: TypeScript 提供了类、接口等面向对象编程的概念,并支持更强大的类型系统,使得开发者能够更好地组织和抽象代码。

  5. 编译过程: TypeScript 需要经过编译过程,将 TypeScript 代码转换为标准的 JavaScript 代码。这个过程由 TypeScript 编译器(tsc)完成。

总体而言,TypeScript 是 JavaScript 的超集,通过引入静态类型和其他增强功能,使得开发大型项目更为容易和可维护。在实际开发中,TypeScript 可以与 JavaScript 互通,逐渐引入 TypeScript 特性,而不需要一次性全面改写代码。

二: TypeScript 是如何通过类型系统增强 JavaScript 的?

TypeScript 通过引入强大的静态类型系统来增强 JavaScript。以下是 TypeScript 如何通过类型系统增强 JavaScript 的主要方面:

  1. 变量和函数参数类型定义: TypeScript 允许开发者为变量、函数参数、函数返回值等显式地定义类型。这使得在开发过程中可以明确每个变量的类型,提高了代码的可读性和可维护性。类型定义可以包括基本类型(如数字、字符串、布尔)、自定义类型、接口等。

    typescript
    // 定义变量类型
    let age: number = 25;
    
    // 定义函数参数和返回值类型
    function add(a: number, b: number): number {
      return a + b;
    }
  2. 类型推断: TypeScript 能够根据代码上下文自动推断变量的类型,这称为类型推断。当变量声明时未显式指定类型时,TypeScript 会根据变量的赋值来推断其类型,从而减少了不必要的冗余代码。

    typescript
    let name = "John"; // TypeScript 推断 name 为字符串类型
  3. 联合类型和交叉类型: TypeScript 支持联合类型和交叉类型。联合类型允许一个值具有多个可能的类型,而交叉类型将多个类型组合成一个类型。这使得可以更灵活地处理不同类型的数据。

    typescript
    // 联合类型
    let result: number | string;
    result = 42; // 合法
    result = "Hello"; // 合法
    
    // 交叉类型
    interface Printable {
      print: () => void;
    }
    interface Loggable {
      log: () => void;
    }
    type LoggableAndPrintable = Printable & Loggable;
  4. 接口和类: TypeScript 引入了接口和类的概念,使得可以更规范地定义对象的结构和行为。接口可以描述对象的形状,类可以实现接口,从而实现面向对象编程的概念。

    typescript
    // 定义接口
    interface Person {
      name: string;
      age: number;
    }
    
    // 使用接口
    let person: Person = {
      name: "John",
      age: 25,
    };
  5. 枚举: TypeScript 支持枚举,这是一种将值映射到名称的结构。枚举增强了代码的可读性,使得开发者能够使用易于理解的标识符来代替数字或字符串。

    typescript
    // 定义枚举
    enum Color {
      Red,
      Green,
      Blue,
    }
    
    // 使用枚举
    let color: Color = Color.Green;

通过以上特性,TypeScript 引入了更强大的类型系统,使得开发者能够在编译时捕获潜在的类型错误,提高代码的质量和可维护性。这种增强使得 TypeScript 成为开发大型项目的有力工具。

三: 介绍 TypeScript 中的基本数据类型。

在 TypeScript 中,基本数据类型包括以下几种:

  1. 数字类型 (number):

    • 用于表示整数或浮点数。
    • 例子:let count: number = 42;
  2. 字符串类型 (string):

    • 用于表示文本数据。
    • 例子:let message: string = "Hello, TypeScript!";
  3. 布尔类型 (boolean):

    • 用于表示逻辑值,即 truefalse
    • 例子:let isValid: boolean = true;
  4. 空值 (void):

    • 通常用于标识函数没有返回值。
    • 例子:function logMessage(): void { console.log("Message logged."); }
  5. 未定义 (undefined):

    • 表示变量未赋值。
    • 例子:let data: undefined = undefined;
  6. 空 (null):

    • 表示变量的值为空。
    • 例子:let result: null = null;
  7. 任意类型 (any):

    • 表示变量的类型可以是任意值。
    • 例子:let dynamicValue: any = "Dynamic Value";
  8. 元组类型 (tuple):

    • 允许表示一个固定元素数量和类型的数组。
    • 例子:let coordinates: [number, number] = [10, 20];
  9. 枚举类型 (enum):

    • 用于定义一组命名的常数。
    • 例子:enum Color { Red, Green, Blue }; let selectedColor: Color = Color.Green;
  10. 联合类型 (union):

    • 允许一个值属于多个类型之一。
    • 例子:let value: string | number = "Hello";
  11. 交叉类型 (intersection):

    • 将多个类型合并为一个新类型。
    • 例子:type Person = { name: string } & { age: number };

这些基本数据类型提供了灵活性和静态类型检查的好处,使得 TypeScript 在代码开发和维护过程中更加可靠和可读。

2. 类型注解与类型推断:

TypeScript 中的类型注解是什么,为什么使用它们?

类型注解(Type Annotations) 是在变量、参数、函数返回值等位置显式地声明变量或表达式的类型的语法。在 TypeScript 中,使用冒号 : 来添加类型注解。

例如:

typescript
let count: number = 42;
function add(a: number, b: number): number {
  return a + b;
}

在上面的例子中,count 变量被注解为 number 类型,而 add 函数的参数 ab 以及返回值都被注解为 number 类型。

为什么使用类型注解?

  1. 静态类型检查: TypeScript 的类型注解能够在编译时进行静态类型检查。通过显式声明变量的类型,开发者可以在编码阶段捕获潜在的类型错误,而不是在运行时才发现。这有助于提高代码的质量和可维护性。

  2. 文档和可读性: 类型注解作为文档的一部分,能够帮助其他开发者理解代码的意图。它提供了更多的上下文和信息,使得代码更易读、易懂。

  3. 工具支持: 类型注解能够提供更好的工具支持,包括代码自动补全、跳转到定义、重构等功能。编辑器可以更好地理解代码,为开发者提供更强大的工具。

  4. 团队协作: 在团队协作中,类型注解可以使团队成员更容易理解和维护彼此的代码。它提供了一种标准的方式来表达变量和函数的类型信息。

虽然 TypeScript 具有类型推断机制,可以自动推断变量的类型,但通过显式的类型注解,开发者可以更精确地控制和表达代码的类型,提高代码的可读性和可维护性。

什么是类型推断,TypeScript 如何自动推断变量的类型?

类型推断(Type Inference) 是 TypeScript 中的一种机制,它能够自动推断变量的类型,而无需显式地添加类型注解。TypeScript 根据变量的初始化值和上下文等信息来推断变量的类型。

以下是类型推断的一些情况:

  1. 基础类型推断: TypeScript 根据变量的赋值来推断基础类型。

    typescript
    let age = 25; // TypeScript 推断 age 为 number 类型
    let message = "Hello"; // TypeScript 推断 message 为 string 类型
  2. 数组类型推断: 当初始化数组时,TypeScript 会根据数组元素的类型推断数组的类型。

    typescript
    let numbers = [1, 2, 3]; // TypeScript 推断 numbers 为 number[] 类型
    let names = ["Alice", "Bob"]; // TypeScript 推断 names 为 string[] 类型
  3. 对象类型推断: TypeScript 根据对象字面量的属性来推断对象的类型。

    typescript
    let person = { name: "John", age: 30 }; // TypeScript 推断 person 为 { name: string, age: number } 类型
  4. 函数类型推断: TypeScript 根据函数的返回值和参数类型推断函数的类型。

    typescript
    function add(a: number, b: number) {
      return a + b;
    }
    // TypeScript 推断 add 为 (a: number, b: number) => number 类型
  5. 上下文类型推断: 当变量的类型无法从其初始化表达式中推断时,TypeScript 使用上下文来进行推断。

    typescript
    window.onmousedown = function (event) {
      // TypeScript 推断 event 为 MouseEvent 类型
      console.log(event.button);
    };

通过类型推断,TypeScript 可以自动地为变量添加类型信息,从而提供静态类型检查的好处,同时减少了显式类型注解的冗余。在大多数情况下,类型推断能够提供足够的类型信息,但有时也需要显式添加类型注解以明确开发者的意图。

3. 接口(Interfaces):

TypeScript 中如何定义接口?

在 TypeScript 中,可以使用 interface 关键字来定义接口。接口用于描述对象的形状,即指定对象应该具有的属性和方法,但不提供具体的实现。

以下是定义接口的基本语法:

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

let person: Person = {
  name: "John",
  age: 30,
  greet: function () {
    console.log("Hello, " + this.name);
  },
};

在上面的例子中,我们定义了一个 Person 接口,它要求对象具有 nameage 属性,以及一个名为 greet 的方法。然后,我们创建了一个满足 Person 接口要求的对象 person

接口也可以包含可选属性和只读属性:

typescript
interface Car {
  brand: string;
  model: string;
  year?: number; // 可选属性
  readonly vin: string; // 只读属性
}

let myCar: Car = {
  brand: "Toyota",
  model: "Camry",
  vin: "ABC123",
};

在上述例子中,year 是一个可选属性,可以存在也可以不存在。而 vin 是一个只读属性,一旦赋值后就不能被修改。

接口可以在很多场景中使用,例如描述函数的形状、类的实例等,帮助 TypeScript 在静态检查时更好地理解代码的结构和意图。

请解释 TypeScript 中的可选属性和只读属性是如何工作的。

在 TypeScript 中,可选属性和只读属性是接口中用于描述对象形状的两种重要属性:

1. 可选属性(Optional Properties):

在接口定义中,通过在属性名后面添加 ? 符号,表示该属性是可选的。这意味着对象可以包含这个属性,也可以不包含。示例:

typescript
interface Person {
  name: string;
  age?: number; // 可选属性
}

let person1: Person = { name: "John" }; // 可以没有 age 属性
let person2: Person = { name: "Alice", age: 25 }; // 可以有 age 属性

在上述例子中,age 是可选属性,因此可以在创建 Person 对象时选择是否包含 age 属性。

2. 只读属性(Readonly Properties):

在接口定义中,通过使用 readonly 关键字来标识属性为只读属性。只读属性必须在创建对象时进行初始化,并且一旦赋值后就不能再修改。示例:

typescript
interface Car {
  brand: string;
  model: string;
  readonly year: number; // 只读属性
}

let myCar: Car = { brand: "Toyota", model: "Camry", year: 2022 };
// myCar.year = 2023; // 编译错误,只读属性不可修改

在上述例子中,year 是只读属性,因此在创建 Car 对象时必须为 year 赋初始值,并且在后续不能修改它。

可选属性和只读属性的使用可以让我们更灵活地描述对象的形状和规则,提高了代码的可读性和可维护性。

4. 泛型(Generics):

TypeScript 中的泛型是什么?它们在哪些场景下特别有用?

在 TypeScript 中,泛型(Generics) 是一种用于创建可重用、灵活且类型安全的代码的工具。泛型允许在函数、类、接口等声明中使用类型参数,这些类型参数在实际使用时由调用方传入,从而增加代码的灵活性。

泛型函数示例:

typescript
// 使用泛型 T,表示参数和返回值的类型可以是任意类型
function identity<T>(arg: T): T {
  return arg;
}

// 调用时传入具体的类型
let result1: number = identity<number>(42);
let result2: string = identity<string>("Hello");

上述例子中,identity 函数使用了泛型 T,表示参数和返回值的类型可以是任意类型。在调用时,通过传入具体的类型参数(比如 numberstring)来指定 T 的具体类型。

泛型类示例:

typescript
// 泛型类 Box,可以存储任意类型的值
class Box<T> {
  private value: T;

  constructor(value: T) {
    this.value = value;
  }

  getValue(): T {
    return this.value;
  }
}

// 创建一个存储字符串的 Box
let stringBox = new Box<string>("Hello, TypeScript");
console.log(stringBox.getValue()); // 输出: Hello, TypeScript

上述例子中,Box 类使用了泛型 T,表示这个类可以存储任意类型的值。在创建实例时,通过传入具体的类型参数(比如 string)来确定 T 的具体类型。

泛型接口示例:

typescript
// 泛型接口 Transformer,表示一个能够转换类型的接口
interface Transformer<T> {
  transform(value: T): T;
}

// 实现泛型接口,转换数字类型
class NumberTransformer implements Transformer<number> {
  transform(value: number): number {
    return value * 2;
  }
}

let numberTransformer = new NumberTransformer();
console.log(numberTransformer.transform(5)); // 输出: 10

上述例子中,Transformer 接口使用了泛型 T,表示这是一个能够转换类型的接口。实现该接口时,通过指定具体的类型参数(比如 number)来确定 T 的具体类型。

泛型的优势和应用场景:

  1. 类型安全: 泛型能够提供类型安全,避免在使用时出现类型错误。

  2. 代码重用: 泛型允许创建可重用的代码,适用于多种类型。

  3. 灵活性: 泛型使得代码更灵活,能够适应不同的数据类型。

  4. 抽象数据结构和算法: 泛型在创建抽象的数据结构和算法时特别有用,能够适应不同的数据类型和需求。

泛型在许多库和框架中被广泛使用,例如 TypeScript 标准库、React、Angular 等,用来增强代码的灵活性和可维护性。

请提供一个使用泛型的实际例子。

假设我们要实现一个简单的泛型函数,该函数可以接受一个数组,并返回该数组的倒序副本。我们可以使用泛型来确保该函数适用于不同类型的数组。

typescript
function reverseArray<T>(arr: T[]): T[] {
  return arr.reverse();
}

// 使用泛型函数
const numbers = reverseArray([1, 2, 3, 4, 5]);
const strings = reverseArray(["apple", "banana", "orange"]);

console.log(numbers); // 输出: [5, 4, 3, 2, 1]
console.log(strings); // 输出: ["orange", "banana", "apple"]

在上述例子中,reverseArray 是一个泛型函数,使用了类型参数 T。这使得函数可以接受任意类型的数组,包括数字数组和字符串数组。通过使用泛型,我们可以在编写一个函数的同时保持其通用性,而不限制其只能操作特定类型的数据。

5. 联合类型与交叉类型:

TypeScript 中的联合类型和交叉类型有什么区别? 在 TypeScript 中,联合类型(Union Types)和交叉类型(Intersection Types)是两种不同的类型构造,它们用于组合多个类型。它们的区别在于组合类型的方式不同。

联合类型(Union Types):

联合类型表示一个值可以是多种类型之一。使用 | 符号来连接多个类型,表示取其一。例如:

typescript
// 联合类型示例
let variable: string | number;

variable = "Hello"; // 合法
variable = 42;      // 合法
// variable = true;  // 编译错误,布尔类型不是 string 或 number 类型之一

在上述例子中,variable 可以是 string 类型或 number 类型,但不能是其他类型。

交叉类型(Intersection Types):

交叉类型表示一个值同时具有多个类型的特性。使用 & 符号来连接多个类型,表示取所有类型的特性。例如:

typescript
// 交叉类型示例
interface Car {
  brand: string;
  model: string;
}

interface Electric {
  electric: boolean;
}

type ElectricCar = Car & Electric;

let myCar: ElectricCar = {
  brand: "Tesla",
  model: "Model S",
  electric: true,
};

在上述例子中,ElectricCarCarElectric 的交叉类型,因此它具有 brandmodelelectric 三个属性。

区别总结:

  • 联合类型(Union Types): 表示一个值可以是多个类型中的一个。
  • 交叉类型(Intersection Types): 表示一个值具有多个类型的特性,合并多个类型的属性。

在使用时,根据需要选择使用联合类型或交叉类型。

请给出一个使用联合类型解决问题的示例。

假设我们要实现一个函数,该函数接受两个参数,可以是数字或字符串,然后返回它们的拼接结果。这种情况下,我们可以使用联合类型来表示参数可以是多种类型之一。

typescript
function concatenate(a: string | number, b: string | number): string {
  return `${a}${b}`;
}

// 调用函数
const result1: string = concatenate("Hello", "World");
const result2: string = concatenate(42, " TypeScript");
const result3: string = concatenate(3.14, 42);

console.log(result1); // 输出: HelloWorld
console.log(result2); // 输出: 42 TypeScript
console.log(result3); // 输出: 3.1442

在上述例子中,concatenate 函数的两个参数 ab 都是联合类型 string | number,表示它们可以是字符串或数字。函数内部使用模板字符串将两个参数拼接成字符串。这样,我们可以传入不同类型的参数来调用函数,而函数能够处理这些不同类型的情况。

6. 枚举(Enums):

什么是 TypeScript 中的枚举?它们有什么用途?

在 TypeScript 中,枚举(Enum)是一种用于表示一组命名过的常量的数据类型。枚举提供了一种更友好的方式来表示一组相关的值,使得代码更具可读性和可维护性。在 JavaScript 中是没有枚举的概念的,而 TypeScript 引入了枚举来弥补这一不足。

枚举的基本语法:

typescript
enum Direction {
  North,
  South,
  East,
  West,
}

在上述例子中,我们定义了一个名为 Direction 的枚举,它包含了四个成员:NorthSouthEastWest。默认情况下,枚举成员的值从 0 开始,依次递增。

指定枚举成员的值:

typescript
enum Direction {
  North = 1,
  South,
  East = 3,
  West,
}

在上述例子中,我们指定了部分枚举成员的值。此时,Direction.North 的值为 1Direction.South 的值为 2Direction.East 的值为 3Direction.West 的值为 4

使用枚举:

typescript
let myDirection: Direction = Direction.East;

if (myDirection === Direction.East) {
  console.log("Heading East");
}

在上述例子中,我们声明了一个变量 myDirection 并将其赋值为 Direction.East。通过比较枚举成员,我们可以进行条件判断,使得代码更加清晰。

枚举的用途:

  1. 提高可读性: 枚举提供了一种命名常量的方式,使得代码更易读、易懂。

  2. 防止错误: 枚举可以帮助防止使用不正确的值,因为 TypeScript 会进行类型检查。

  3. 迭代枚举成员: 可以通过迭代枚举成员来获取所有可能的值。

typescript
for (let direction in Direction) {
  console.log(direction); // 输出: North, South, East, West
}

总的来说,枚举在一些场景下可以提高代码的清晰度和可维护性,特别是当需要表示一组有限的命名常量时。

请解释常量枚举和计算枚举之间的区别。

在 TypeScript 中,枚举可以分为常量枚举(const enums)和计算枚举(computed enums)两种类型。它们之间的主要区别在于编译时的处理方式和运行时的表现形式。

常量枚举(Const Enums):

常量枚举在编译时会被删除,而不会留下任何实际的 JavaScript 代码。这意味着常量枚举仅在编译阶段起作用,而不会在运行时产生额外的对象。常量枚举主要用于提高性能和减少额外的代码。

示例:

typescript
const enum Direction {
  North,
  South,
  East,
  West,
}

let myDirection: Direction = Direction.East;

编译后的 JavaScript 代码:

javascript
let myDirection = 2 /* East */;

计算枚举(Computed Enums):

计算枚举在编译时会生成真实的 JavaScript 代码,它允许包含非常量表达式的成员。计算枚举的值在运行时是可用的,但可能会导致生成的 JavaScript 代码较大。

示例:

typescript
enum Direction {
  North = 1 + 2,
  South = 3 * 2,
  East = "East".length,
  West = Math.random(),
}

let myDirection: Direction = Direction.East;

编译后的 JavaScript 代码:

javascript
var Direction;
(function (Direction) {
    Direction[Direction["North"] = 3] = "North";
    Direction[Direction["South"] = 6] = "South";
    Direction[Direction["East"] = "East".length] = "East";
    Direction[Direction["West"] = Math.random()] = "West";
})(Direction || (Direction = {}));

var myDirection = Direction.East;

区别总结:

  1. 常量枚举:

    • 编译时被删除,不会生成额外的 JavaScript 代码。
    • 适用于需要提高性能和减少代码的情况。
  2. 计算枚举:

    • 生成真实的 JavaScript 代码,运行时可用。
    • 允许包含非常量表达式的成员,但可能导致代码变得较大。

7. 类型别名(Type Aliases):

TypeScript 中的类型别名是什么,为什么使用它们?

在 TypeScript 中,类型别名(Type Aliases)是一种给现有类型起别名的方式。通过 type 关键字,可以为一个类型定义一个新的名称,使得代码更加清晰易读。类型别名用于创建自定义的复合类型,简化复杂类型的书写,并提高代码的可维护性。

基本语法:

typescript
type MyString = string;
type Point = { x: number; y: number };
type Callback = (result: string) => void;

在上述例子中,MyStringstring 类型的别名,Point 是一个包含 xy 属性的对象类型的别名,Callback 是一个接受 result 参数并返回 void 的函数类型的别名。

使用场景和优势:

  1. 简化复杂类型: 当涉及到复杂的类型结构时,类型别名可以帮助我们简化类型的书写,提高代码可读性。

    typescript
    type User = {
      id: number;
      name: string;
      age: number;
    };
    
    type UserArray = User[];
  2. 可重用性: 类型别名可以被重复使用,使得我们在多个地方使用相同的类型更加方便。

    typescript
    type Point = { x: number; y: number };
    
    function calculateDistance(point1: Point, point2: Point): number {
      // 计算两点之间的距离
      // ...
    }
  3. 抽象复杂类型: 使用类型别名可以将复杂的类型抽象为一个简单易懂的名称,提高代码的抽象层次。

    typescript
    type ApiResponse<T> = {
      success: boolean;
      data: T;
    };
    
    type UserResponse = ApiResponse<User>;
  4. 支持联合类型和交叉类型: 类型别名可以包含联合类型和交叉类型,进一步增强了灵活性。

    typescript
    type StringOrNumber = string | number;
    
    type Point3D = { x: number; y: number; z: number };
    type Point2D = { x: number; y: number };
    
    type Point = Point2D | Point3D;

总的来说,类型别名在 TypeScript 中是一种非常有用的工具,它提供了更具语义化的方式来定义和组合类型,使得代码更加清晰、可维护。

类型别名和接口在什么情况下可以互换使用?

在 TypeScript 中,类型别名(Type Aliases)和接口(Interfaces)有一些相似之处,但它们也有一些区别。它们在许多情况下可以互换使用,但在一些特定情况下,选择使用其中一个可能更合适。

类型别名和接口的相似之处:

  1. 描述对象类型: 无论是类型别名还是接口,都可以用来描述对象类型,定义属性和它们的类型。

    typescript
    // 类型别名
    type Point = {
      x: number;
      y: number;
    };
    
    // 接口
    interface Point {
      x: number;
      y: number;
    }
  2. 支持联合类型和交叉类型: 类型别名和接口都可以包含联合类型和交叉类型。

    typescript
    // 类型别名
    type StringOrNumber = string | number;
    
    // 接口
    interface Point2D {
      x: number;
      y: number;
    }
    
    interface Point3D {
      x: number;
      y: number;
      z: number;
    }
    
    // 联合类型
    type Point = Point2D | Point3D;
    
    // 交叉类型
    type ExtendedPoint = Point2D & { label: string };

类型别名和接口的区别:

  1. 可声明合并: 接口具有声明合并的能力,允许多次声明同一接口名,而这些声明会被自动合并。

    typescript
    interface User {
      name: string;
    }
    
    interface User {
      age: number;
    }
    
    // 合并后的 User 接口包含 name 和 age 两个属性
    const myUser: User = {
      name: "John",
      age: 30,
    };

    类型别名不具备声明合并的能力。

  2. 使用 extends 关键字: 接口可以使用 extends 关键字来继承其他接口,实现接口之间的扩展。

    typescript
    interface Animal {
      name: string;
    }
    
    interface Dog extends Animal {
      breed: string;
    }

    类型别名不支持使用 extends 关键字来实现继承。

选择使用类型别名还是接口:

  1. 语义化: 如果定义的是一个对象的形状,一般来说使用接口更为语义化,因为接口的主要目的是描述结构。如果定义了一些复杂的、可重用的类型,类型别名可能更适合,因为它们提供了一个更具语义的名称。

  2. 扩展性: 如果需要声明合并或使用 extends 关键字进行继承,应该选择使用接口。

总体来说,类型别名和接口在许多情况下可以互换使用,选择使用哪一个更取决于具体的需求和语义化的考虑。在实际项目中,通常会根据具体情况选择使用类型别名或接口。

8. 类与继承:

TypeScript 中如何定义类和实现继承?

在 TypeScript 中,我们可以使用 class 关键字来定义类,并使用 extends 关键字实现继承。下面是一个简单的例子:

typescript
// 基类
class Animal {
  // 属性
  private name: string;

  // 构造函数
  constructor(name: string) {
    this.name = name;
  }

  // 方法
  move(distance: number = 0) {
    console.log(`${this.name} moved ${distance} meters.`);
  }
}

// 派生类(继承自 Animal)
class Dog extends Animal {
  // 构造函数
  constructor(name: string, private breed: string) {
    // 调用基类的构造函数
    super(name);
  }

  // 重写基类的方法
  move(distance: number = 10) {
    console.log(`${this.name} (a ${this.breed} dog) moved ${distance} meters.`);
  }

  // 新方法
  bark() {
    console.log("Woof! Woof!");
  }
}

// 创建实例
const myDog = new Dog("Buddy", "Golden Retriever");

// 调用基类的方法
myDog.move();

// 调用派生类的方法
myDog.bark();

在上面的例子中:

  • Animal 是一个基类,包含一个属性 name 和一个方法 move
  • Dog 是一个派生类,使用 extends 关键字继承自 Animal。它新增了一个属性 breed 和一个方法 bark
  • 派生类中的构造函数使用 super 调用基类的构造函数。
  • 派生类可以重写基类的方法(如上例中的 move 方法)。

这样,通过类和继承,我们可以在 TypeScript 中建立对象的层次结构,实现代码的组织和复用。

请描述 TypeScript 中的访问修饰符(public、private、protected)是如何工作的。

在 TypeScript 中,访问修饰符用于限制类的成员(属性和方法)的访问范围。TypeScript 提供了三种访问修饰符:publicprivateprotected

  1. public(默认): 如果没有指定访问修饰符,默认为 public。在类的内部和外部都可以访问。

    typescript
    class MyClass {
      public x: number;
    
      constructor(x: number) {
        this.x = x;
      }
    }
    
    const obj = new MyClass(10);
    console.log(obj.x); // 可以访问
  2. private: 使用 private 修饰的成员只能在类的内部访问,外部无法直接访问。

    typescript
    class MyClass {
      private y: number;
    
      constructor(y: number) {
        this.y = y;
      }
    
      printY() {
        console.log(this.y); // 在类的内部可以访问
      }
    }
    
    const obj = new MyClass(20);
    obj.printY(); // 可以访问
    console.log(obj.y); // 无法访问,会报错
  3. protected: 使用 protected 修饰的成员在类的内部和派生类中可以访问,但在外部不可访问。

    typescript
    class MyBaseClass {
      protected z: number;
    
      constructor(z: number) {
        this.z = z;
      }
    }
    
    class MyDerivedClass extends MyBaseClass {
      printZ() {
        console.log(this.z); // 在派生类中可以访问
      }
    }
    
    const obj = new MyBaseClass(30);
    console.log(obj.z); // 无法访问,会报错
    
    const derivedObj = new MyDerivedClass(40);
    derivedObj.printZ(); // 可以访问

总体来说:

  • public 允许在类的内部和外部访问。
  • private 只允许在类的内部访问。
  • protected 允许在类的内部和派生类中访问。

这些访问修饰符有助于控制类的封装性,提高代码的安全性和可维护性。

9. 模块与命名空间:

TypeScript 中如何组织代码,使用模块和命名空间?

在 TypeScript 中,可以使用模块(Modules)和命名空间(Namespaces)来组织代码和管理模块之间的依赖关系。

模块(Modules):

  1. ES6 模块: TypeScript 支持 ES6 的模块化语法,可以使用 importexport 来导入和导出模块。

    typescript
    // moduleA.ts
    export const variableA = 10;
    export function functionA() {
      // do something
    }
    
    // moduleB.ts
    import { variableA, functionA } from "./moduleA";
    console.log(variableA);
    functionA();
  2. CommonJS 模块: TypeScript 也支持 CommonJS 的模块化语法,通过 requiremodule.exports 来导入和导出模块。

    typescript
    // moduleA.ts
    const variableA = 10;
    function functionA() {
      // do something
    }
    module.exports = { variableA, functionA };
    
    // moduleB.ts
    const { variableA, functionA } = require("./moduleA");
    console.log(variableA);
    functionA();

命名空间(Namespaces):

命名空间是一种将代码包裹在逻辑上独立的名称下的方法。通过 namespace 关键字来定义命名空间,使用 export 将其中的元素导出。

typescript
// namespaceA.ts
namespace NamespaceA {
  export const variableA = 10;
  export function functionA() {
    // do something
  }
}

// namespaceB.ts
/// <reference path="./namespaceA.ts" />
const variableA = NamespaceA.variableA;
NamespaceA.functionA();

一般情况下,推荐使用模块(Modules)来组织代码,因为它们更灵活、可扩展性强,并且支持导入/导出、依赖管理等功能。命名空间(Namespaces)通常用于较早版本的 TypeScript 或需要在全局作用域中管理大型项目的情况。

无论是模块还是命名空间,在项目中选择合适的组织方式很重要,这取决于项目的规模、复杂性以及团队的偏好和要求。

请解释 CommonJS 和 ES6 模块的区别。

CommonJS 和 ES6 模块是两种不同的模块化规范,用于在 JavaScript 中组织和导入导出代码。

CommonJS 模块:

  1. 导入: 使用 require 关键字来导入模块。

    javascript
    // 导入模块
    const moduleA = require('./moduleA');
  2. 导出: 使用 module.exports 导出模块。

    javascript
    // 导出模块
    module.exports = {
      variableA: 10,
      functionA: function() {
        // do something
      }
    };
  3. 运行时加载: 模块是在运行时加载的,同步加载。

    javascript
    const moduleA = require('./moduleA');

ES6 模块:

  1. 导入: 使用 import 关键字来导入模块。

    javascript
    // 导入模块
    import { variableA, functionA } from './moduleA';
  2. 导出: 使用 export 导出模块。

    javascript
    // 导出模块
    export const variableA = 10;
    export function functionA() {
      // do something
    }
  3. 静态加载: 模块是在静态解析阶段就加载的,异步加载也是可能的。

    javascript
    import('./moduleA').then(moduleA => {
      // 使用 moduleA
    });

区别总结:

  • 加载时机: CommonJS 是在运行时加载模块,而 ES6 模块是在静态解析阶段加载的,这使得 ES6 模块在某些场景下更有优势,如按需加载、静态分析等。

  • 语法: 语法上有差异,如导入和导出的关键字不同。

  • 导入方式: CommonJS 使用 require,ES6 使用 import

  • 导出方式: CommonJS 使用 module.exports,ES6 使用 export

  • 模块对象: CommonJS 模块的导出是一个值的拷贝,而 ES6 模块的导出是值的引用。

  • 作用域: CommonJS 模块是运行时加载,因此模块中的变量是属于模块作用域的;ES6 模块是在静态解析阶段加载,因此具有词法作用域,模块中的变量不会被污染全局作用域。

在现代的 JavaScript 开发中,由于 ES6 模块具有更多的优势,通常推荐使用 ES6 模块规范。

10. 类型守卫(Type Guards):

TypeScript 中的类型守卫是什么,它们在条件类型中的作用是什么?

在 TypeScript 中,类型守卫是一种通过某种方式检查类型并在一定范围内确定变量的类型的技术。它可以是一些条件表达式、类型判断函数、类型谓词或者一些运行时的检查。

在条件类型中,类型守卫可以用于缩小泛型类型的范围。例如,使用 extends 关键字进行条件类型的判断,通过类型守卫可以更精确地定义泛型的行为。

typescript
type Fruit = 'apple' | 'banana';

function processFruit<T extends Fruit>(fruit: T): void {
  // 使用类型守卫
  if (fruit === 'apple') {
    // 在这个范围内,TypeScript 知道 fruit 的类型是 'apple'
    console.log('Processing apple...');
  } else if (fruit === 'banana') {
    // 在这个范围内,TypeScript 知道 fruit 的类型是 'banana'
    console.log('Processing banana...');
  }
}

// 使用函数
processFruit('apple'); // 输出:Processing apple...
processFruit('banana'); // 输出:Processing banana...

上述示例中,通过条件判断 fruit === 'apple'fruit === 'banana',在这两个分支中 TypeScript 能够推断 fruit 的具体类型,使得在每个分支内部可以精确地知道 fruit 的类型是 'apple' 或 'banana'。

这种使用条件类型和类型守卫的方式,能够更好地利用 TypeScript 的类型系统,提高代码的类型安全性。

请提供一个使用类型守卫的例子。

以下是一个使用类型守卫的 TypeScript 示例,其中定义了一个函数 printAnimalSound,根据传入的参数类型不同,打印不同动物的叫声:

typescript
type Animal = 'dog' | 'cat' | 'bird';

function printAnimalSound(animal: Animal): void {
  // 使用类型守卫
  switch (animal) {
    case 'dog':
      console.log('Woof!'); // 在这个范围内 TypeScript 知道 animal 的类型是 'dog'
      break;
    case 'cat':
      console.log('Meow!'); // 在这个范围内 TypeScript 知道 animal 的类型是 'cat'
      break;
    case 'bird':
      console.log('Tweet!'); // 在这个范围内 TypeScript 知道 animal 的类型是 'bird'
      break;
    default:
      // TypeScript 知道在这个分支中 animal 的类型是 never,因为已经覆盖了所有可能的值
      const exhaustiveCheck: never = animal;
      console.log(exhaustiveCheck); // 编译器会提示这里是无法到达的代码
  }
}

// 使用函数
printAnimalSound('dog'); // 输出:Woof!
printAnimalSound('cat'); // 输出:Meow!
printAnimalSound('bird'); // 输出:Tweet!

在这个例子中,printAnimalSound 函数通过 switch 语句对不同的动物类型进行了处理,并在每个分支中使用了类型守卫。通过这种方式,TypeScript 在每个分支内部能够识别具体的 animal 类型,提高了代码的类型安全性。