1. 联合类型

1
2
3
/* 首先是联合类型的介绍 */
let a: string | number = '123' // 变量a的类型既可以是string，也可以是number
a = 123

2. Pick

选择

1
2
3
4
5
6
type UserInfo = {
  name: string;
  age?: number;
  sex: number;
}
const c: Pick<UserInfo, "name" | "age"> = { name: "", age: 12 }; // age 依然可选

3. Omit

类似于 Exclude， 可以排除类型中一部分的属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
type UserInfo = {
  uid: string;
  name: string;
  password: string;
  created: number;
  updated: number;
}

/**
 * 例如在用户中有这么多属性，
 * 但 uid，created，updated  是注册时服务器产生的，
 * 所以 需要省略一些属性
 */
type RegisterUser = Omit<UserInfo, 'uid' | 'created' | 'updated'>
const h: RegisterUser = {}  
// 类型“{}”缺少类型“RegisterUser”中的以下属性: name, password

4. keyof

将一个类型的属性名全部提取出来当做联合类型

1
2
3
4
5
6
7
8
9
10
11
type UserInfo = {
  name: string;
  age: number;
  sex: number;
}

type Users = keyof UserInfo; // 等同于 type Users = "name" | "age" | "sex"
const p1: Users = 'name' // 可以
const p2: Users = 'age' // 可以
// const p3: Users = 'height' 
// 不可以 不能将类型“"height"”分配给类型“keyof UserInfo”

5. Record

在 TS 中，类似数组、字符串、数组、接口这些常见的类型都非常常见，但是如果要定义一个对象的 key 和 value 类型该怎么做呢？这时候就需要用到 TS 的 Record 了

1
2
3
4
5
6
7
8
9
10
11
interface PageInfo {
  title: string;
}

type Page = "home" | "about" | "contact";

const nav: Record<Page, PageInfo> = {
  home: { title: "home" },
  about: { title: "about" },
  contact: { title: "contact" },
};

6. Exclude

(排除) 可以排除 联合类型 中一部分的内容

1
2
3
4
5
type MyTypes = 'name' | 'age' | 'sex';
// Exclude(排除)
const e: Exclude<MyTypes, "name"> = 'age';
// const j: Exclude<MyTypes, "name"> = 'name'
// 不能将类型“"name"”分配给类型“"age" | "sex"”。

7. Partial

(部分的; 不完全的) ts中就是让一个定义中的所有属性都变成可选 有时候模拟数据时数据不全，但又不想（或不能）破坏原有结构

1
2
3
4
5
6
type UserInfo = {
  name: string;
  age?: number;
  sex: number;
}
const a: Partial<UserInfo> = {} // 全部参数可选

8. Required

(必须的） 和Partial刚好相反，将一个定义中的属性全部变成必选 

1
2
3
4
5
6
type UserInfo = {
  name: string;
  age?: number;
  sex: number;
}
const b: Required<UserInfo> = { name: "", age: 12, sex: 1 };

9. Readonly

(只读) 就是让一个定义中的所有属性都变成只读参数

1
2
3
4
5
6
type UserInfo = {
  name: string;
  age?: number;
  sex: number;
}
const d: Readonly<UserInfo> = { name: "", sex: 1 }