Typescript 高级类型探索与实践

2024-02-20 19:57:32

在 Typescript 中，类型系统是一个强大而灵活的工具，它允许开发者创建自定义类型、定义泛型函数和类，从而可以进行类型推断和类型兼容性检查。本文将介绍 Typescript 高级类型的相关概念和使用技巧，并提供一系列实际示例，帮助开发者在项目中使用 Typescript 高级类型来编写更加健壮和可维护的代码。

类型推断

Typescript 中的类型推断功能可以自动推断变量和表达式的类型，从而简化代码编写。例如，以下代码中的变量 name 的类型会被推断为 string：

let name = "John Doe";

如果变量被显式地指定了类型，那么类型推断将被禁用。例如，以下代码中的变量 age 的类型会被显式地指定为 number：

let age: number = 30;

字符串模板类型

Typescript 中的字符串模板类型允许开发者在字符串中嵌入表达式，从而创建动态字符串。例如，以下代码中的字符串模板类型会创建一个包含变量 name 和 age 的字符串：

let greeting = `Hello, ${name}! You are ${age} years old.`;

字符串模板类型也可以用于创建多行字符串。例如，以下代码中的字符串模板类型会创建一个包含多行文本的字符串：

let poem = `Roses are red,
Violets are blue,
Sugar is sweet,
And so are you.`;

类型兼容

Typescript 中的类型兼容性检查功能可以确保变量和表达式具有兼容的类型。例如，以下代码中的变量 num 的类型与变量 str 的类型兼容，因为 number 类型兼容 string 类型：

let num = 123;
let str = "123";

if (num === str) {
  console.log("num and str are equal");
}

如果变量和表达式的类型不兼容，那么类型兼容性检查功能会报错。例如，以下代码中的变量 num 的类型与变量 bool 的类型不兼容，因为 number 类型不兼容 boolean 类型：

let num = 123;
let bool = true;

if (num === bool) {
  console.log("num and bool are equal"); // Error: Type 'number' is not assignable to type 'boolean'.
}

泛型类型

Typescript 中的泛型类型允许开发者创建可重用的类型，这些类型可以被其他类型参数化。例如，以下代码中的 List 类型是一个泛型类型，它可以被任何其他类型参数化：

class List<T> {
  private items: T[] = [];

  add(item: T) {
    this.items.push(item);
  }

  get(index: number): T {
    return this.items[index];
  }
}

以下代码演示了如何使用 List 类型：

let numbers = new List<number>();
numbers.add(1);
numbers.add(2);
numbers.add(3);

let strings = new List<string>();
strings.add("a");
strings.add("b");
strings.add("c");

递归类型

Typescript 中的递归类型允许开发者创建可以引用自身类型的类型。例如，以下代码中的 Node 类型是一个递归类型，它可以引用自身：

type Node = {
  value: number;
  next: Node | null;
};

以下代码演示了如何使用 Node 类型：

let head: Node = {
  value: 1,
  next: {
    value: 2,
    next: {
      value: 3,
      next: null
    }
  }
};

实际示例

类型推断示例

以下代码演示了如何使用类型推断来简化代码编写：

function greet(name: string) {
  console.log(`Hello, ${name}!`);
}

greet("John Doe");

字符串模板类型示例

以下代码演示了如何使用字符串模板类型来创建动态字符串：

let name = "John Doe";
let age = 30;

let greeting = `Hello, ${name}! You are ${age} years old.`;

console.log(greeting);

类型兼容示例

以下代码演示了如何使用类型兼容性检查功能来确保变量和表达式具有兼容的类型：

let num = 123;
let str = "123";

if (num === str) {
  console.log("num and str are equal");
} else {
  console.log("num and str are not equal");
}

泛型类型示例

以下代码演示了如何使用泛型类型来创建可重用的类型：

class List<T> {
  private items: T[] = [];

  add(item: T) {
    this.items.push(item);
  }

  get(index: number): T {
    return this.items[index];
  }
}

let numbers = new List<number>();
numbers.add(1);
numbers.add(2);
numbers.add(3);

let strings = new List<string>();
strings.add("a");
strings.add("b");
strings.add("c");

递归类型示例

以下代码演示了如何使用递归类型来创建可以引用自身类型的类型：

type Node = {
  value: number;
  next: Node | null;
};

let head: Node = {
  value: 1,
  next: {
    value: 2,
    next: {
      value: 3,
      next: null
    }
  }
};