as button onitemclicklistener为null_为vue3.0的学习TS解读高级类型

ゝ一世哀愁。 2023-01-10 10:06 13阅读 0赞

## 知识点摘要 ##

本节课主要关键词为: 自动类型推断 / 类型断言 / 类型别名(type) / 映射类型(Pick/Record等...) / 条件类型(extends) / 类型推断(infer)

## 自动类型推断(不用你标类型了,ts自己猜) ##

大家现在写ts的时候一定会在每个变量后面都加上类型吧? 但是?

现在告诉大家有些情况下你不需要标注类型, ts可以根据你写的代码来自动推断出类型:

##### 赋值字面量给变量 #####

let n = 1; // ts会自动推断出n是number类型
    n+=3 // 不报错,因为已知类型
    
    let arr1 = []; // 类型为: any[]
    arr1.push(1,2,{
         o:3}); 
    
    let arr = [1]; // 内部要有数字, 才能推断出正确类型
    arr.push(2);

##### 自动阅读if条件判断 #####

let n: number|null = 0.5 < Math.random() ? 1:null;
    if(null !== n){
         
        n+=3 // ts知道现在n不是null是number
    }

##### 浏览器自带api #####

document.ontouchstart = ev=>{
          // 能自动推断出ev为TouchEvent
    console.log(ev.touches);  // 不报错, TouchEvent上有touches属性
    }

##### typeof #####

`typeof`就是js中的`typeof`, ts会根据你代码中出现的`typeof`来自动推断类型:

let n:number|string = 0.5 < Math.random()? 1:'1';
    
    // 如果没有typeof, n*=2会报错, 提示没法推断出当前是number类型, 不能进行乘法运算
    if('number' === typeof n) {
         
        n*= 2;
    } else  {
         
        n= '2';
    }

注意: 在ts文档中, 该部分的知识点叫做typeof类型保护, 和其他类型推断的内容是分开的, 被写在高级类型/类型保护章节中.

##### instanceof #####

ts会根据你代码中出现的`instanceof`来自动推断类型:

let obj = 0.5 < Math.random() ? new String(1) : new Array(1);
    if(obj instanceof String){
         
    // obj推断为String类型
        obj+= '123'
    } else {
         
    // obj为any[]类型
        obj.push(123);
    }

注意: 在ts文档中, 该部分的知识点叫做instanceof类型保护, 和其他类型推断的内容是分开的, 被写在高级类型/类型保护章节中.

## 类型断言(你告诉ts是什么类型, 他都信) ##

有些情况下系统没办法自动推断出正确的类型, 就需要我们标记下, 断言有2种语法, 一种是通过"<>", 一种通过"as", 举例说明:

let obj = 0.5 < Math.random() ? 1 : [1]; // number|number[]
    
    // 断言, 告诉ts, obj为数组
    (<number[]>obj).push(1);
    
    //等价
    (obj as number[]).push(1);

## 类型别名(type) ##

类型别名可以表示很多接口表示不了的类型, 比如字面量类型(常用来校验取值范围):

##### 更多组合: #####

interface A1{
         
        a:number;
    }
    type B = A1 | {
         b:string};
    type C = A1 & {
         b:string};
    
    // 与泛型组合
    type D<T> = A1 | T[];

## 索引类型(keyof) ##

js中的`Object.keys`大家肯定都用过, 获取对象的键值, ts中的`keyof`和他类似, 可以用来获取对象类型的键值:

type A = keyof {
         a:1,b:'123'} // 'a'|'b'
    type B = keyof [1,2] // '1'|'2'|'push'... , 获取到内容的同时, 还得到了Array原型上的方法和属性(实战中暂时没遇到这种需求, 了解即可)

可以获得键值, 也可以获取对象类型的值的类型:

type C = A['a'] // 等于type C = 1;
    let c:C = 2 // 错误, 值只能是1

## 映射类型(Readonly, Pick, Record等...) ##

映射类型比较像修改类型的工具函数, 比如`Readonly`可以把每个属性都变成只读:

type A  = {
         a:number, b:string}
    type A1 = Readonly<A> // {readonly a: number;readonly b: string;}

打开node\_modules/typescript/lib文件夹可以找到`lib.es5.d.ts`, 在这我们能找到`Readonly`的定义:

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

其实不是很复杂, 看了本节课前面前面的内容, 这个很好理解是吧:

1.  定义一个支持泛型的类型别名, 传入类型参数`T`.
2.  通过`keyof`获取`T`上的键值集合.
3.  用`in`表示循环`keyof`获取的键值.
4.  添加`readonly`标记.

##### Partial, 让属性都变成可选的 #####

type A  = {
         a:number, b:string}
    type A1 = Partial<A> // { a?: number; b?: string;}

##### Required, 让属性都变成必选 #####

type A  = {
         a?:number, b?:string}
    type A1 = Required<A> // { a: number; b: string;}

##### Pick, 只保留自己选择的属性, U代表属性集合 #####

type A  = {
         a:number, b:string}
    type A1 = Pick<A, 'a'> //  {a:number}

##### Omit 实现排除已选的属性 #####

type A  = {
         a:number, b:string}
    type A1 = Omit<A, 'a'> // {b:string}

##### Record, 创建一个类型,T代表键值的类型, U代表值的类型 #####

type A1 = Record<string, string> // 等价{[k:string]:string}

##### Exclude, 过滤T中和U相同(或兼容)的类型 #####

type A  = {
         a:number, b:string}
    type A1 = Exclude<number|string, string|number[]> // number
    
    // 兼容
    type A2 = Exclude<number|string, any|number[]> // never , 因为any兼容number, 所以number被过滤掉

##### Extract, 提取T中和U相同(或兼容)的类型 #####

type A  = {
         a:number, b:string}
    type A1 = Extract<number|string, string|number[]> // string

##### NonNullable, 剔除T中的undefined和null #####

type A1 = NonNullable<number|string|null|undefined> // number|string

##### ReturnType, 获取T的返回值的类型 #####

type A1= ReturnType<()=>number> // number

##### InstanceType, 返回T的实例类型 #####

ts中类有2种类型, 静态部分的类型和实例的类型, 所以`T`如果是构造函数类型, 那么`InstanceType`可以返回他的实例类型:

interface A{
         
        a:HTMLElement;
    }
    
    interface AConstructor{
         
    new():A;
    }
    
    function create (AClass:AConstructor):InstanceType<AConstructor>{
         
    return new AClass();
    }

##### Parameters 获取函数参数类型 #####

返回类型为元祖, 元素顺序同参数顺序.

interface A{
         
    (a:number, b:string):string[];
    }
    
    type A1 = Parameters<A> // [number, string]

##### ConstructorParameters 获取构造函数的参数类型 #####

和`Parameters`类似, 只是`T`这里是构造函数类型.

interface AConstructor{
         
    new(a:number):string[];
    }
    
    type A1 = ConstructorParameters<AConstructor> // [number]

## extends(条件类型) ##

T extends U ? X : Y

用来表示类型是不确定的, 如果`U`的类型可以表示`T`, 那么返回`X`, 否则`Y`. 举几个例子:

type A =  string extends '123' ? string :'123' // '123'
    type B =  '123' extends string ? string :123 // string

明显`string`的范围更大, `'123'`可以被`string`表示, 反之不可.

## infer(类型推断) ##