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 类型兼容的资料请关注我们其它相关文章!

时间: 2022-09-20

vue3+ts中ref与reactive指定类型实现示例

目录 ref 的基础特性 如何在ref中指定类型 reactive isRef.isReactive toRef.toRefs.toRaw ref 的基础特性 ref 约等于 reactive({ value: x }) ref() 可以定义时无参数,第一次赋值任意类型,然后就不能增加属性 const refa = ref(6) const rcta = reactive({ value: 12 }) console.log('refa:', refa) //RefImpl{...} conso

UMD的包导出TS 类型方法示例

目录 TypeScript 里声明模块 类型提示检查 UMD 的 global 类型 总结 TypeScript 里声明模块 在 TypeScript 里声明模块,最早是用 namespace 和 module 的语法,后来支持了 es module,类型和变量会用 import 来导入.用 export 导出. 比如你写了一个库,导出的变量叫 Guang,它下面有 name 和 age 两个属性,所以你是这样声明类型的: export default Guang; declare namesp

ts 类型体操 Chainable Options 可链式选项示例详解

目录 问题 答案 传参 option部分 get 问题 在JavaScript我们通常会使用到可串联(Chainable/Pipline)的函数构造一个对象,但是在Typescript中,你能合理地给它赋上类型吗? 题目是: 可以使用任何你喜欢的方式实现这个类型 - interface, type, 或者 class 都行.你需要提供两个函数option(key, value) 和 get() 在 option 中你需要使用提供的key和value来扩展当前的对象类型,通过 get()获取最终结

TS 类型收窄教程示例详解

目录 JS方法

前端React Nextjs中的TS类型过滤实用技巧

目录 自我介绍 分步介绍 开胃小菜 keyof in Conditional 泛型 正餐开始 实战应用例子 最后 大家好,我是零一,相信大家在阅读同事写的代码或者优秀的开源库的代码时,一定见过各种各样的风骚的TS写法,不花点时间下去根本看不懂,换作是我们,可能就直接一个 any 完事了,但是真正当项目体积变大后,你会发现这些 TS骚操作真的很重要,因为它能很好地帮助你做静态类型校验 自我介绍 TS类型过滤,英文名(我自己取的)叫 FilterConditionally,这是它完整的样子 type

为Vue3 组件标注 TS 类型实例详解

目录 为 props 标注类型 使用 <script setup> 非 <script setup> 为 emits 标注类型 使用 <script setup> 非 <script setup> 为 ref() 标注类型 默认推导类型 通过接口指定类型 通过泛型指定类型 为 reactive() 标注类型 默认推导类型 通过接口指定类型 为 computed() 标注类型 默认推导类型 通过泛型指定类型 为事件处理函数标注类型 为 provide / in

jQuery EasyUI 组件加上“清除”功能实例详解

1.背景 在使用 EasyUI 各表单组件时,尤其是使用 ComboBox(下拉列表框).DateBox(日期输入框).DateTimeBox(日期时间输入框)这三个组件时,经常有这样的需求,下拉框或日期只允许选择.不允许手动输入,这时只要在组件选项中加入 editable:false 就可以实现,但有一个问题,就是:一旦选择了,没办法清空.经过研究,可以用一个变通的解决方案:给组件加上一个"清除"按钮,当有值是,显示按钮,点击按钮可清空值,当无值是,隐藏按钮. 2.函数定义 定义JS

jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解

简单的两个步骤即可实现分页功能 <script src="<%=basePath%>/resources/js/jquery-1.7.1.min.js"></script> <script src="<%=basePath%>/resources/js/jquery.loehpagerv1.0.js"></script> <script type="text/JavaScript

Java 获取泛型的类型实例详解

Java 获取泛型的类型实例详解 Java 泛型实际上有很多缺陷,比如不能直接获取泛型的类型,不能获取带泛型类等. 以下方式是不正确的: ①.获取带泛型的类的类型 Class lstUClazz = List<User>.class ②获取局部变量泛型的类型 List<User> listUser = new ArrayList<User>(); Type genType = listUser.getClass().getClass().getGenericSuperc

vue组件间的参数传递实例详解

场景分析 在前端开发中,我们常常会运用到"组件库".在main入口中引入组件库,就可以很轻松的在页面中引入,并做一些基本的配置,如样式,颜色等.只需要在引入的组件中写入特定的属性,就能够定义. 举例说明 例如:element-ui组件库中使用switch开关,有个属性active-color是设置"打开时"的背景色.change事件是触发状态的事件. <el-switch v-model="value" :active-color=&quo

Java类库BeanUtils组件使用方法及实例详解

BeanUtils BeanUtils是Apache commens组件里面的成员,由Apache提供的一套开源api,用于简化对javaBean的操作,能够对基本类型自动转换. JavaBean BeanUtils组件是用于简化javaBean的操作,那么什么是javaBean呢?简单来说,javaBean实质就是java类,只不过是遵循了某种规范的java类. javaBean的特点: 必须具有一个无参的构造方法 属性必须私有化 私有化的属性必须通过public类型的方法来暴露,也就是说要出

Vue.js中组件中的slot实例详解

Vue组件中的slot slot 可以实现在已经定义的组件中添加内容,组件会接收内容并输出,假如有一个组件person,它的里面包含的是个人信息,如下面这样 <template id="per"> <div> <p>姓名:...</p> <p>年龄:...</p> <p>职业:...</p> </div> </template> 在应用的时候,当然希望这里面可以是灵活

Android四大组件之Service(服务)实例详解

本文实例讲述了Android四大组件之服务用法.分享给大家供大家参考,具体如下: 很多情况下,一些与用户很少需要产生交互的应用程序,我们一般让它们在后台运行就行了,而且在它们运行期间我们仍然能运行其他的应用. 为了处理这种后台进程,Android引入了Service的概念.Service在Android中是一种长生命周期的组件,它不实现任何用户界面. 基本概念 Ÿ   Service是一种在后台运行,没有界面的组件,由其他组件调用开始. Ÿ   创建Service,定义类继承Service,An

vuejs中父子组件之间通信方法实例详解

本文实例讲述了vuejs中父子组件之间通信方法.分享给大家供大家参考,具体如下: 一.父组件向子组件传递消息 // Parent.vue <template> <div class="parent"> <v-child :msg="message"></v-child> </div> </template> <script> import VChild from './child.v

Java组件javabean用户登录实例详解

本文简单讲述使用javabean实现用户登录,包括用户登录,注册和退出等. 1.关于javabean JavaBean 是一种JAVA语言写成的可重用组件.为写成JavaBean,类必须是具体的和公共的,并且具有无参数的构造器.JavaBean 通过提供符合一致性设计模式的公共方法将内部域暴露成员属性,set和get方法获取.众所周知,属性名称符合这种模式,其他Java 类可以通过自省机制发现和操作这些JavaBean 的属性. 2.系统架构 2.1登录用例图 2.2页面流程图 2.3系统架构图

Vue父子组件之间的通信实例详解

在vue组件通信中其中最常见通信方式就是父子组件之中的通信,而父子组件的设定方式在不同情况下又各有不同.最常见的就是父组件为控制组件子组件为视图组件.父组件传递数据给子组件使用,遇到业务逻辑操作时子组件触发父组件的自定义事件.无论哪种组织方式父子组件的通信方式都是大同小异. 一.父组件到子组件通讯 父组件到子组件的通讯主要为:子组件接受使用父组件的数据,这里的数据包括属性和方法(String,Number,Boolean,Object, Array ,Function).vue提倡单项数据流,因