TypeScript - 函数(下)

news2024/11/26 8:39:38

 

目录

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 是可以返回的,如下图所示:

 

 

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

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

相关文章

jenkins_svn_maven持续集成

详解Jenkins &#xff0c;svn &#xff0c;maven 项目持续集成 第一步&#xff1a; 由于刚刚接触jenkins 并不知道他是个什么东西&#xff0c;首先百度一下&#xff0c;然后进入官网&#xff0c;下载安装包。 第二步 windows 安装&#xff1a; 下载完了&#xff0c;打开里面…

Spring Boot 中的 SAGA 事务

Spring Boot 中的 SAGA 事务 在分布式系统中&#xff0c;保证数据一致性是非常重要的问题。传统的 ACID 事务模型虽然能够保证单个数据库的数据一致性&#xff0c;但是在分布式系统中却很难实现。因此&#xff0c;近年来出现了一些新的事务模型&#xff0c;其中 SAGA 就是一种…

上海清晖管理咨询有限公司创始人傅永康受邀为第十二届中国PMO大会演讲嘉宾

上海清晖管理咨询有限公司创始人傅永康先生受邀为由PMO评论主办的2023第十二届中国PMO大会演讲嘉宾&#xff0c;演讲议题&#xff1a;PMBOK第七版对PMO的影响。大会将于8月12-13日在北京举办&#xff0c;敬请关注&#xff01; 议题简要&#xff1a; 项目管理协会&#xff08;P…

软件设计模式与体系结构-设计模式-结构型软件设计模式-桥接模式

四、桥接模式 桥接模式&#xff08;Bridge Pattern&#xff09;是一种软件设计模式&#xff0c;它用于将抽象部分与其具体实现部分解耦&#xff0c;使它们可以独立地变化。桥接模式的核心思想是将一个系统分为多个维度&#xff0c;并通过桥接连接这些维度&#xff0c;从而实现…

合理组织安卓活动

本文所有代码均存放于https://github.com/MADMAX110/Starbuzz 开始构建一个应用时&#xff0c;你会考虑这个应用要包含什么&#xff0c;会有各种各样的很多想法&#xff0c;如何组织这些想法来建立一个直观、清晰的应用。 一、活动归类 要组织各种各样的活动&#xff0c;有一种…

IMX6ULL移植篇-uboot网络配置工作

一. uboot 网络IP配置 1. 硬件连接 在使用 uboot 的网络功能之前先用网线将开发板的 ENET2 接口和电脑或者路由器连接&#xff0c; I.MX6U-ALPHA 开发板有两个网口&#xff1a; ENET1 和 ENET2 &#xff0c;一定要连接 ENET2 &#xff0c;ENET2 接口如下&#xff1a…

LIS系统源码 基于互联网技术的医院实验室信息管理系统源码

LIS系统&#xff0c;即实验室信息管理系统&#xff0c;是一种基于互联网技术的医疗行业管理系统&#xff0c;它可以帮助实验室进行样本管理、检测流程管理、结果报告等一系列工作&#xff0c;提高实验室工作效率和质量。下面将从LIS系统的功能、特点方面对其进行详细介绍。 一、…

基于深度学习的高精度工人安全帽检测识别系统(PyTorch+Pyside6+YOLOv5模型)

摘要&#xff1a;基于深度学习的高精度工人安全帽检测识别系统可用于日常生活中或野外来检测与定位工人安全帽目标&#xff0c;利用深度学习算法可实现图片、视频、摄像头等方式的工人安全帽目标检测识别&#xff0c;另外支持结果可视化与图片或视频检测结果的导出。本系统采用…

docker-compose管理mongo

mongo-express 可以线上管理mongo 库&#xff0c;下面记录一下docker-compose 配置 mongo以及mongo-express version: "3.1"services:mongo:image: mongorestart: alwaysports:- 27017:27017environment:- MONGO_INITDB_ROOT_USERNAMEadmin- MONGO_INITDB_ROOT_PASSW…

【花雕】全国青少年机器人技术一级考试备考实操搭建手册5

