TS 函数及多态

news2024/12/28 18:39:08

 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.coloradmin.cn/o/1260771.html

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

相关文章

VsCode 调试 MySQL 源码

1. 启动 MySQL 2. 查看 MySQL 进程号 [root ~]# ps -ef | grep mysqld root 21479 1 0 Nov01 ? 00:00:00 /bin/sh /usr/local/mysql/bin/mysqld_safe --datadir/usr/local/mysql/data --pid-file/usr/local/mysql/data/mysqld.pid root 26622 21479 0 …

CSS新手入门笔记整理:CSS字体样式

字体类型&#xff1a;font-family 语法 font-family&#xff1a;字体1,字体2,...,字体n; font-family可以指定多种字体。使用多个字体时&#xff0c;将按从左到右的顺序排列&#xff0c;并且以英文逗号&#xff08;,&#xff09;隔开。如果我们不定义font-family&#xff0c…

Elasticsearch启动失败问题汇总

版本elasticsearch-8.11.1&#xff0c;解压安装完后&#xff0c;修改安装目录下conf/jvm.options&#xff0c; 默认配置如下&#xff1a; -Xms4g -Xmx4g 默认的配置占用内存太多了&#xff0c;调小一些&#xff1a; -Xms256m -Xmx256m由于es和jdk是一个强依赖的关系&#xff0…

代码随想录算法训练营第五十六天| 647. 回文子串 516.最长回文子序列

文档讲解&#xff1a;代码随想录 视频讲解&#xff1a;代码随想录B站账号 状态&#xff1a;看了视频题解和文章解析后做出来了 647. 回文子串 class Solution:def isPalindrome(self, string):left, right 0, len(string) - 1while left < right:if string[left] ! stri…

CV计算机视觉每日开源代码Paper with code速览-2023.11.22

点击CV计算机视觉&#xff0c;关注更多CV干货 论文已打包&#xff0c;点击进入—>下载界面 点击加入—>CV计算机视觉交流群 1.【语义分割】Mobile-Seed: Joint Semantic Segmentation and Boundary Detection for Mobile Robots 论文地址&#xff1a;https://arxiv.or…

智能AIGC写作系统ChatGPT系统源码+Midjourney绘画+支持GPT-4-Turbo模型+支持GPT-4图片对话

一、AI创作系统 SparkAi创作系统是基于ChatGPT进行开发的Ai智能问答系统和Midjourney绘画系统&#xff0c;支持OpenAI-GPT全模型国内AI全模型。本期针对源码系统整体测试下来非常完美&#xff0c;可以说SparkAi是目前国内一款的ChatGPT对接OpenAI软件系统。那么如何搭建部署AI…

Linux文件与路径

Linux文件与路径 1、文件结构 ​ Windows和Linux文件系统区别 ​ 在windows平台下&#xff0c;打开“此电脑”&#xff0c;我们可以看到盘符分区 ​ 每个驱动器都有自己的根目录结构&#xff0c;这样形成了多个树并列的情形 ​ 但是在 Linux 下&#xff0c;我们是看不到这些…

ECharts配置项手册了解及使用

1&#xff1a;点击文档然后选择配置项手册或者&#xff1a;Documentation - Apache ECharts 2&#xff1a;

某思路等考通一级MSOffice的分析

看到有朋友寻求2021版的等级考试一级软件&#xff0c;秉承授人以鱼不如授人以渔的理念&#xff0c;特写这个帖子。 某思路等考通一级MSOffice&#xff0c;版本6.5。 用到的软件&#xff0c;ScanId&#xff0c;de4dot,dnSpy。 第一步&#xff1a;分析 软件启动后有在线激活提示&…

1.6锁的升级过程

一、偏向锁 轻量级锁 当有新的线程进来时 其实就是竞争不激烈&#xff0c;但是确实存在多个锁竞争的情况&#xff0c;而且是&#xff0c;大家都很有序的进行&#xff0c;一释放&#xff0c;下一个线程就拿到锁&#xff0c;很有顺序的获取锁&#xff0c;基本上通过自旋的方式代…

leetcode:414. 第三大的数

