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-error
  return true;
}
 
const f3 = function (): void {
  // @ts-expect-error
  return true;
};

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

 

 

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

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

相关文章

安卓JNI从0到1入门教程(二)

经过上一篇《安卓JNI从0到1入门教程&#xff08;一&#xff09;》介绍&#xff0c;我们对JNI有了初步认识&#xff0c;接下来我会从ndk-build方式和cmake方式分别来介绍怎么构建native库&#xff1a; 一、ndk-build ndk-build依赖配置文件Android.mk&#xff0c;存放代码的位…

AI PPT 一句话搞定PPT讲演搞

相信大家在职场中&#xff0c;一定会接触过写PPT&#xff0c;经常会把你搞得焦头烂额。在大部分的公司里&#xff0c;写PPT汇报又是不可能逃避的事情。但随着AI时代的到来&#xff0c;有很多AI帮你写PPT的工具也逐渐崭露头角&#xff0c;可以自动帮助你制作出华丽的PPT&#xf…

docker部署rabbitmq 后访问管理首页常见问题

1.项目启动后 管理首页无法访问 1&#xff09;检查15672端口是否可以访问 2&#xff09;docker exec -it your_container_name /bin/bash 进入docker容器执行如下命令&#xff1a; 3) rabbitmq-plugins enable rabbitmq_management 2.访问首页时提示不是私密连接&#xff1a;…

自动化测试 selenium 篇

✏️作者&#xff1a;银河罐头 &#x1f4cb;系列专栏&#xff1a;JavaEE &#x1f332;“种一棵树最好的时间是十年前&#xff0c;其次是现在” 目录 什么是自动化测试&#xff1f;Selenium 介绍Selenium 是什么Selenium 特点工作原理 seleniumJava环境搭建ChromeJava1.下载ch…

抖音seo源码--矩阵系统开发者日志

这是矩阵系统源码开发者的日志分享&#xff0c;我们致力于为开发者们提供优质的SEO源码。我们研究用户行为、数据分析和搜索引擎算法&#xff0c;以提高内容的搜索排名和曝光度。通过不断优化关键词、元数据和链接策略&#xff0c;我们帮助抖音用户更好地被发现和分享。这个日志…

flutter开发实战-指纹、面容ID验证插件实现

flutter开发实战-指纹、面容ID验证插件实现 在iOS开发中&#xff0c;经常出现需要指纹、面容ID验证的功能。 指纹、面容ID是一种基于用生物识别技术&#xff0c;通过扫描用户的面部特征来验证用户身份。 一、效果图 二、iOS指纹、面容ID验证 在iOS中实现指纹、面容ID验证功能…

如何用爬虫实现GPT功能

如何用爬虫实现GPT功能&#xff1f; GPT&#xff08;Generative Pre-trained Transformer&#xff09;和爬虫是两个完全不同的概念和技术。GPT是一种基于Transformer模型的自然语言处理模型&#xff0c;用于生成文本&#xff0c;而爬虫是一种用于从互联网上收集数据的技术。 …

【数据结构与算法】力扣:对称二叉树

对称二叉树 给你一个二叉树的根节点 root &#xff0c; 检查它是否轴对称。 示例 1&#xff1a; 输入&#xff1a;root [1,2,2,3,4,4,3] 输出&#xff1a;true 示例 2&#xff1a; 输入&#xff1a;root [1,2,2,null,3,null,3] 输出&#xff1a;false 来源&#xff1a;…

GlusterFs 分布式复制卷(Distributed-Replicate)性能测试

目录 fio工具参数解释 Glusterfs 和NFS 性能测试 顺序写&#xff1a; 随机写&#xff1a; 顺序读&#xff1a; 随机读&#xff1a; 随机读写&#xff1a; 参数说明&#xff1a; 测试结论&#xff1a; 与NFS对比 压测对比结果 NFS和GlusterFs的优缺点 NFS的优点 NFS…

看完这篇异地多活的改造,我决定和架构师battle一下

1. 简述 异地多活的概念以及为什么要做异地多活这里就不进行概述了。概念性的很多&#xff0c;像什么同城双活、两地三中心、三地五中心等等概念。如果有对这些容灾架构模式感兴趣的可以阅读下这篇文章进行了解&#xff1a;《浅谈业务级灾备的架构模式》。 阅读本篇文章之前&…

