TS 函数及多态

 TS 能推导出函数体中的类型,但多数情况下无法推导出参数的类型,只有少数特殊情况下能根据上下文推导参数的类型。返回类型能推导出,不过也可以显式注解。

1 声明和调用函数

一般来说,在方法中的this值为调用该方法时位于点号左侧的对象:

let x = {
    fun() {
        console.log(this);
    }
}
x.fun(); // { fun: [Function: fun] }
let fun = x.fun;
fun(); // undefined

如果在函数中有使用到this,则上面的方法定义是可能会带来风险的(this不能保证为想要的类型)。

我们可以在函数的第一个参数中,声明this的类型,来规避上面的风险。

let x = {
    fun(this: Date) {
        console.log(this.getDate());
    }
}
let date = new Date();
x.fun.bind(date)(); // 27
//x.fun(); // The this context of type { fun(this: Date): void; } is not assignable to method's this of type Date

1.1 函数类型重载

重载函数,即有多个调用签名的函数。

type Reserve = {
    (from: Date, to: Date, destination: String):String,
    (from: Date, destination: String):String
}
let reserve: Reserve = (from: Date, to: Date | String,destination?: String) => {
    return "destination:" + destination;
}
reserve(new Date(), new Date(),"hello");
reserve(new Date(),"ts");

注意,我们在调用函数时,参数类型不是参照这个函数定义时的类型,而是这个函数的签名,例如上面,如果参照函数定义,则函数调用可以为:

图 函数调用失败

如上图所示,上面的调用方式将会报错。

1.1.1 DOM 中的重载

浏览器DOM API有大量重载,例如createElement方法。参数为表示HTML标签的字符串,返回值为对应类型的HTML元素,其函数定义为:

type CreateElement = {
    (tag: 'a'): HTMLAnchorElement,
    (tag: 'canvas'): HTMLCanvasElement,
    (tag: 'table'): HTMLTableElement,
    (tag: string): HTMLElement
}

2 多态

在类型层面施加约束的占位类型,也称多态类型参数。

type Filter = {
    <T>(array: T[], f: (item: T) => boolean): T[]
}
let filter: Filter = (array, f) => {
    let arr = []
    for (let item of array) {
        if (f(item)) arr.push(item);
    }
    return arr;
}
filter([2,5,7,6],(_) => _ > 5); // [7,6]

<T>在调用签名中声明(位于签名的开始圆括号前面),TS将在调用该类型的函数时为T绑定具体类型。

而如果把T的作用域限定在类型别名中,TS则要求在使用类型别名时显式绑定类型:

type Filter<T> = {
    (array: T[], f: (item: T) => boolean): T[]
}
let filter: Filter<number> = (array, f) => {
    let arr = []
    for (let item of array) {
        if (f(item)) arr.push(item);
    }
    return arr;
}
filter([2,5,7,6],(_) => _ > 5); // [7,6]

2.1 受限的多态

TS 多态可以像Java一样使用extends来约束多态(但不能使用super)。

type TreeNode = {
    value: string
}
type LeafNode = TreeNode & {
    isLeaf: true
}
type InnerNode = TreeNode & {
    children: [TreeNode] | [TreeNode,TreeNode]
}
function mapNode<T extends TreeNode>(node: T,f: (value: string) => string) : T {
    return {
        ...node,
        value: f(node.value)
    }
}

2.2 泛型默认类型

泛型参数可以指定默认类型。