一、题目 函数原型&#xff1a;int thirdMax(int* nums, int numsSize) 二、思路 将数组降序排序。 如果数组元素个数小于3&#xff0c;直接返回第一个元素&#xff1b; 如果数组元素个数大于等于3&#xff0c;且不同元素个数小于3&#xff0c;直接返回第一个元素&#xff1b; …

sqli-labs靶场详解less-24(二次注入)

less-24 对于一个像我一样的小白来说这关就像php代码审计 一开始进行判断注入点的时候怎么都找不到一点思路都没有 只能搜教程 说是二次注入 从来没遇见的题型 于是从代码审计开始 先说一下什么叫二次注入 二次注入 二次注入是指通过SQL语句存储到数据库的用户输入被读取后再次…

创建SpringBoot Helloword 程序详细步骤

本文档实现SpringBoot hello word 程序&#xff0c;翻译于Spring | Quickstart 目录 一、项目创建步骤1.1 创建项目1.2 添加代码1.3 运行 参考教程 一、项目创建步骤 1.1 创建项目 在官网Spring Initializr上创建项目 1.2 添加代码 在IDE中打开项目并在src/main/java/com/zo…

【数据结构】二叉树之链式结构

&#x1f525;博客主页&#xff1a; 小羊失眠啦. &#x1f3a5;系列专栏&#xff1a;《C语言》 《数据结构》 《Linux》《Cpolar》 ❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 文章目录 一、前置说明二、二叉树的遍历2.1 前序遍历2.2 中序遍历2.3 后序遍历2.4 层序遍历 三、…

mysql处理40w数据脚本执行慢问题

需求背景&#xff1a; 2张表 SS_ZYXX 1w数据&#xff0c;WD_GZPZ 50w数据 SS_ZYXX.id WD_GZPZ.zyxx_id 找到SS_ZYXX表有数据&#xff0c;关联表WD_GZPZ没有数据的SS_ZYXX表的id 处理方案 方案一&#xff1a; 联合查询&#xff1a; 下面sql&#xff0c;在mysql执行时间3…

netty(三) taskQueue自定义任务,http服务器快速入门,netty核心模块,Unpooled

如果执行某些业务比较复杂&#xff0c;比较耗时&#xff0c;可以使用异步来完成 当然可以有多个任务 上面的结果是&#xff0c;在第一个任务处理完&#xff0c;再等20秒执行&#xff0c;简单来说&#xff0c;就是第一个在10秒执行&#xff0c;第二个在第30秒的时候执行&#…

vue2使用ts vue-class-component

目前&#xff0c;对于Vue3来说&#xff0c;TypeScript的支持已经相当成熟&#xff0c;但公司的老项目一直处于迭代和维护无法从v2重构成v3&#xff0c;并且重构的成本也是很大的一个问题&#xff0c;所以记录一下vue2如何去搭配TypeScript。 目录 一、脚手架创建项目 二、vu…

二叉树的递归套路(2)

与其明天开始&#xff0c;不如现在行动&#xff01; 文章目录 最大二叉搜索树 &#x1f48e;总结 最大二叉搜索树 题目 给定一颗二叉树的头节点head&#xff0c;返回这颗二叉树中最大的二叉搜索子树的节点数量 搜索二叉树&#xff1a;整棵树上没有重复值&#xff0c;左树的值都…

解决ansible批量加入新IP涉及known_hosts报错的问题

我们把一批新的IP加入到ansible的hosts文件&#xff0c;比如/etc/ansible/hosts&#xff0c;往往会有这样的提示&#xff0c; 因为本机的~/.ssh/known_hosts文件中并有fingerprint key串&#xff0c;使用ssh连接目标主机时&#xff0c;一般会提示是否将key字符串加入到~/.ssh/…

【密码学引论】分组密码

第三章 分组密码 DES、IDEA、AES、SM4 1、分组密码定义&#xff08;按照五个组成部分答&#xff09; 密钥空间&#xff1a;属于对称加密算法kekd明密文空间&#xff1a;将明文划分为m比特的组&#xff0c;每一块依次进行加密加解密算法&#xff1a;由key决定一个明文到密文的…