# 13 个 Typescript 实用类型
interface UserProfileResponse {
id: number;
name: string;
email: string;
phone: string;
avatar: string;
}
interface LoginResponse {
id: number;
name: string;
}
// 不如
type LoginResponse = Pick<UserProfileResponse, "id" | "name">;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# Uppercase
构建一个类型的所有属性都设置为大写的类型。
type Role = "admin" | "user" | "guest";
// Bad practice
type UppercaseRole = "ADMIN" | "USER" | "GUEST";
// Good practice ✅
type UppercaseRole = Uppercase<Role>; // "ADMIN" | "USER" | "GUEST"
1
2
3
4
5
6
7
2
3
4
5
6
7
# Lowercase
构建一个类型的所有属性都设置为小写的类型。与 Uppercase 相反。
type Role = "ADMIN" | "USER" | "GUEST";
// Bad practice
type LowercaseRole = "admin" | "user" | "guest";
// Good practice ✅
type LowercaseRole = Lowercase<Role>; // "admin" | "user" | "guest"
1
2
3
4
5
6
7
2
3
4
5
6
7
# Capitalize
构建一个类型的所有属性都设置为大写开头的类型。
type Role = "admin" | "user" | "guest";
// Bad practice
type CapitalizeRole = "Admin" | "User" | "Guest";
// Good practice ✅
type CapitalizeRole = Capitalize<Role>; // "Admin" | "User" | "Guest"
1
2
3
4
5
6
7
2
3
4
5
6
7
# Uncapitalize
构建一个类型的所有属性都设置为非大写的类型。与 Capitalize 相反。
type Role = "Admin" | "User" | "Guest";
// Bad practice
type UncapitalizeRole = "admin" | "user" | "guest";
// Good practice ✅
type UncapitalizeRole = Uncapitalize<Role>; // "admin" | "user" | "guest"
1
2
3
4
5
6
7
2
3
4
5
6
7
# Partial
构建一个类型的所有属性都设置为可选的类型。
interface User {
name: string;
age: number;
password: string;
}
// Bad practice
interface PartialUser {
name?: string;
age?: number;
password?: string;
}
// Good practice ✅
type PartialUser = Partial<User>;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# Required
构建一个由 Type 的所有属性组成的类型，设置为必填。与 Partial 相反。
interface User {
name?: string;
age?: number;
password?: string;
}
// Bad practice
interface RequiredUser {
name: string;
age: number;
password: string;
}
// Good practice ✅
type RequiredUser = Required<User>;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# Readonly
构建一个由 Type 的所有属性组成的类型，设置为只读。
interface User {
role: string;
}
// Bad practice
const user: User = { role: "ADMIN" };
user.role = "USER";
// Good practice ✅
type ReadonlyUser = Readonly<User>;
const user: ReadonlyUser = { role: "ADMIN" };
user.role = "USER"; // Error: Cannot assign to 'role' because it is a read-only
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# Record
Record 是一个很好用的工具类型。他会将一个类型的所有属性值都映射到另一个类型上并创造一个新的类型，
interface Address {
street: string;
pin: number;
}
interface Addresses {
home: Address;
office: Address;
}
// 或者
type AddressesRecord = Record<"home" | "office", Address>;
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# Pick
从一个复合类型中，取出几个想要的类型的组合
interface User {
name: string;
age: number;
password: string;
}
// Bad practice
interface UserPartial {
name: string;
age: number;
}
// Good practice ✅
type UserPartial = Pick<User, "name" | "age">;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# Omit
以一个类型为基础支持剔除某些属性，然后返回一个新类型。
interface User {
name: string;
age: number;
password: string;
}
// Bad practice
interface UserPartial {
name: string;
age: number;
}
// Good practice ✅
type UserPartial = Omit<User, "password">;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# Exclude
Exclude<T, U>，该工具类型能够从类型 T 中剔除所有可以赋值给类型 U 的类型。
type Role = "ADMIN" | "USER" | "GUEST";
// Bad practice
type NonAdminRole = "USER" | "GUEST";
// Good practice ✅
type NonAdmin = Exclude<Role, "ADMIN">; // "USER" | "GUEST"
1
2
3
4
5
6
7
2
3
4
5
6
7
# Extract
Extract 的功能，与 Exclude 相反，它是 提取 T 中可以赋值给 U 的类型。
type Role = "ADMIN" | "USER" | "GUEST";
// Bad practice
type AdminRole = "ADMIN";
// Good practice ✅
type Admin = Extract<Role, "ADMIN">; // "ADMIN"
1
2
3
4
5
6
7
2
3
4
5
6
7
# NonNullable
构建一个类型的所有属性都设置为非空的类型。
type Role = "ADMIN" | "USER" | null;
// Bad practice
type NonNullableRole = "ADMIN" | "USER";
// Good practice ✅
type NonNullableRole = NonNullable<Role>; // "ADMIN" | "USER"
1
2
3
4
5
6
7
2
3
4
5
6
7