直观详细的typescript隐式类型转换图文详解

 更新时间:2022年07月29日 09:11:12   作者:寒水寺一禅  
这篇文章主要为大家介绍了直观详细的typescript隐式类型转换图文详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

正文

1、unknown是所有类型的父类型,其他类型都可以赋值给 unknown

let a: undefined = undefined;
let b: null = null;
let x2: unknown;
x2 = a; //正确
x2 = b; //正确

2、never 是任何类型的子类型,可以赋给任何类型

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)

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、子类型可以赋值给父类型。但是父类型不能赋值给子类型,必须加断言

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

那么通常情况下,如果一个方法或组件的属性,定义什么类型,我们传入什么类型就完事了,为什么还要整理这张图呢?

因为我们有时,并不能非常精确的定义一个类型,我们只想把一个子类型传进入,这样它也能识别。
比如vue中:

<xx-upload  :before-load="handleBeforeLoad">
//setup ts代码
let handleBeforeLoad = ()=>{
}

这样传入会报错,因为你会发现before-load传入的类型是个由命名空间定义的自定义类型。

要么你精确的传入匹配的类型

import type { UploaderBeforeRead } from "xx/lib/upload/types"
let beforeRead:UploaderBeforeRead = (file:File | File[]):boolean=>{
}

要么传入一个any,接收一个any参数,因为第三条中"any可以赋值给任何类型,任何类型可以赋值给any"就可以解决。

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

以上就是直观详细的typescript隐式类型转换图文详解的详细内容,更多关于typescript隐式类型转换的资料请关注脚本之家其它相关文章!

相关文章

  • 微信小程序中button组件的边框设置的实例详解

    微信小程序中button组件的边框设置的实例详解

    这篇文章主要介绍了微信小程序中button组件的边框设置的实例详解的相关资料,希望通过本文大家能够掌握这部分内容,需要的朋友可以参考下
    2017-09-09
  • Skypack布局前端基建实现过程详解

    Skypack布局前端基建实现过程详解

    这篇文章主要为大家介绍了Skypack布局前端基建过程详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • 业务层hooks封装useSessionStorage实例详解

    业务层hooks封装useSessionStorage实例详解

    这篇文章主要为大家介绍了业务层hooks封装useSessionStorage实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • Google 地图获取API Key详细教程

    Google 地图获取API Key详细教程

    本文主要介绍Google 地图API Key,开发Google 地图应用的朋友都知道,在开发的前需要免费的Google 地图API Key,这里详细给出获得API Key的流程,有需要的小伙伴参考下
    2016-08-08
  • 徒手实现关于JavaScript的24+数组方法

    徒手实现关于JavaScript的24+数组方法

    数组是我们日常工作中用的最频繁的一类数据结构,能帮助我们解决许多问题,而其本身也包含接近33个之多的方法,做了一个脑图分类如下,熟练使用数组的你,是否想知道他们内部的实现原理呢?接下来小编就带大家进入主题,希望能帮助到你
    2021-09-09
  • js 实现文件上传样式详情

    js 实现文件上传样式详情

    这篇文章主要介绍了js 实现文件上传样式,下面文章举例说明js 是如何实现文件上传样式的,附有代码详细解说,需要的朋友可以参考一下,希望对你有所帮助
    2021-10-10
  • 微信小程序 本地图片按照屏幕尺寸处理

    微信小程序 本地图片按照屏幕尺寸处理

    这篇文章主要介绍了微信小程序 本地图片按照屏幕尺寸处理的相关资料,这里提供具体实现步骤,需要的朋友可以参考下
    2017-08-08
  • 微信小程序 网络API 上传、下载详解

    微信小程序 网络API 上传、下载详解

    这篇文章主要介绍了微信小程序 网络API 上传、下载详解的相关资料,需要的朋友可以参考下
    2016-11-11
  • 微信小程序(二十一)switch组件详细介绍

    微信小程序(二十一)switch组件详细介绍

    这篇文章主要介绍了微信小程序switch组件详细介绍的相关资料,需要的朋友可以参考下
    2016-09-09
  • Qiankun Sentry 监控异常上报无法自动区分项目解决

    Qiankun Sentry 监控异常上报无法自动区分项目解决

    这篇文章主要为大家介绍了Qiankun Sentry 监控异常上报无法自动区分项目解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11

最新评论