学习 VUE3+TS 项目过程中.... 查漏补缺（一）

TS中的索引类型

索引类型查询操作符 keyof T

官网的解释：对于任何类型 T， keyof T的结果为 T上已知的公共属性名的联合。

interface Person { name: string; age: number; }

let personProps: keyof Person; // 'name' | 'age'

以上代码中，keyof Persion是完全可以与'name' | 'age'互相替换的。

keyof any 为 string | number | symbol

索引访问操作符 T[K]

这表示我们可以通过T[K]取到T类型中包含的类型（只要保证变量 K extends keyof T即可）

function getProperty<T, K extends keyof T>(o: T, name: K): T[K] {
    return o[name]; // o[name] is of type T[K] 
}

TS中的映射类型

官网的解释：TypeScript提供了从旧类型中创建新类型的一种方式

1. Readonly

-- 将每个属性都转换成Readonly

type Readonly<T> = { readonly [P in keyof T]: T[P]; }

2. Partial

-- 将每个属性转为可选

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

3. Nullable

-- 属性可以为null

type Nullable<T> = { [P in keyof T]: T[P] | null }

4. Pick

-- 在T类型中挑出K类型

type Pick<T, K extends keyof T> = { [P in K]: T[P]; }

interface Person { 
    name: string; 
    age: number; 
    tell: string;
}

interface newPerson extends Pick<Persion, 'name' | 'age'> 
newPerson {
    name:string;
    age:number;
}

5. Exclude<T, U>

-- 从T中剔除可以赋值给U的类型

6. Extract<T, U>

-- 提取T中可以赋值给U的类型

7. NonNullable

-- 从T中剔除null和undefined。

8. ReturnType

-- 获取函数的返回值类型