type AString = {
    value: "a"
}
type BNum = {
    num: 1
}
type MyString<T extends AString = AString & BNum> = {
    value: T
}
let myString: MyString = {
    value: { value: "a", num: 1}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/193990.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Vue框架学习笔记——条件渲染:v-show和v-if

文章目录 前文提要条件渲染v-showv-ifv-else-if和v-else特殊写法&#xff0c;很多个一致的v-if如何消除 总结 前文提要 本人仅做个人学习记录&#xff0c;如有错误&#xff0c;请多包涵 主要学习链接&#xff1a;尚硅谷Vue2.0Vue3.0全套教程丨vuejs从入门到精通 条件渲染 条…

Vatee万腾的数字探险之旅:vatee科技创新的新纪元

在数字时代的潮流中&#xff0c;Vatee万腾以其独特的数字探险之旅引领着科技创新的新纪元。这不仅是一次技术的进步&#xff0c;更是一场数字领域的探险&#xff0c;让我们一同探索Vatee在科技创新中的前沿地带。 Vatee万腾的数字探险起源于对未知的渴望和对创新的不懈追求。在…

使用Terraform创建Docker镜像和容器

为了实现自动化操作&#xff0c;Terraform需要明确指定所使用的提供者。因此&#xff0c;在主要的main.tf文件中&#xff0c;需要提供提供者的名称、源和版本信息。对于Docker&#xff0c;可以在main.tf中使用以下代码块。 1 Terraform配置模块 使用块和资源创建Terraform脚本…

JMeter之压力测试——混合场景并发

在实际的压力测试场景中&#xff0c;有时会遇到多个场景混合并发的情况&#xff0c;这时就需要设置不同的并发比例对不同场景请求数量的控制&#xff0c;下面提供两种方案。 一、多线程组方案 1.业务场景设计如下&#xff1a;场景A、场景B、场景C&#xff0c;三个场景按照并发…

MySQL 前瞻

数据库 是一类软件&#xff0c;这一类软件可以用来“管理数据”&#xff08;对数据进行保存&#xff0c;增删改查 [与数据结构的有什么区别呢&#xff1f;]&#xff09; 数据结构是实现增删改查的具体方式 数据库则是管理数据的软件&#xff0c;实现数据库软件内部就用到了很…

java多线程-扩展知识一:进程线程、并发并行、同步异步

1、进程 进程&#xff08;Process&#xff09;是计算机中的程序关于某数据集合上的一次运行活动&#xff0c;是系统进行资源分配的基本单位&#xff0c;是操作系统结构的基础。在早期面向进程设计的计算机结构中&#xff0c;进程是程序的基本执行实体&#xff1b;在当代面向线程…

【RLChina2023】CCF 苏州 记录

目录 RLChina介绍主旨报告专题报告智能体学习理论(专题一)智能体决策与规划(专题二)智能体框架、体系结构与训练系统(专题六)基于大语言模型的具身智能体与机器人研究 (专题八)教学报告——强化学习入门特别论坛——智能体和多智能体艺术的探索会议照片RLChina介绍 RLC…

微服务--02--Nacos注册中心

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 服务注册和发现手动发送Http请求的方式存在问题注册中心原理 Nacos注册中心配置服务注册服务发现小结&#xff1a; 服务注册和发现 手动发送Http请求的方式存在问题…

京东平台双11全品类完整销售数据回顾(京东大数据-京东数据采集-京东数据接口)

今年的双十一&#xff0c;大家依然没有等到各大平台的官方战报。 所以&#xff0c;对于绝大部分品牌、商家、咨询公司乃至有数据研究需求的小伙伴来说&#xff0c;很难了解到今年大促消费者的真实消费水平。 为此&#xff0c;鲸参谋简单整理出了10个京东大类目&#xff08;含5…

内测分发平台是否支持应用的微服务化部署

内测分发平台的微服务化部署支持是现代应用开发和部署的一个重要特性。首先我们得知道什么是微服务化部署都有哪些关键功能&#xff0c;如何实施微服务化的部署。下文以我自己理解总结了几点。 图片来源:news.gulufenfa.com 微服务是一种基于独立运行的小型服务来构建应用程序…

Java LinkedHashMap

LinkedHashMap 继承于 HashMap。在 HashMap 基础上, 维护了一条双向链表, 用来记录存入 Map 中的数据的顺序, 即存储到 Map 中的 key-value 是有序的。 解决了 HashMap 无法顺序访问的和保持插入顺序的问题。 1 LinkedHashMap 的结构定义 LinkedHashMap 是基于 HashMap 的实现…

Linux虚拟化的模式

三种虚拟化方式&#xff1a;完全虚拟化&#xff08;Full virtualization&#xff09;、硬件辅助虚拟化&#xff08;Hardware-Assisted Virtualization&#xff09;、半虚拟化&#xff08;Paravirtualization&#xff09;。 服务器上的虚拟化软件&#xff0c;多使用 qemu&#…

SpringCloudAlibaba之sentinel 流量卫兵(流控,熔断降级) ——详细讲解

目录 一、什么是sentinel 二、sentinel使用 1. sentinel dashboard的安装 2.启动 3.访问web界面 ​编辑 4.登录 三、sentinel 实时监控服务 1.创建项目引入依赖 2.配置 3.启动服务 4.访问dashboard界面查看服务监控 5.开发服务 6.启动进行调用 7.查看监控界面 四、senti…

基于helm的方式在k8s集群中部署gitlab - 部署(一)

文章目录 1. 背景说明2. 你可以学到什么&#xff1f;3. 前置条件4. 安装docker服务&#xff08;所有节点&#xff09;5. 部署k8s集群5.1 系统配置&#xff08;所有节点&#xff09;5.2 安装kubelet组件(所有节点)5.2.1 编写kubelet源5.2.2 安装kubelet5.2.3 启动kubelet 5.3 集…

百度智能小程序系统源码+关键词排名优化 附带完整的搭建教程

百度智能小程序系统的开发背景是基于百度强大的技术实力和对用户需求的深入理解。在移动互联网时代&#xff0c;用户对便捷、高效、智能的服务需求越来越高。而小程序作为一种轻量级的应用程序&#xff0c;恰好能够满足用户的这些需求。然而&#xff0c;开发一个小程序需要掌握…

011 OpenCV warpAffine

目录 一、环境 二、warpAffine原理 三、完整代码 一、环境 本文使用环境为&#xff1a; Windows10Python 3.9.17opencv-python 4.8.0.74 二、warpAffine原理 warpAffine是OpenCV库中的一个函数&#xff0c;它用于执行二维仿射变换。这个函数接受一个输入图像和变换矩阵&…

波奇学C++:C++11的新特性

列表初始化 #include<iostream> using namespace std; struct A {int _x;int _y; }; int main() {// 三种方式等价&#xff0c;并且可以省略int x 1;int y { 2 };int z{ 3 };return 0; } {}按声明顺序初始化类成员变量 A p{ 1,2 }; cout << p._x; //1 cout &…

零基础可以学编程吗,不懂英语怎么学编程,中文编程工具实例

零基础可以学编程吗&#xff0c;不懂英语怎么学编程&#xff0c;中文编程工具实例 上图是中文编程工具界面、标尺实例。 给大家分享一款中文编程工具&#xff0c;零基础轻松学编程&#xff0c;不需英语基础&#xff0c;编程工具可下载。 这款工具不但可以连接部分硬件&#x…

数据结构——堆的实现(详解)

呀哈喽&#xff0c;我是结衣。 堆的介绍 如果有一个关键码的集合K {k0,k1,k2,…,kn-1},把它的所有元素按照完全二叉树的顺序储存方式储存在一个一维数组中&#xff0c;并满足&#xff1a;Ki<K2i1且ki<K2i2(Ki>K2i1且Ki>-K2i2)i 1,2,3…,则称为小堆&#xff08;或…

软著项目推荐 深度学习中文汉字识别

文章目录 0 前言1 数据集合2 网络构建3 模型训练4 模型性能评估5 文字预测6 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 深度学习中文汉字识别 该项目较为新颖&#xff0c;适合作为竞赛课题方向&#xff0c;学长非常推荐&#xf…