TypeScript 中如何使用高级类型？

TypeScript 是一种静态类型的 JavaScript 超集，它提供了许多高级类型来增强代码的可读性、可维护性和可靠性。本文将介绍 TypeScript 中常用的高级类型，包括联合类型、交叉类型、类型别名、泛型和条件类型，并且通过示例代码来说明它们的使用方法和指导意义。

联合类型

联合类型（Union Types）表示一个值可以是多种类型中的一种。它使用 | 符号将多个类型组合在一起。

let numOrStr: number | string;
numOrStr = 123;
numOrStr = 'abc';

在上面的例子中，numOrStr 变量可以是一个数字或一个字符串。联合类型可以用于参数类型、返回值类型和变量类型等多种场景。

交叉类型

交叉类型（Intersection Types）表示一个值同时具有多种类型的属性和方法。它使用 & 符号将多个类型组合在一起。

// www.javascriptcn.com code example
interface Person {
  name: string;
  age: number;
}

interface Student {
  school: string;
  grade: number;
}

type PersonAndStudent = Person & Student;

const tom: PersonAndStudent = {
  name: 'Tom',
  age: 18,
  school: 'ABC School',
  grade: 3
};

在上面的例子中，PersonAndStudent 类型表示一个同时具有 Person 和 Student 类型属性和方法的值，tom 变量就是一个 PersonAndStudent 类型的值。交叉类型可以用于扩展接口、合并类型等多种场景。

类型别名

类型别名（Type Aliases）用来给一个类型起一个新的名字，可以用于任何类型。

// www.javascriptcn.com code example
type Name = string;
type Age = number;

interface Person {
  name: Name;
  age: Age;
}

const tom: Person = {
  name: 'Tom',
  age: 18
};

在上面的例子中，Name 和 Age 是类型别名，它们分别代表 string 和 number 类型。类型别名可以用于复杂类型、重复类型等多种场景。

泛型

泛型（Generics）是一种在定义函数、类和接口时使用类型参数的方法，它可以增强代码的通用性和可重用性。

// www.javascriptcn.com code example
function createArray<T>(length: number, value: T): T[] {
  const arr: T[] = [];
  for (let i = 0; i < length; i++) {
    arr.push(value);
  }
  return arr;
}

const arr1 = createArray(3, 1); // [1, 1, 1]
const arr2 = createArray(2, 'a'); // ['a', 'a']

在上面的例子中，createArray 函数使用泛型类型参数 T，它可以根据传入的 value 参数的类型自动推断出返回值的类型。泛型可以用于数组、对象、函数等多种场景。

条件类型

条件类型（Conditional Types）是一种在定义类型时根据条件判断选择类型的方法，它可以增强代码的灵活性和可读性。

// www.javascriptcn.com code example
type TypeName<T> =
  T extends string ? 'string' :
  T extends number ? 'number' :
  T extends boolean ? 'boolean' :
  T extends undefined ? 'undefined' :
  T extends null ? 'null' :
  'object';

const type1: TypeName<string> = 'string'; // 'string'
const type2: TypeName<number> = 'number'; // 'number'
const type3: TypeName<boolean> = 'boolean'; // 'boolean'
const type4: TypeName<undefined> = 'undefined'; // 'undefined'
const type5: TypeName<null> = 'null'; // 'null'
const type6: TypeName<object> = 'object'; // 'object'

在上面的例子中，TypeName 类型使用条件类型根据不同的类型判断选择不同的类型名称。条件类型可以用于类型判断、类型转换等多种场景。

结语

本文介绍了 TypeScript 中常用的高级类型，包括联合类型、交叉类型、类型别名、泛型和条件类型，并且通过示例代码来说明它们的使用方法和指导意义。掌握这些高级类型可以让我们更好地编写类型安全、可读性和可维护性的代码。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d89e03a941bf7134f1531a