TypeScript - 函数(下)

 

目录

1、在函数中声明this

2、其他需要知道的类型

2.1 void

2.2 object

2.3 unknow

2.4 never

2.5 Function

3、其余参数(rest)和参数

4、参数解构

5、函数的可分配性


1、在函数中声明this

TypeScript 将通过代码流分析推断函数中应该是什么,例如以下内容:this

const cat = {name: '拿破仑',age: 5,content: '',say: function (){this.content = 'hello world !!!'}
}

 TypeScript理解函数cat.say有一个对应的this,它是外部对象用户。这对很多情况来说已经足够了,但在很多情况下,您需要更多地控制它所代表的对象。JavaScript规范规定不能有一个名为this的参数,因此TypeScript使用该语法空间来在函数体中声明this的类型。

type User = {name: string,age: number
}function getDB () {let filterUsers = function(params: any) :string {return ''}return {filterUsers};
}
interface DB {filterUsers(filter: (this: User) => boolean): User[];
}const db = getDB();
const user = db.filterUsers(function (this: User) {return this.name;
});

 这种模式在回调风格的API中很常见,其中另一个对象通常控制何时调用函数。请注意,您需要使用函数而不是箭头函数来获得此行为:

const admins = db.filterUsers(()=>this.name);
// 类型“typeof globalThis”上不存在属性“name”。

2、其他需要知道的类型

在处理函数类型时,您需要识别一些经常出现的其他类型。与所有类型一样,您可以在任何地方使用它们,但这些类型在函数的上下文中尤其相关。 

2.1 void

void表示不返回值的函数的返回值。每当函数没有任何返回语句,或者没有从这些返回语句返回任何显式值时,它都是推断类型:

function cat() {let catArr = ['波斯猫', '橘猫', '拿破仑']for(let i = 0; i< catArr.length; i++){console.log(catArr[i]);}
}

 在JavaScript中,不返回任何值的函数将隐式返回未定义的值。然而,在TypeScript中,void和undefined不是一回事。

 注意:void与undefined不一样的。

2.2 object

特殊类型对象指的是任何不是基本类型的值(字符串、数字、bigint、布尔值、符号、null或未定义)。这不同于空对象类型{},也不同于全局类型Object。很可能您永远不会使用Object。

 注意:object 不是 Object,应经常使用 object!

2.3 unknow

未知类型表示任何值。这类似于任何类型,但更安全,因为做任何未知值的事情都是不合法的:

function cat(params: any) {params.say();
}function catCopy(params: unknown){params.say();     // “params”的类型为“未知”。
}

这在描述函数类型时很有用,因为您可以描述接受任何值而不在函数体中具有任何值的函数。

相反,您可以描述一个返回未知类型值的函数:

function cat(params: any): unknown {return params.xxx();
}const result = cat('hello world !!!')
// 随便编译没有报错,我们还是需要注意result返回的结果。

2.4 never

函数从不返回值:

function getError(msg: string) : never {throw new Error(msg)
}

never类型表示从未观察到的值。在返回类型中,这意味着函数抛出异常或终止程序的执行。

当TypeScript确定联合中没有剩余内容时,也不会出现。

