TypeScript 中的内置工具类型基础-TypeScript入门指南

当前位置:　首页>> 技术小册>> TypeScript入门指南

随着TypeScript的发展，内置的工具类型成为了其最引人注目的特性之一。它们提供了许多常见操作的类型抽象，这使得开发者能够更加轻松地构建复杂的类型。在本章节中，我们将介绍TypeScript中的内置工具类型，包括Partial，Readonly，Record，Pick，Omit，Exclude等。我们将通过代码示例来解释每个工具类型的作用和如何使用它们。

-------------------------

**1、Partial**

Partial是一个TypeScript内置的工具类型，它将一个接口或类型中的所有属性都设置为可选的。这意味着当我们使用Partial包装一个类型时，它的每个属性都可以被省略。下面是一个示例：

```javascript
interface Person {
  name: string;
  age: number;
  email: string;
}

type PartialPerson = Partial<Person>;

const partialPerson: PartialPerson = {};

```

在这个例子中，我们定义了一个名为Person的接口，它有三个属性：name，age和email。然后，我们使用Partial创建了一个新类型PartialPerson，并将其应用于Person接口。最后，我们创建了一个名为partialPerson的变量，并将它设置为空对象，因为PartialPerson中的所有属性都是可选的。

**2、Readonly**

Readonly是另一个TypeScript内置的工具类型，它将一个接口或类型中的所有属性都设置为只读的。这意味着我们无法修改任何属性的值。下面是一个示例：

```javascript
interface Person {
  readonly name: string;
  readonly age: number;
  readonly email: string;
}

const person: Person = {
  name: "John",
  age: 30,
  email: "john@example.com",
};

person.name = "Jane"; // Error: Cannot assign to 'name' because it is a read-only property.

```

在这个例子中，我们定义了一个名为Person的接口，并将其所有属性设置为只读的。然后，我们创建了一个名为person的变量，并设置它的值。最后，我们尝试修改person的name属性，但是TypeScript抛出了一个错误，因为name属性是只读的。

**3、Record**

Record是一个TypeScript内置的工具类型，它可以创建一个由一个类型中所有属性名和对应的属性类型所组成的新类型。下面是一个示例：

```javascript
type Person = {
  name: string;
  age: number;
  email: string;
};

type PersonRecord = Record<string, Person>;

const personRecord: PersonRecord = {
  john: { name: "John", age: 30, email: "john@example.com" },
  jane: { name: "Jane", age: 25, email: "jane@example.com" },
};

```

在这个例子中，我们定义了一个名为Person的类型，并将其应用于PersonRecord类型中。然后，我们创建了一个名为personRecord的变量赋予了两个值，每个值都是一个Person类型的对象，并且分别使用john和jane作为它们的键。PersonRecord类型中的字符串类型是键的类型，因此可以使用任何字符串作为键。

**4、Pick**

Pick是一个TypeScript内置的工具类型，它可以从一个类型中选择指定的属性。下面是一个示例：

```javascript
interface Person {
  name: string;
  age: number;
  email: string;
  phone: string;
}

type PersonNameEmail = Pick<Person, "name" | "email">;

const person: PersonNameEmail = {
  name: "John",
  email: "john@example.com",
};

```

在这个例子中，我们定义了一个名为Person的接口，并定义了四个属性：name，age，email和phone。然后，我们使用Pick创建了一个名为PersonNameEmail的新类型，并指定了要选择的属性。最后，我们创建了一个名为person的变量，它是PersonNameEmail类型，并只包含name和email属性。

**5、Omit**

Omit是一个TypeScript内置的工具类型，它可以从一个类型中排除指定的属性。下面是一个示例：

```javascript
interface Person {
  name: string;
  age: number;
  email: string;
  phone: string;
}

type PersonWithoutPhone = Omit<Person, "phone">;

const person: PersonWithoutPhone = {
  name: "John",
  age: 30,
  email: "john@example.com",
};

```

在这个例子中，我们定义了一个名为Person的接口，并定义了四个属性：name，age，email和phone。然后，我们使用Omit创建了一个名为PersonWithoutPhone的新类型，并指定了要排除的属性。最后，我们创建了一个名为person的变量，它是PersonWithoutPhone类型，并不包含phone属性。

**6、Exclude**

Exclude是一个TypeScript内置的工具类型，它可以从一个类型中排除可以分配给另一个类型的类型。下面是一个示例：

```javascript
type MyType = "a" | "b" | "c";
type MyExclude = Exclude<MyType, "a" | "b">;

const myExclude: MyExclude = "c";

```

在这个例子中，我们定义了一个名为MyType的类型，它由字符串"a"、"b"和"c"组成。然后，我们使用Exclude创建了一个名为MyExclude的新类型，并排除了可以分配给另一个类型的"a"和"b"。最后，我们创建了一个名为myExclude的变量，它是MyExclude类型，并包含字符串"c"。

**7、Extract**

Extract是一个TypeScript内置的工具类型，它可以从一个类型中提取可以分配给另一个类型的类型。下面是一个示例：

```javascript
type MyType = "a" | "b" | "c";
type MyExtract = Extract<MyType, "a" | "b">;

const myExtract: MyExtract = "a";

```

在这个例子中，我们定义了一个名为MyType的类型，它由字符串"a"、"b"和"c"组成。然后，我们使用Extract创建了一个名为MyExtract的新类型，并提取了可以分配给另一个类型的"a"和"b"。最后，我们创建了一个名为myExtract的变量，它是MyExtract类型，并包含字符串"a"。

**8、ReturnType**

ReturnType是一个TypeScript内置的工具类型，它可以从一个函数类型中提取返回类型。下面是一个示例：

```javascript
function add(a: number, b: number): number {
  return a + b;
}

type AddReturnType = ReturnType<typeof add>;

const result: AddReturnType = 3;

```

在这个例子中，我们定义了一个名为add的函数，它接受两个数字参数并返回它们的和。然后，我们使用ReturnType创建了一个名为AddReturnType的新类型，并指定它为add函数的返回类型。最后，我们创建了一个名为result的变量，它是AddReturnType类型，并包含数字3。

**9、Parameters**

Parameters是一个TypeScript内置的工具类型，它可以从一个函数类型中提取参数类型。下面是一个示例：

```javascript
function greet(name: string, age: number): void {
  console.log(`Hello, ${name}! You are ${age} years old.`);
}

type GreetParameters = Parameters<typeof greet>;

const params: GreetParameters = ["John", 30];

```

在这个例子中，我们定义了一个名为greet的函数，它接受一个名为name的字符串参数和一个名为age的数字参数，并在控制台中输出一条问候语。然后，我们使用Parameters创建了一个名为GreetParameters的新类型，并指定它为greet函数的参数类型。最后，我们创建了一个名为params的变量，它是GreetParameters类型，并包含两个字符串和数字类型的元素。

**小结**
这些工具类型提供了方便的方法来处理和转换类型，使得TypeScript的类型系统更加强大和灵活。通过熟练掌握这些工具类型，开发人员可以更加高效地编写类型安全的代码。

该分类下的相关小册推荐：

TypeScript 全面进阶指南

剑指TypeScript

TypeScript开发实战