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}
}

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

用python自行开发的流星监控系统meteor_monitor(第二篇)

代码&#xff1a; GitHub - xingxinghuo1000/meteor_monitor_scripts 本篇为最新代码的方案介绍和使用介绍。第一篇已经过时了&#xff0c;不建议看 。只看这一篇即可。 背景 著名的流星监控软件ufocapturehd2有几个缺陷&#xff0c;不能忍 1、吃性能&#xff0c;我的工控电脑…

大模型下交互式数据挖掘的探索与发现

在这个数据驱动的时代&#xff0c;数据挖掘已成为解锁信息宝库的关键。过去&#xff0c;我们依赖传统的拖拉拽方式来建模&#xff0c;这种方式在早期的数据探索中起到了作用&#xff0c;但随着数据量的激增和需求的多样化&#xff0c;它的局限性逐渐显露。 >>>> 首…

App备案与iOS云管理式证书 ,公钥及证书SHA-1指纹的获取方法

​ 引言 在iOS应用程序开发过程中&#xff0c;进行App备案并获取公钥及证书SHA-1指纹是至关重要的步骤。本文将介绍如何通过appuploader工具获取iOS云管理式证书 Distribution Managed 公钥及证书SHA-1指纹&#xff0c;帮助开发者更好地理解和应用该过程。 正文 iOS应用程序…

【从删库到跑路 | MySQL总结篇】表的增删查改(进阶上)

个人主页&#xff1a;兜里有颗棉花糖 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 兜里有颗棉花糖 原创 收录于专栏【MySQL学习专栏】&#x1f388; 本专栏旨在分享学习MySQL的一点学习心得&#xff0c;欢迎大家在评论区讨论&#x1f48c; 目录 一、数据…

Node.js入门指南(五)

目录 MongoDB 介绍 下载与启动 命令行交互 Mongoose 代码模块化 图形化管理工具 hello&#xff0c;大家好&#xff01;上一篇文章我们介绍了express框架&#xff0c;这一篇文字主要介绍MongoDB。来对数据进行存储以及操作。 MongoDB 介绍 各位小伙伴应该多多少少都有接…

uniapp基础-教程之HBuilderX基础常识篇03

该内容为了大家更好的理解&#xff0c;将每个页面进行分离&#xff0c;单独创建项目&#xff0c;如在index中之写只写了一个搜索框&#xff0c;将其他页面分别放在HBuilderX目录中的components中&#xff0c;没有的可自行创建。 然后在components中创建轮播图新建一个swiper.v…

java elasticsearch 桶聚合(bucket)

Elasticsearch指标聚合&#xff0c;就是类似SQL的统计函数&#xff0c;指标聚合可以单独使用&#xff0c;也可以跟桶聚合一起使用&#xff0c;下面介绍Java Elasticsearch指标聚合的写法。 实例&#xff1a; // 首先创建RestClient&#xff0c;后续章节通过RestClient对象进行…

正则化与正则剪枝

写在前面&#xff1a;本博客仅作记录学习之用&#xff0c;部分图片来自网络&#xff0c;如需引用请注明出处&#xff0c;同时如有侵犯您的权益&#xff0c;请联系删除&#xff01; 文章目录 引言正则化为什么会过拟合拉格朗日与正则化梯度衰减与正则化 应用解决过拟合网络剪枝 …

Linux篇:文件管理

一、共识原理&#xff1a; 1. 文件内容属性&#xff0c;内容与属性都是数据&#xff0c;都要在磁盘中保存。 2. 文件分为打开的文件和没打开的文件。 3. 研究打开的文件&#xff1a;本质是研究进程和文件的关系&#xff0c;因为是进程负责打开文件。 4. 没打开的文件在存储介质…

爬虫爬取百度图片、搜狗图片

通过以下代码可以爬取两大图片网站&#xff08;百度和搜狗&#xff09;的图片&#xff0c;对于人工智能、深度学习中图片数据的搜集很有帮助&#xff01; 一、爬取百度图片 该代码可以爬取任意百度图片中自定义的图片&#xff1a; import requests import re import time imp…

