TS 中常用的工具类型

typescript中预定义了一些工具类型，我们可以直接使用这些工具类型，也可以基于现有的工具类型生成新的类型。下面我将介绍几个常用的工具类型：

1. Pick, Omit

/**
 * Pick 从type中选择一个或多个属性，返回一个新的类型
 * Omit 从type中排除一个或多个属性，返回一个新的类型
 */

type Books = {
  id?: number,
  name: 'JS' | 'CSS' | 'HTML',
  price: number
}

let b1: Pick<Books, 'name'> = { name: 'JS' };
let b2: Omit<Books, 'id' | 'price'> = { name: 'JS' };

2.Exclude, Extract

/**
 * Exclude 从联合类型中排除一个或多个属性，返回一个新的类型
 * Extract 从联合类型中选择一个或多个属性，返回一个新的类型
 */

type Tags = 'JS' | 'TS' | 'Vue' | 'React';

type ExcludeTags = Exclude<Tags, 'Vue'>;
type ExtractTags = Extract<Tags, 'Vue'>;

3.Required, Readonly

/**
 * Required 把所有字段设置为必选字段
 * Readonly 把所有字段设置为只读
 */
 
 type Books = Readonly<{
  id?: number,
  name: 'JS' | 'CSS' | 'HTML',
  price: number
}>

let b1: Required<Pick<Books, 'name'>> = { name: 'JS' };
let b2: Required<Omit<Books, 'id' | 'price'>> = { name: 'JS' };

function fn(books: Books) {
    books.name = 'React';  // 此处会提示: 无法为“name”赋值，因为它是只读属性。
    return books
}

4.Partial

// Partial 把所有字段设置为可选字段

interface Books {
  id?: number,
  name: string,
  price: number
}

function getBook(books: Books, bookId: Partial<Omit<Books, 'id'>>) {
  // xxxx
}

getBook({ id: 1, name: 'a', price: 12}, {})
getBook({ id: 1, name: 'a', price: 12}, { id: 1 })
// 以上这两种都可以

5.NonNullable

/**
 * NonNullable 排除null和undefined
 */
 
type Test = string | number | null;
type Test2 = NonNullable<Test>;

/**
 * 
 * typeof 获取类型
 * parameters 获取函数参数类型，以元组的形式返回
 * ReturnType 获取函数返回值类型
 * Awaited 获取Promise的返回值类型
 */
 
function get(url: string) {
  return fetch(url).then(res => res.json() as Promise<{ code: 200, msg: 'ok' }>)
}

type GetFunc = typeof get;
type Params = Parameters<GetFunc>;
type returnType = ReturnType<GetFunc>;
type PromiseType = Awaited<returnType>;