TS的高级类型

1.索引类型

学习索引类型 首先要了解keyof(索引查询) Tk 和泛型约束

1.keyof索引查询

就是用来获取某个类型的所有键(键值对的那个键).

interface IPerson {
  name: string;
  age: number;
}
 
type Test = keyof IPerson; //'name'|"age"

这就相当于获得了IPerson里面的键也就是 是name和age。

2.T[K] 索引访问

就是获取接口T的K属性所代表的类型.

interface IPerson {
  name: string;
  age: number;
}
 
let type1:  IPerson['name'] 
let type2:  IPerson['age'] 

这样输出的就是string和age了

索引类型就是从对象中抽取一些属性的值 然后拼接成数组

const userInfo = {
  name: 'lin',
  age: '18',
}
 
function getValues(userInfo: any, keys: string[]) {
  return keys.map(key => userInfo[key])
}
 
// 抽取指定属性的值
console.log(getValues(userInfo, ['name','age']))  // ['lin', '18']
// 抽取obj中没有的属性:
console.log(getValues(userInfo, ['sex','outlook']))  // [undefined, undefined]

这个代码的意思就是 定义了一个对象和一个函数

这个函数得两个形参 第一个是任意类型的userInfo对象 第二个就是字符串类型的数组

通过对第二个形参输入的值遍历去寻找到userInfo中相同的属性的值打印出来

即使userinfo中没有这个属性也不会报错 只会输出undefind

3.检查动态属性

const userInfo = {
  name: 'lin',
  age: '18',
​
function getValues<T, K extends keyof T>(userInfo: T, keys: K[]): T[K][] {
    return keys.map(key => userInfo[key])
}

这个代码的意思是 定义了一个函数 他是有两种可能的类型 T 和 k

T是用来约束userinfo的 k是用来约束keys的

而K泛型继承了 userinfo的属性

所以当我们要调用这个函数时 形参需要输入的属性名是得符合userinfo中的两个属性名 否则就会报错

2.映射类型

TS允许将一个类型映射成另外一个类型

1.in

in操作符，用来对联合类型实现遍历。

type Person = "name" | "school" | "major"
 
type Obj =  {
  [p in Person]: string
}

2.Partial

Partial<T>将T的索引属性映射为可选的。

interface IPerson {
    name:string
    age:number
}
let P1: IPerson = {
    name:'lin',
    age:18
}

使用了IPerson接口，就一定要传name和age属性。

使用 Partial 改造一下，就可以变成可选属性，

interface IPerson {
    name:string
    age:number
}
type IPartial = Partial<IPerson>
let p1: IPartial = {}

Parital 原理

Parital 的实现用到了in和keyof

type Partial<T> = {
    [P in keyof T]?: T[P]
}

[P in keyof T]遍历T 上的所有属性

?:设置为属性为可选的

T[P]`设置类型为原来的类型

3.Readonly

和Partial几乎完全一样

Readonly<T>将T的所有属性映射为只读的，例如：

/**
 * Make all properties in T readonly
 */
type Readonly<T> = {
    readonly [P in keyof T]: T[P]
}

[P in keyof T]遍历T`上的所有属性

readonly`设置为属性为可选的

T[P]`设置类型为原来的类型

4.Pick

Pick用于抽取对象子集,挑选一组属性并组成一个新的类型

interface IPerson {
    name:string
    age:number
    sex:string
}
type IPick = Pick<IPerson.'name' | 'age'>
​
let p1:IPick = {
    name:'lin',
    age:18
}

这样就把name和age从IPerson中抽取出来。

5.Record原理

/**
 * Construct a type with a set of properties K of type T
 */
type Record<K extends keyof any, T> = {
    [P in K]: T
}

Record映射类型有两个参数：

第一个参数可以传入继承于uany的任何值。

第二个参数，作为新创建对象的值，被传入。

3.条件类型

Exclude和Extrcat的实现就用到了条件类型。

1.Exclude

/**
 * Exclude from T those types that are assignable to U
 */
type Exclude<T, U> = T extends U ? never : T

never表示一个不存在的类型

never与其他类型的联合后，为其他类型

type Test = string | number | never  

2.Extract

Extract<T,U>提取联合类型T和联合类型U的所有交集.

type Test = Extract<'key1' | 'key2', 'key1'>
​
/**
 * Extract from T those types that are assignable to U
 */
type Extract<T, U> = T extends U ? T : never
​

4.工具类型

为了方便开发者使用， TypeScript 内置了一些常用的工具类型。

上文介绍的索引类型、映射类型和条件类型都是工具类型。

1.Omit

Omit<T,U>从类型T中剔除U中的所有属性。

interface IPerson {
    name:string
    age:number
}
type IOmit = Omit<IPerson,'age'>

这样就剔除了 IPerson 上的 age 属性。

他和pick有点相反 它的原理

​
type Omit<T, K extends keyof any> = 
Pick<T, Exclude<keyof T, K>>
​

2.NonNullable

NonNullable<T> 用来过滤类型中的 null 及 undefined 类型。

type T0 = NonNullable<string | number | undefined>; // string | number
type T1 = NonNullable<string[] | null | undefined>; // string[]

原理

type NonNullable<T> =  T extends null |  undefined ?never : T

never 表示一个不存在的类型

never与其他类型的联合后，为其他类型

3.Parameters

Parameters获取函数的参数类型，将每个参数类型放在一个元祖中。

type T1 = Parameters<() => string>  // []
 
type T2 = Parameters<(arg: string) => void>  // [string]
 
type T3 = Parameters<(arg1: string, arg2: number) => void> // [arg1: string, arg2: number]

Parameters原理

​
type Parameters<T extends (...args: any) => any> = 
T extends (...args: infer P) => any ? P : never

在条件类型语句中，可以用 infer 声明一个类型变量并且对它进行使用。

Parameters首先约束参数T`必须是个函数类型

判断T是否是函数类型，如果是则使用infer P暂时存一下函数的参数类型，后面的语句直接用 P 即可得到这个类型并返回，否则就返回never

4.ReturnType

ReturnType获取函数的返回值类型

type T0 = ReturnType<() => string>  // string
 
type T1 = ReturnType<(s: string) => void>  // void

ReturnType原理

/**
 * Obtain the return type of a function type
 */
type ReturnType<T extends (...args: any) => any> = 
T extends (...args: any) => infer R ? R : any

懂了 Parameters，也就懂了 ReturnType，

• ReturnType首先约束参数T必须是个函数类型

• 判断T是否是函数类型，如果是则使用infer R暂时存一下函数的返回值类型，后面的语句直接用 R 即可得到这个类型并返回，否则就返回any