TS 类型兼容教程示例详解

 更新时间:2022年09月20日 14:27:22   作者:dingsheng  
这篇文章主要为大家介绍了TS 类型兼容教程示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

类型兼容

因为JS语言不慎过于领过, 真实开发场景中往往无法做到严格一致的类型约束,此时TS就不得不做类型兼容

  • 顶类型:unknown -- 任何类型都可以赋值给unknown
  • 底类型:never -- never兼容任何类型(可以赋值给任何类型)
  • any: 其实不是一个类型,它是一个错误关闭器,用了any就等同于放弃了类型约束

简单类型兼容

子集可以赋值给父级

type name = string | number

stringnumber 都是 类型name 的子集

普通对象兼容

属性多的可以赋值给属性少的,前提是有共同属性

  • 属性越多,限制越多,表示的集合越小(符合条件的对象越少)
  • 属性越少,限制越少,表示的集合越大
type Person = {
  name: string
  age: number
}
let user = {
  name: 'liu',
  age: 20,
  email: ''
}
let p: Person = user

函数兼容

参数数量不一致

数量少的兼容数量多的,前提为类型一致

只要参数部分能够找到对应的位置就用**==绿色箭头==,否则为==红色箭头==**,当参数全为绿色箭头时,最左侧的箭头就为绿色,代表函数可以兼容

参数类型不一致

参数部分: 子类可以兼容父类,则函数整体不能兼容,

MyMouseEventMyEvent 的子类,所以mouseListener 不兼容 listener

==对参数要求多的函数不能赋值给对参数要求少的函数==

MyEventMyMouseEvent 的父类,所以listener 兼容 mouseListener

返回不同

返回值属性多集合小 可以 兼容 返回值属性少集合大

以上就是TS 类型兼容教程示例详解的详细内容,更多关于TS 类型兼容的资料请关注脚本之家其它相关文章!

相关文章

  • await 错误捕获实现方式源码解析

    await 错误捕获实现方式源码解析

    这篇文章主要为大家介绍了await 错误捕获实现方式源码示例解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12
  • JavaScript函数式编程Thunk原理解析

    JavaScript函数式编程Thunk原理解析

    这篇文章主要为大家介绍了JavaScript函数式编程Thunk原理示例解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • 微信小程序 开发之全局配置

    微信小程序 开发之全局配置

    这篇文章主要介绍了微信小程序 开发之全局配置的相关资料,需要的朋友可以参考下
    2017-05-05
  • 微信小程序 选择器(时间,日期,地区)实例详解

    微信小程序 选择器(时间,日期,地区)实例详解

    这篇文章主要介绍了微信小程序 选择器(时间,日期,地区)实例详解的相关资料,这里提供了实例代码及实现效果图,帮助大家学习理解这部分知识,需要的朋友可以参考下
    2016-11-11
  • 为什么我们要做三份 Webpack 配置文件

    为什么我们要做三份 Webpack 配置文件

    前端从开发到部署前都离不开 Webpack 的参与,本文结合了我们自己在开发中碰到的种种问题解决方案,同时借鉴了很多开源项目的配置来介绍一种用 3 个 JS 文件来配置 Webpack 的方法。
    2017-09-09
  • ESLint规范TypeScript代码使用方法

    ESLint规范TypeScript代码使用方法

    这篇文章主要为大家介绍了ESLint规范TypeScript代码使用方法,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11
  • JS前端实现fsm有限状态机实例详解

    JS前端实现fsm有限状态机实例详解

    这篇文章主要为大家介绍了JS前端实现fsm有限状态机实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • 微信小程序 实现拖拽事件监听实例详解

    微信小程序 实现拖拽事件监听实例详解

    这篇文章主要介绍了微信小程序 实现拖拽事件监听实例详解的相关资料,在开发不少应用或者软件都要用到这样的方法,这里就对微信小程序实现该功能进行介绍,需要的朋友可以参考下
    2016-11-11
  • Promise静态四兄弟实现示例详解

    Promise静态四兄弟实现示例详解

    这篇文章主要为大家介绍了Promise静态四兄弟实现示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • umi插件开发仿dumi项目实现基础路由解析

    umi插件开发仿dumi项目实现基础路由解析

    这篇文章主要为大家介绍了umi插件开发仿dumi项目实现基础路由解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-01-01

最新评论