function fn(msg: string | number | boolean) {if (typeof msg === 'string'){// TODO}else if(typeof msg === 'number'){// TODO}else if(typeof msg === 'boolean'){// TODO}else{console.log();  // 这里类型是never}
}

2.5 Function

全局类型Function描述了JavaScript中所有函数值上的绑定、调用、应用等属性。它还具有一个特殊的特性,即函数类型的值总是可以被调用;这些调用返回any:

function fn(f: Function) {return f();
}

这是一个非类型化的函数调用,通常最好避免,因为任何返回类型都不安全。

如果您需要接受任意函数,但不打算调用它,则类型()=>void 通常更安全

3、其余参数(rest)和参数

除了使用可选参数或重载来生成可以接受各种固定参数计数的函数外,我们还可以使用rest参数定义接受无限数量参数的函数。

rest参数出现在所有其他参数之后,并使用...语法:

function multiply(n: number, ...m: number[]) {return m.map((x) => n * x);
}
// 打印值 [10, 20, 30, 40]
const a = multiply(10, 1, 2, 3, 4);

在TypeScript中,这些参数上的类型注释隐式地是any[]而不是any,并且给定的任何类型注释的形式都必须是Array<T>或T[],或者元组类型。

相反,我们可以使用spread语法从可迭代对象(例如,数组)中提供可变数量的参数。例如,数组的push方法接受任意数量的参数:

 

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
arr1.push(...arr2);

 请注意,通常情况下,TypeScript并不认为数组是不可变的。这可能会导致一些令人惊讶的行为:

const args = [8, 5];
const angle = Math.atan2(...args);  // 扩张参数必须具有元组类型或传递给 rest 参数。

这种情况的最佳解决方案在一定程度上取决于您的代码,但通常const上下文是最直接的解决方案:

 

const args = [8, 5] as const;
const angle = Math.atan2(...args);

当针对较旧的运行时,使用rest参数可能需要启用downlevelIteration。

4、参数解构

您可以使用参数析构函数来方便地将作为参数提供的对象解包到函数体中的一个或多个局部变量中。在JavaScript中,它看起来是这样的:

 

function sum({ a, b, c }) {console.log(a + b + c);
}
sum({ a: 10, b: 3, c: 9 });

对象的类型注释遵循解构语法: 

function sum({ a, b, c }: { a: number; b: number; c: number }) {console.log(a + b + c);
}

这可能看起来有点冗长,但您也可以在此处使用命名类型: 

type ABC = { a: number; b: number; c: number };
function sum({ a, b, c }: ABC) {console.log(a + b + c);
}

写一个类似示例,如下图所示: 

type cat = {name: string,age: number
}
function fn(params: cat) {let {name, age} = params;console.log(name, age);
}fn({name: '波斯猫', age: 11})

5、函数的可分配性

返回类型void

函数的void返回类型可能会产生一些不寻常但预期的行为。

返回类型为void的上下文类型不会强制函数不返回某些内容。另一种说法是,具有void返回类型(类型voidFunc=()=>void)的上下文函数类型在实现时可以返回任何其他值,但会被忽略。

因此,以下类型()=>void的实现是有效的:

type voidFunc = () => void;const f1: voidFunc = () => {return true;
};const f2: voidFunc = () => true;const f3: voidFunc = function () {return true;
};

当其中一个函数的返回值被分配给另一个变量时,它将保留void类型:

const v1 = f1();const v2 = f2();const v3 = f3();

即使Array.prototype.push返回一个数字,而Array.prototype.forEach方法需要一个返回类型为void的函数,但存在这种行为是为了使以下代码有效。

const src = [1, 2, 3];
const dst = [0];src.forEach((el) => dst.push(el));

还有一种特殊情况需要注意,当文字函数定义具有void返回类型时,该函数不得返回任何内容。

function f2(): void {// @ts-expect-errorreturn true;
}const f3 = function (): void {// @ts-expect-errorreturn true;
};

注意: 在ts5.2 是可以返回的,如下图所示:

 

 

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

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

相关文章

良心推荐!5款支持Linux系统的国产软件,兼容国产操作系统

虽然市面上大多数用户使用的是Windows操作系统&#xff0c;但也有不少使用Linux系统的用户&#xff0c;特别是国产操作系统的崛起&#xff0c;让Linux系统阵营的用户越来越多。Linux不像Windows那样&#xff0c;有着完整的生态环境丰富的软件应用&#xff0c;但也逐渐在完善中&…

【HCIA】12.网络服务与应用

文件传输协议FTP FTP基于TCP&#xff0c;传输较慢&#xff0c;但是比较可靠。典型的C/S架构。双通道协议。TFTP基于UDP&#xff0c;传输较快&#xff0c;但是不可靠。FTP有两种不同的传输模式 ASCII模式 传输文本文件时会对文本内容进行编码方式转换&#xff0c;提高传输效率&…

百科创建必看攻略!人物百度百科怎么创建?5分钟教会你创建人物百度百科词条

百度人物百科是一个广受欢迎的在线百科平台&#xff0c;它为用户提供了一个便捷的方式来了解各种各样的人物信息。如果你有一个人物的详细资料&#xff0c;你可以通过创建一个百度人物百科页面来分享这些信息。 下面是分媒互动分享的创建百度人物百科页面的步骤以及需要注意的几…

JavaWeb——基于Spring Boot的图书数字化管理系统的设计与实现

课程设计总结 1 概述 1.1 项目开发背景 随着信息技术的快速发展&#xff0c;数字化管理已经成为各行各业提高效率和管理水平的重要手段。在图书管理领域&#xff0c;数字化管理系统可以有效地提高管理效率&#xff0c;提供更好的用户体验。本项目旨在开发一个基于Spring…

Zotero翻译插件“zotero pdf translate”——使用时出现广告的问题的解决办法

一、背景&#xff1a; 在Zotero上安装了“zotero-pdf-translate”插件来辅助翻译。今天忽然发现&#xff0c;在使用CNKI翻译引擎的时候&#xff0c;末尾被加上了广告&#xff1a; (查看名企职位领高薪offer&#xff01;--->智联招聘https***dict.cnki.net/ad.html) 如下&…

后端Long类型传到前端精度丢失的问题

问题出现&#xff1a;后端的Java Bean的id属性是用的Long类型对应数据库主键使用bigint类型&#xff0c;当使用JSON方式传递该数据给前端时&#xff0c;前端接收到的数据末尾会变成0。&#xff08;发生的精度丢失问题&#xff09; 问题原因&#xff1a;Java中的long能表示的范围…

修改conda默认的环境安装位置

修改conda默认的环境安装位置

git如何撤销commit(未push)

文章目录 前言undo commitreset current branch to here Undo Commit&#xff0c;Revert Commit&#xff0c;Drop Commit的区别 是否删除对代码的修改是否删除Commit记录是否会新增Commit记录Undo Commit不会未Push会&#xff0c;已Push不会不会Revert Commit会不会会Drop Com…

架构训练营:3-3设计备选方案与架构细化

3架构中期 什么是备选架构&#xff1f; 备选架构定义了系统可行的架构模式和技术选型 备选方案筛选过程 头脑风暴 &#xff1a;对可选技术进行排列组合&#xff0c;得到可能的方案 红线筛选&#xff1a;根据系统明确的约束和限定&#xff0c;一票否决某些方案&#xff08;主要…

11_SPI_Flash 读数据实验

11_SPI_Flash 读数据实验 1. 实验目标2. 操作时序2.1 数据读操作指令2.2 数据读操作时序 3. 流程框图3.1 顶层模块3.2 数据读模块 4. 波形图绘制5. RTL5.1 flash_read_ctrl5.2 spi_flash_read 6. testbench 1. 实验目标 使用页写或连续写操作向 Flash 芯片写入数据&#xff0c…

[LeetCode周赛复盘] 第 354 场周赛20230716

[LeetCode周赛复盘] 第 354 场周赛20230716 一、本周周赛总结6889. 特殊元素平方和1. 题目描述2. 思路分析3. 代码实现 6929. 数组的最大美丽值1. 题目描述2. 思路分析3. 代码实现 6927. 合法分割的最小下标1. 题目描述2. 思路分析3. 代码实现 6924. 最长合法子字符串的长度1.…

什么是统一建模语言(UML)UML与UML类图的基本概念

什么是统一建模语言UML&#xff08;Unified Modeling Language&#xff09; UML&#xff08;统一建模语言&#xff09;是一种通用的建模语言&#xff0c;用于描述软件系统的结构、行为和交互。它提供了一组符号和规则&#xff0c;用于创建可视化的图形模型&#xff0c;帮助开发…