Typescript 有哪些实用的内置类型？

背景

TypeScript 是现代前端工程开发的必备知识，其中内置了很多默认类型；本篇将介绍了Typescript中的一系列的内置类型，并通过具体的代码示例为大家解释了如何使用这些类型。

本文会分别介绍**Required、Partial、Pick、Record、Omit、Exclude、Extract、NonNullable、ReturnType以及字符串相关的类型 Uppercase、Lowercase、Capitalize和 Uncapitalize**等。每个类型都配有详细的示例代码来帮助读者更深入地理解类型和其用法，而不仅仅是理论知识。

希望通过阅读本文，能够帮助大家对Typescript的内置类型有更为全面的理解。

类型手册

Required

将所有类型转为必选类型

javascript
type User = {
    name?: string
    password?: string
    id?: number
}

type RequireUser = Required<User> 相当于 {
    name: string
    password: string
    id: number
}

Partial

将所有类型转为可选类型

javascript
type PartialUser = {
    name: string
    password: string
    id: number
}
Partial<User2> 相当于 type User 

Pick<T, K>

从 T 中筛选出 K (大类型中挑选小类型)

javascript
type PickUser = Pick<RequireUser, 'name' | 'id'> // {name: string, id: number}
const user: PickUser = {name: "John", id: 1}

Record<K, T>

返回一个对象类型，参数 Keys用作键名，参数 Type用作键值类型。

javascript
interface CatInfo {
  age: number;
  breed: string;
}
 
type CatName = "miffy" | "boris" | "mordred";
 
const cats: Record<CatName, CatInfo> = {
  miffy: { age: 10, breed: "Persian" },
  boris: { age: 5, breed: "Maine Coon" },
  mordred: { age: 16, breed: "British Shorthair" },
};

Omit<Type, Keys>

用来从对象类型 Type中，删除指定的属性 Keys，组成一个新的对象类型返回。

javascript
interface Todo {
  title: string;
  description: string;
  completed: boolean;
  createdAt: number;
}
 
type TodoPreview = Omit<Todo, "description">;
 
const todo: TodoPreview = {
  title: "Clean room",
  completed: false,
  createdAt: 1615544252770,
};

Exclude<UnionType, ExcludedMembers>

用来从联合类型 UnionType里面，删除某些类型 ExcludedMembers，组成一个新的类型返回。

javascript
type T0 = Exclude<"a" | "b" | "c", "a">; // "b" | "c"

Extract<Type, Union>

用来从联合类型 UnionType之中，提取指定类型 Union，组成一个新类型返回。

javascript
type T0 = Extract<"a" | "b" | "c", "a" | "f">; // "a"

NonNullable

用来从联合类型 Type删除 null类型和 undefined类型，组成一个新类型返回，也就是返回 Type的非空类型版本

javascript
type T0 = NonNullable<string | number | undefined>; // string | number

ReturnType

提取函数类型 Type的返回值类型，作为一个新类型返回。

javascript
declare function f1(): { a: number; b: string };
type T4 = ReturnType<typeof f1>;
type T4 = {
    a: number;
    b: string;
}

字符串操作类型

Uppercase

将字符串的每个字符转为大写。

javascript
type A = 'hello';
type B = Uppercase<A>; // "HELLO"

Lowercase

将字符串的每个字符转为小写。

javascript
type A = 'HELLO';
type B = Uppercase<A>; // "hello"

Capitalize

将字符串的第一个字符转为大写。

javascript
type A = 'hello';
type B = Capitalize<A>;// "Hello"

Uncapitalize

将字符串的第一个字符转为小写。

javascript
type A = 'HELLO';
type B = Capitalize<A>;// "hELLO"