TypeScript函数详解

news2025/1/21 0:53:51

 🎬 岸边的风:个人主页

 🔥 个人专栏 :《 VUE 》 《 javaScript 》

⛺️ 生活的理想,就是为了理想的生活 !

在这里插入图片描述

目录

函数声明

函数表达式

可选参数和默认参数

剩余参数(Rest Parameters)

this和箭头函数

重载


TypeScript提供了丰富的函数类型定义方式,可以对函数参数、返回值进行类型注解,从而提供了更为强大的类型检查。

函数声明

在TypeScript中,你可以在函数声明中对函数的参数和返回值进行类型注解。

function add(x: number, y: number): number {
    return x + y;
}

在这个例子中,我们定义了一个add函数,它接受两个参数xy,这两个参数都是number类型,函数的返回值也是number类型。

如果你尝试调用这个函数并传入一个非数字类型的参数,TypeScript编译器会报错:

add("Hello", 1); // Error: Argument of type '"Hello"' is not assignable to parameter of type 'number'.

函数表达式

在JavaScript中,函数不仅可以通过函数声明的方式定义,还可以通过函数表达式定义。在TypeScript中,函数表达式也可以使用类型注解:

let myAdd: (x: number, y: number) => number = function(x: number, y: number): number {
    return x + y;
};

在上面的例子中,我们首先定义了myAdd变量的类型为一个函数类型(x: number, y: number) => number,然后将一个匿名函数赋值给myAdd。这个匿名函数的参数xy的类型是number,返回值的类型也是number

可选参数和默认参数

TypeScript支持可选参数和默认参数。你可以使用?来标记可选参数,或者使用来指定参数的默认值:

function buildName(firstName: string, lastName?: string) {
    if (lastName)
        return firstName + " " + lastName;
    else
        return firstName;
}

let result1 = buildName("Bob");  // works correctly now
let result2 = buildName("Bob", "Adams");  // ah, just right

在上面的例子中,lastName是一个可选参数。你可以不传这个参数调用buildName函数。

function buildName(firstName: string, lastName = "Smith") {
    return firstName + " " + lastName;
}

let result1 = buildName("Bob");  // returns "Bob Smith"
let result2 = buildName("Bob", "Adams");  // returns "Bob Adams"

在上面的例子中,lastName有一个默认值"Smith"。如果你不传这个参数调用buildName函数,lastName的值将是"Smith"。

剩余参数(Rest Parameters)

当你不知道要操作的函数会有多少个参数时,TypeScript提供了剩余参数的概念。与JavaScript一样,你可以使用三个

...来定义剩余参数:

function buildName(firstName: string, ...restOfName: string[]) {
    return firstName + " " + restOfName.join(" ");
}

let employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie");

在上面的例子中,restOfName就是剩余参数,它可以接受任意数量的参数。

this和箭头函数

箭头函数可以保留函数创建时的 this值,而不是调用时的值。在TypeScript中,你可以使用箭头函数来确保this的值:

let deck = {
    suits: ["hearts", "spades", "clubs", "diamonds"],
    cards: Array(52),
    createCardPicker: function() {
        return () => {
            let pickedCard = Math.floor(Math.random() * 52);
            let pickedSuit = Math.floor(pickedCard / 13);
    
            return {suit: this.suits[pickedSuit], card: pickedCard % 13};
        }
    }
}

let cardPicker = deck.createCardPicker();
let pickedCard = cardPicker();

alert("card: " + pickedCard.card + " of " + pickedCard.suit);

在上面的例子中,createCardPicker函数返回一个箭头函数,这个箭头函数可以访问创建时的this值。

重载

在JavaScript中,根据传入不同的参数调用同一个函数,返回不同类型的值是常见的情况。TypeScript通过为同一个函数提供多个函数类型定义来实现这个功能:

function reverse(x: number): number;
function reverse(x: string): string;
function reverse(x: number | string): number | string {
    if (typeof x === 'number') {
        return Number(x.toString().split('').reverse().join(''));
    } else if (typeof x === 'string') {
        return x.split('').reverse().join('');
    }
}

reverse(12345);  // returns 54321
reverse('hello');  // returns 'olleh'

在上面的例子中,我们定义了两个重载:一个是接受number类型的参数,另一个是接受string类型的参数。然后我们在实现函数中处理了这两种情况。

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

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

相关文章

chato.cn: 定制专属AI聊天助理机器人工具网站

【 产品介绍】 • 名称 chato.cn • 具体描述 chato.cn的核心功能是让用户能够输入一些知识或信息,让机器人学习和理解,然后与之进行对话,查看其回答的质量和逻辑性。还提供了多种语言、主题、风格和规则的选项,让用户能够根据自己…

天地图WMTS地图瓦片下载

最近在开发个人项目中遇到了这样一个问题,即:本地开发使用天地图在线地图服务,部署到线上时,突然想到——天地图提供的开放地图服务是需要申请秘钥key才能够使用的,而且需要连接外网,同时也是有访问次数限制…

八、MySql表的复合查询

文章目录 一、基本查询回顾二、多表查询(一)笛卡尔积的初步过滤(二)例子1.显示部门号为10的部门名,员工名和工资2.显示各个员工的姓名,工资,及工资级别 三、自连接(一)定…

基于SSM的校园快递一站式服务系统设计与实现

末尾获取源码 开发语言:Java Java开发工具:JDK1.8 后端框架:SSM 前端:采用JSP技术开发 数据库:MySQL5.7和Navicat管理工具结合 服务器:Tomcat8.5 开发软件:IDEA / Eclipse 是否Maven项目&#x…

Consensus-AI论文搜索引擎 直接从论文中找答案