脚踏Java知识点

对上节Java的基础语法续讲 三元运算符和if语句格式的区别 语法格式&#xff1a; 三元运算符的语法格式是&#xff1a;(condition) ? expression1 : expression2&#xff1b; if语句的语法格式是&#xff1a; if (condition) { // 执行 expression1 } else { // 执行 express…

API全场景零码测试机器人——ATGen带来“超自动化”测试模式

HDC期间可参与新手入驻华为云Testplan抽奖活动&#xff0c;活动链接在文末 众所周知&#xff0c;软件服务及组件之间的交互主要依赖大量的API接口。以华为云300多个商用云服务为例&#xff0c;平均每个服务含500接口&#xff0c;接口总数高达10万&#xff0c;接口调用上下文业务…

多元回归预测 | Matlab基于鹈鹕算法(POA)优化径向基神经网络(POA-RBF)的数据回归预测,多变量输入模型

文章目录 效果一览文章概述部分源码参考资料效果一览 文章概述 多元回归预测 | Matlab基于鹈鹕算法(POA)优化径向基神经网络(POA-RBF)的数据回归预测,多变量输入模型 评价指标包括:MAE、RMSE和R2等,代码质量极高,方便学习和替换数据。要求2018版本及以上。 部分源码 %% 清…

IDE /skipping incompatible xxx_d.dll when searching for -lxxx_d

文章目录 概述场景复现用以测试的代码编译器位数不匹配导致?保持编译器类型一致再验证编译器位数的影响MingW下调用OS的库咋不告警?以mingW下使用winSocket为例MingW下网络编程的头文件分析该环境下链接的ws2_32库文件在哪里&#xff1f;mingW为啥可以兼容window下的动态库 概…

【Flutter】Audioplayers 4.1.0 简要使用说明

文章目录 一、前言二、安装和设置三、基本使用1.创建 AudioPlayer 实例2.设置音频源3.控制播放 四、示例代码五、总结 一、前言 Audioplayers 是一个非常实用的 Flutter 插件&#xff0c;它可以帮助我们在 Flutter 应用中播放音频。无论你是想在你的应用中添加背景音乐&#x…

Docker: 改变容器化世界的革命性技术

目录 1.1什么是虚拟化 1.2什么是Docker 1.3容器与虚拟机的比较 1.4Docker组建 2、Docker安装 2.2设置ustc的镜像 2.3Docker的启动与停止 3、docker常用命令 3.1镜像 3.2容器相关命令 1.1什么是虚拟化 在计算机中&#xff0c;虚拟化&#xff08;Vitualization&#x…

如何从一个仪表盘管理多个WordPress网站?

您是否正在寻找一种管理多个WordPress网站的简单方法&#xff1f; 监控多个网站并使其保持更新可能非常耗时。 幸运的是&#xff0c;有几种 WordPress 管理工具可以让您从单个仪表板管理多个 WordPress 网站变得非常容易。这将帮助您节省大量时间&#xff0c;同时使所有 Word…

赋能智能智造-RK3568智能主板助力机器人产业高速发展

机器人作为现代制造业的重要一环&#xff0c;正在以惊人的速度推动着生产效率和智能化水平的提升&#xff0c;它们在生产线上的准确操作和高效工作&#xff0c;为企业带来了巨大的竞争优势。关于工业机器人的编程和控制技术&#xff0c;在过去几年中已经有了很多发展和新的应用…

Coggle 30 Days of ML(23年7月)任务九:学会Bert基础,transformer库基础使用

Coggle 30 Days of ML&#xff08;23年7月&#xff09;任务九&#xff1a;学会Bert基础&#xff0c;transformer库基础使用 任务九&#xff1a;学会Bert基础&#xff0c;transformer库基础使用 说明&#xff1a;在这个任务中&#xff0c;你将学习Bert模型的基础知识&#xff…

【安全】Xsslabs(1~13)基于白盒测试浅析

目录 环境 关卡 level 1 level 2 level 3 level 4 level 5 level 6 level 7 level 8 扩展 level 9 level 10 level 11 level 12 level 13 总结 环境 PHP&#xff1a;php7.3.4nts 中间件&#xff1a;Nginx1.15.11 工具&#xff1a;Hackbar 关卡 level …