红黑树(万字图文详解)

红黑树 1. 红黑树的概念2. 红黑树的性质3. 红黑树节点的定义4. 红黑树结构5. 红黑树的插入操作5.1 按照二叉搜索的树规则插入新节点5.2 检测新节点插入后&#xff0c;红黑树的性质是否造到破坏5.2.1 情况一: cur为红&#xff0c;p为红&#xff0c;g为黑&#xff0c;u存在且为红…

智能优化算法应用:基于蜻蜓算法无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于蜻蜓算法无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于蜻蜓算法无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.蜻蜓算法4.实验参数设定5.算法结果6.参考文献7.MATLAB…

人工智能时代下的开发与运维:变革与挑战

文章目录 引言对开发行业的积极影响对运维行业的积极影响可能存在的一些风险 结言 引言 随着人工智能的迅速发展&#xff0c;开发和运维这两个领域正经历着翻天覆地的变革。这场技术革命不仅加速了创新的步伐&#xff0c;还重新定义了我们对于软件开发和系统维护的认知。让我们…

【springboot】宝塔简单部署springboot 配置https

宝塔简单部署springboot配置https 需求步骤1. springboot通过maven组件打成jar包2. 将jar包部署到宝塔上3. 下载安装nginx并创建网站节点4. 设置域名或者IP5. 设置反向代理:代理后端服务的ip和端口7. 配置SSL/TLS 需求 宝塔部署springboot项目,用nginx反向代理后端IP端口&…

深度学习黎明时期的LeNet:揭开卷积神经网络的序幕

在深度学习的历史长河中&#xff0c;Yann LeCun 的 LeNet 是一个里程碑式的研究成果&#xff0c;它为后来的卷积神经网络&#xff08;Convolutional Neural Networks&#xff0c;CNN&#xff09;的发展奠定了基础。LeNet 的诞生标志着深度学习黎明时期的到来&#xff0c;为人工…

Arduino(NodeMcu)上传程序时出现“上传错误:exit status 2”

总结&#xff1a;个人分析的导致这种情况的根本原因 由于上传数据的端口被占用&#xff1a;例如外部使用串口调试助手查看串口输出的数据 源程序 void setup() {// put your setup code here, to run once: Serial.begin(9600); } void loop() {// put your main code here,…

【已解决】在windows下,gitlab修改了密码导致remote: HTTP Basic: Access denied

背景 网上好多答案遇到此问题都是修改凭证,故写此文。 在控制面板》用户账户》凭据管理器》管理windows凭据》普通凭据 --找到对应的git地址&#xff0c;编辑用户名和密码 本文解决方案适用于windows下没有凭证的情况&#xff0c;因修改密码导致下拉代码出错的情况。 Git是常…

Scrapy框架内置管道之图片视频和文件(一篇文章齐全)

1、Scrapy框架初识&#xff08;点击前往查阅&#xff09; 2、Scrapy框架持久化存储&#xff08;点击前往查阅&#xff09; 3、Scrapy框架内置管道 4、Scrapy框架中间件&#xff08;点击前往查阅&#xff09; Scrapy 是一个开源的、基于Python的爬虫框架&#xff0c;它提供了…

JAVA配置jdk17 Graa1VM

按照网上内容下载好对应的jdk17版本的Graa1VM&#xff0c; 解压后&#xff0c;修改环境变量中的JAVA_HOME为当前的目录&#xff0c;例如 D:\ruanjian\jdk\gra_jdk17\graalvm-ce-java17-22.3.0 。 然后在命令行中输入java -version的时候&#xff0c; 返回的并不是 Graa1VM 相关…

文件权限中 chmod、u+x、u、r、w、x分别代表什么

Linux系统中的每个文件和目录都有访问许可权限&#xff0c;如下面所示&#xff1a; 要说清楚问题&#xff0c;我们截取一些内容&#xff1a; ypyubuntu:~$ ls -l drwxr-xr-- 2 ypy ypy 4096 Nov 30 18:33 Desktop/ drwxr-xr-- 2 ypy ypy 4096 Nov 30 18:33 Documen…