Consensus介绍 Consensus是一个人工智能AI论文搜索引擎,一个可以在科学论文中找到答案的搜索引擎,使用人工智能从数亿篇科学论文数据库中即时提取和聚合易于使用,搜索结果在几秒内即可完成,而且100%无广告。 截图 提示&#xf…

朋友圈大佬都去读研了,这份备考书单我码住了

作者简介: 辭七七,目前大二,正在学习C/C,Java,Python等 作者主页: 七七的个人主页 文章收录专栏: 七七的闲谈 欢迎大家点赞 👍 收藏 ⭐ 加关注哦!💖&#x1f…

Golang 单元测试合集整理,(我最常用 gomonkey)欢迎收藏

无论写什么样的语言,单元测试都是必不可少的,它可以极大的提高我们的代码质量,减少各种低级错误和 bug 无论你是一个靠谱合格的码农,还是一个优秀的程序员,单元测试都是咱们必须落实的一环 单元测试比较容易&#xf…

python:使用RESTful API(flask)调用python程序传递参数,实现Web端调用python程序

问题描述 现有一个用python写的程序(或者是一个或几个的函数接口),需要在Web前端调用python写的函数。如果直接用前端java来调用会很不方便,而且会出现各种麻烦的问题,下面给出如何在web前端调用python的接口。 解决…

STM32WB55开发(2)----修改蓝牙地址

STM32WB55开发----2.修改蓝牙地址 概述硬件准备视频教学样品申请完整代码下载选择芯片型号配置时钟源配置时钟树RTC时钟配置查看开启STM32_WPAN条件配置HSEM配置IPCC配置RTC启动RF开启蓝牙设置工程信息工程文件设置修改置BLE设备公共地址Ble_Hci_Gap_Gatt_Init结果演示 概述 在…

更多场景、更多选择,Milvus 新消息队列 NATS 了解一下

在 Milvus 的云原生架构中,消息队列(Log Broker)可谓任重道远,它不仅要具备流式数据持久性、支持 TT 同步、事件通知等能力,还要确保工作节点从系统崩溃中恢复时增量数据的完整性。 在 Milvus 的架构中,一切…

【计算机视觉 | 语义分割】干货:语义分割常见算法介绍合集(一)

文章目录 一、U-Net二、Fully Convolutional Network三、SegNet四、DeepLab五、DeepLabv3六、UNet七、PSPNet八、EfficientDet九、SegFormer十、ENet 一、U-Net U-Net 是一种语义分割架构。 它由收缩路径和扩张路径组成。 收缩路径遵循卷积网络的典型架构。 它由两个 3x3 卷积…

基于SSM的学生信息管理系统设计与实现

末尾获取源码 开发语言:Java Java开发工具:JDK1.8 后端框架:SSM 前端:采用JSP技术开发 数据库:MySQL5.7和Navicat管理工具结合 服务器:Tomcat8.5 开发软件:IDEA / Eclipse 是否Maven项目&#x…

Python 图形化界面基础篇:使用包装器( Pack )布局元素

Python 图形化界面基础篇:使用包装器( Pack )布局元素 引言什么是 Tkinter 的 Pack 布局?步骤1:导入 Tkinter 模块步骤2:创建 Tkinter 窗口步骤3:创建和使用 Pack 布局步骤4: Pack 布…

Android codec2 编码 -- 基于录屏

文章目录 前言android 原生的应用srcreenrecordMediaCodec获取编码数据流程 前言 本篇文章主要是理解Android 12编码的流程, 首先从上层的应用出发理解mediacodec提供给外部API的用法。然后针对每个api 分析编码各个流程中框架中的流程。 熟悉一个框架的流程 可以…

嵌入式这个领域会变得过于内卷吗?

今日话题,嵌入式这个领域会变得过于内卷吗?嵌入式开发主要服务于第二产业,尤其是制造业,包括电器、电气、机械、汽车、装备、航空航天等行业的“智能制造”部门,稳定性较强,不像互联网行业那样波动大。因此…

【LangChain系列 8】Prompt模版——少样本prompt模版(二)

原文地址:【LangChain系列 8】Prompt模版——少样本prompt模版(二) 本文速读: 固定少样本prompt模版 动态少样本prompt模版 在上篇文章中介绍了少样本模版的基本用法,本文将介绍 对话模型(chat model) 中 少样本prompt模版的用法。 LangCh…

C语言双向链表

文章目录 前言双向链表链表头结点的创建节点尾插与尾删节点头插与头删特定位置插入或删除节点链表节点查找双向链表的销毁 链表的打印 前言 假期时间因为为学校开学考试做准备所以一直没更新博客,今天开始博客会陆续更新。 双向链表 之前我们说过了顺序表和单链表…

加密狗软件有什么作用?

加密狗软件是一种用于加密和保护计算机软件和数据的安全设备。它通常是一个硬件设备,可以通过USB接口连接到计算机上。加密狗软件的作用主要体现在以下几个方面: 软件保护:加密狗软件可以对软件进行加密和授权,防止未经授权的用户…

K8S:kubectl陈述式、声明式资源管理及金丝雀部署

文章目录 一.陈述式资源管理方法1.陈述式资源管理概念2.基本信息查看(1)查看版本信息(2)查看资源对象简写(3)查看集群信息(4)配置kubectl自动补全(5)node节点…

【Java实战项目】【超详细过程】—大饼的图片服务器4

目录 1.引入servlet依赖2.处理客户端请求2.1 上传图片2.1.1.获取图片属性写入数据库(1)创建factory对象和fileUpload对象为获取图片信息做准备(2)将获取到的文件信息存到列表items中(3)获取列表items中第一…