typescript隐式类型转换图,很直观详细

2022-07-2918:54:12WEB前端开发Comments1,199 views字数 1041阅读模式

typescript隐式类型转换图,很直观详细文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/26196.html

1、unknown是所有类型的父类型,其他类型都可以赋值给 unknown文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/26196.html

let a: undefined = undefined;
let b: null = null;


let x2: unknown;

x2 = a; //正确
x2 = b; //正确

2、never 是任何类型的子类型,可以赋给任何类型文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/26196.html

let a: undefined = undefined;
let b: null = null;

function err(): never { // OK
    throw new Error('error');
}

a = err();  //正确
b = err(); //正确

3、any可以赋值给任何类型,任何类型可以赋值给any,除了any不能赋值给never(但是never却可以赋值给any)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/26196.html

let a: undefined = undefined;
let b: null = null;

let err: never;
let y: any = 4;

a = y;    //正确
b = y;    //正确

y = a;    //正确
y = b;    //正确

err = y ;  //报错 不能将类型“any”分配给类型“never”。ts(2322)

4、子类型可以赋值给父类型。但是父类型不能赋值给子类型,必须加断言文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/26196.html

let v: void;
let a: undefined = undefined;

v = a;  //正确 
a = v;  //错误 不能将类型“void”分配给类型“undefined”。ts(2322)
a = v as undefined;   //正确

那么通常情况下,如果一个方法或组件的属性,定义什么类型,我们传入什么类型就完事了,为什么还要整理这张图呢?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/26196.html

因为我们有时,并不能非常精确的定义一个类型,我们只想把一个子类型传进入,这样它也能识别。
比如vue中:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/26196.html

<xx-upload  :before-load="handleBeforeLoad">


//setup ts代码

let handleBeforeLoad = ()=>{

}

这样传入会报错,因为你会发现before-load传入的类型是个由命名空间定义的自定义类型。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/26196.html

要么你精确的传入匹配的类型文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/26196.html

import type { UploaderBeforeRead } from "xx/lib/upload/types"

let beforeRead:UploaderBeforeRead = (file:File | File[]):boolean=>{

}

要么传入一个any,接收一个any参数,因为第三条中"any可以赋值给任何类型,任何类型可以赋值给any"就可以解决。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/26196.html

let beforeRead:any = (file:any):boolean=>{

}
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/26196.html
  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/gcs/26196.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定