目录 1、秋千 2、跷跷板 3、搅拌器 4、奇怪的钟 5、起重机 6、烤肉架 7、手摇风扇 8、履带车 9、直升机 10、后轮驱动车 起重机是指在一定范围内垂直提升和水平搬运重物的多动作起重机械。又称天车&#xff0c;航吊&#xff0c;吊车。 轮胎起重机的主要特点是&#xff1a;其行…

CTFHub XSS DOM跳转 WriteUp

前文&#xff1a;DOM反射XSS 进入网站&#xff0c;直接查看源代码&#xff0c;下面是关键代码&#xff0c;这里有xss漏洞&#xff1a; <script>var target location.search.split("")if (target[0].slice(1) "jumpto") {location.href target[1…

深度解读AIGC存储解决方案

5月26日&#xff0c;2023数据基础设施技术峰会在苏州举办&#xff0c;腾讯云首席存储技术专家温涛受邀出席并分享了腾讯云领先的存储技术在AIGC场景中的应用&#xff0c;通过对AIGC业务流程和场景的提炼&#xff0c;从内容生成、内容审核和内容智理三要素介绍了如何智能的存储和…

你可以对AI中台有所了解

一个AI中台覆盖从数据管理、数据标注、模型开发、部署上线到运营管理的AI能力研发与应用全生命周期建设和管理。作为企业AI能力的生产、应用和集中化管理平台&#xff0c;AI中台包括智能数据、模型开发、模型中心、预测服务、AI集市和平台管理等部分。 智能数据&#xff1a;提供…

基于JavaSpringBoot+Vue+uniapp微信小程序实现鲜花商城购物系统

博主介绍&#xff1a;✌全网粉丝30W,csdn特邀作者、博客专家、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专…

归并排序 与 逆序对数量

一、归并排序 题目&#xff1a; 给定你一个长度为 n 的整数数列&#xff0c;请你使用归并排序对这个数列按照从小到大进行排序&#xff0c;并将排好序的数列按顺序输出。 输入格式&#xff1a; 输入共两行&#xff0c;第一行包含整数 n。 第二行包含 n个整数&#xff08;所有整…

Kubernetes(k8s)入门:核心组件详解

文章目录 写在前面一、ReplicationController(RC)1、官方解释2、举个例子3、小总结 二、ReplicaSet(RS)1、官方解释2、举个例子 三、Deployment&#xff08;用的最多&#xff09;1、官方解释2、举个例子&#xff08;1&#xff09;创建nginx_deployment.yaml文件&#xff08;2&a…

MySQL学习基础篇(七)---单行函数

MySQL学习基础篇(七)—单行函数 1 什么是函数 函数在计算机语言的使用中贯穿始终&#xff0c;函数的作用是什么呢&#xff1f;它可以把我们经常使用的代码封装起来&#xff0c;需要的时候直接调用即可。这样既 提高了代码效率 &#xff0c;又 提高了可维护性 。在 SQL 中我们…

学习笔记整理-UML建模与应用复习4-构架建模

在一个更高的层次描述一个应用系统的结构&#xff0c;包括系统组件和组件之间的关系&#xff0c;组件的部署情况&#xff0c;以及硬件设备之间的关系。 1、组件图 用于描述功能所在的组件位置以及它们之间的关系。 包括&#xff1a;组件、接口、以及各种关系。可以显示…

IAR中Zstack协议栈相关问题解决办法

IAR中Zstack协议栈相关问题解决办法 1、Warning[w52]: More than one definition for the byte at address 0x4b in common segment INTVEC. 如果遇到类似 Warning[w52]: More than one definition for the byte at address 0x4b in common segment INTVEC. It is defined i…

uniapp打包之配置MacOS虚拟机生成iOS打包证书

前言 uniapp是一款跨端开发框架,可用于快速开发iOS、Android、H5等多端应用。本文将详细介绍如何实现uniapp开发的iOS应用打包。 详细步骤 一、下载苹果原版镜像文件 点击此处下载 二、安装VMware uniapp打包iOS应用需要生成相应证书和P2文件&#xff0c;这些都需要用到I…