TypeScript -- 函数

文章目录

    • TypeScript -- 函数
    • JS -- 函数的两种表现形式
      • 函数声明
      • 函数的表达式
      • es6 箭头函数
    • TS -- 定义一个函数
      • TS -- 函数声明
      • 使用接口(定义)
      • ts 定义参数可选参数写法 -- '?'的使用
      • TS函数 -- 设置剩余参数
      • 函数重载

TypeScript – 函数

JS – 函数的两种表现形式

我们熟知js有两种函数表现形式’函数声明’和’函数表达式’

函数声明

// 函数声明(Function Declaration)
function sum(x, y) {return x + y;
}

函数的表达式

// 函数表达式(Function Expression)
let mySum = function (x, y) {return x + y;
};

es6 箭头函数

const esExample = (name)=>{console.log(name)
}

TS – 定义一个函数

将上面的三种写法依次推导成'ts'的写法

TS – 函数声明

1.TS以函数的声明的形式,需要定义函数参数中的类型,以及返回类型。'function 函数名(参数:类型):函数返回的类型{}'
2.如果函数没有返回类型就是 void
// 返回number类型的值
function add(arg1:number, arg2:number): number{return arg1 + arg2
}// 没有返回值
function sub(arg1: number): void{console.log(arg1)
}

TS – 函数函数的表达式/ 箭头函数(定义)

下面两种写法最后编译成'js'的结果不同,但是却在'TS' 表现形式略有区别第一个案例只对等号右侧的匿名函数进行了类型定义,在把这个重新被
定义的类型函数赋值给了'add'。第二个案例就比较遵循'ts' 规则,先定义了一个函数类型,这个类型参
数指定的类型,以及函数返回的类型,然后使用的时候在按照定义规范去用
  • 第一种写法
const add = (arg1:number,arg2:number) => arg1 + arg2
add(1,2) // 3
  • 第二种写法
// 声明一个函数类型包括参数类型和返回类型, ts 箭头函数左面是函数参数,右面是函数返回类型
let add:(x:number,y:number) => number// 使用的时候具体函数使用
add = (arg1:number,arg2:number) =>{ return arg1+arg2}
add(1,2) // 3

使用接口(定义)

interface Add {(x:number,y:number):number
}// 按照接口格式 规范实现我们的myAdd方法
let myAdd: Add
myAdd = (x:number,y:number)=>{return x+y
}
// 使用
console.log(myAdd(1,2)) //3

ts 定义参数可选参数写法 – '?'的使用

1.JavaScript里,每个参数都是可选的,可传可不传。但'TS'不同每个函数参数
都是必须的,可以理解定义则必须使用2.但是有时候不想将每一个定义的参数都传值使用,这时候就可以用'?' 的形式来将参数变成可选的和接口中使用的方式相似3.需要注意的是,可选参数必须接在必需参数最后面。
let AddFun: (x:number,y:number,z?:any) => numberlet add:AddFun
add = (x:number,y:number)=>{return x+y
}// 增加了一个z参数
add = (x:number,y:number,z:number)=>{return x+y+z
}
  • 官方给的案例
function buildName(firstName: string, lastName?: string) {if (lastName)return firstName + " " + lastName;elsereturn firstName;
}let result1 = buildName("Bob");  // works correctly now
let result2 = buildName("Bob", "Adams", "Sr.");  // error, too many parameters
let result3 = buildName("Bob", "Adams");  // ah, just right

TS函数 – 设置函数参数默认值

1.和es6 一样直接在参数中给要增加的参数赋值默认参数即可
2.当有默认参数的时候,默认参数会自动变成一个可选参数,不填就用默认参数,填就用填写参数,但是'?'形式的可选参数依然必须在末尾
function buildName(firstName: string, lastName: string = 'Cat') {return firstName + ' ' + lastName;
}
let tomcat = buildName('Tom', 'Cat');
let tom = buildName('Tom');
  • 案例二
function buildName(firstName = "Will", lastName: string) {return firstName + " " + lastName;
}let result1 = buildName("Bob");                  // 错误,少了个参数
let result2 = buildName("Bob", "Adams", "Sr.");  // 错误,多了个参数
let result3 = buildName("Bob", "Adams");         //  Bob Adams
let result4 = buildName(undefined, "Adams");     // Will Adams

TS函数 – 设置剩余参数

1. 使用的场景:同时操作多个参数,或者在不确定有多少个参数的时候
2. 对es6中的'...' 简单讲解:var a = [1,2,3]var b = [...a]console.log(b) //  [1, 2, 3] // 对象解构var aObj = {'a':1}var bObj2 = {...aObj,"b":2}console.log(bObj2 ) // {a: 1, b: 2}
4.'ts' 中也是'...'但需要定义数组类型参数' ...args: number[]'
5. 需要注意的是,剩余参数必须接在必需参数最后面。
const handleData = (arg1: number, ...args: number[]) => {console.log(arg1, arg2)
}

函数重载

1.有时候函数会因为传递的参数不同,导致函数参数返回的时候类型值不同一种解决办法就是利用'联合类型'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('');}}但是有个缺点,就是不能够精确的表达输入为数字的时候,输出也应该为数字输入为字符串的时候,输出也应该为字符串另一种解决办法就是利用'重载'
2.官方文档的标准解释:重载允许一个函数接受不同数量或类型的参数时,作出不同的处理。
  • 用重载定义多个 reverse 的函数类型
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('');}
}

注意,TypeScript 会优先从最前面的函数定义开始匹配,所以多个函数定义如果有包含关系,需要优先把精确的定义写在前面。

在这里插入图片描述

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

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

相关文章

history命令:显示命令执行时间

1.修改配置文件 vim /etc/profile 添加内容 export HISTTIMEFORMAT"%Y-%m-%d %H:%M:%S " ​ #注意:在末尾的“引号”与“S”之间,加入一位空格,将日期时间和历史命令用空格相隔开来。 你也可以换一种清晰的形式,效果…

实验三 贪心算法

实验三 贪心算法 迪杰斯特拉的贪心算法实现 优先队列等 1.实验目的 1、掌握贪心算法的基本要素 :最优子结构性质和贪心选择性质 2、应用优先队列求单源顶点的最短路径Dijkstra算法,掌握贪心算法。 2.实验环境 Java 3.问题描述 给定带权有向图G (V…

背包问题求具体方案数问题--板子题

12. 背包问题求具体方案 - AcWing题库 思路:先将v[i]和w[i]先输入进去,然后我们进行倒叙dp,这个做的目的就是为了后边我们为了匹配确定路径做好准备,如果我们倒叙输入进去,我们再正序的时候就可以用推导式来进行路径输…

DevOps(四)

CD(二) 1. CDStep 1 - 上传代码Step 2 - 下载代码Step 3 - 检查代码Step 4 - 编译代码Step 5 - 上传仓库Step 6 - 下载软件Step 7 - 制作镜像Step 8 - 上传镜像Step 9 - 部署服务2. 整体预览2.1 预览1. 修改代码2. 查看sonarqube检查结果3. 查看nexus仓库4. 查看harbor仓库5.…

PTA 1052 Linked List Sorting

个人学习记录,代码难免不尽人意。 A linked list consists of a series of structures, which are not necessarily adjacent in memory. We assume that each structure contains an integer key and a Next pointer to the next structure. Now given a linked li…

PHP关于字符串的各类处理方法

判断字符串是否以指定子串开头或结尾 function startsWith($str, $prefix) {return stripos($str, $prefix) 0; }function endsWith($str, $suffix) {return substr_compare($str, $suffix, -strlen($suffix)) 0; }// 示例用法 $text "hello world"; $result st…

Hadoop简介以及集群搭建详细过程

Hadoop简介以及集群搭建详细过程 hadoop集群简介hadoop部署模式Hadoop集群安装1.集群角色规划2.服务器基础环境准备3.上传安装包hadoop安装包目录结构5.编辑hadoop配置文件6.分发安装包7.配置hadoop环境变量8.NameNode format(格式化操作) hadoop集群启动关闭-手动逐个进程启停…

【低代码专题方案】使用iPaaS平台下发数据,快捷集成MDM类型系统

01 场景背景 伴随着企业信息化建设日趋完善化、体系化,使用的应用系统越来越多,业务发展中沉淀了大量数据。主数据作为数据治理中枢,保存大量标准数据库,如何把庞大的数据下发到各个业务系统成了很棘手的问题。 传统的数据下发方…

Linux 命令 ps aux 命令解析

一、简介 PS 是 Linux 系统命令之一,在 Linux 中是查看进程的命令。查看正处于 Running 的进程。 linux 上进程有 5 种状态: 运行:正在运行或在运行队列中等待 中断:休眠中,受阻,在等待某个条件的形成或接收到信号 不…

android app控制ros机器人一

android开发app,进而通过控制ros机器人,记录开发过程 查阅资料: rosjava使用较多,已经开发好的app也有开源的案例 rosjava GitHub https://github.com/ros-autom/RobotCA https://github.com/ROS-Mobile/ROS-Mobile-Android…

Pandas时序数据分析实践—概述

时序数据,作为一种时间上有序的数据形式,无疑是我们日常生活中最常见的数据类型之一。它记录了事件、现象或者过程随时间的变化,是对于许多实际场景的忠实反映。而在众多时序数据的应用领域中,跑步训练记录莫过于是一项令人着迷的…

亲测解决Git inflate: data stream error (incorrect data check)

Git inflate: data stream error (incorrect data check) error: unable to unpack… 前提是你的repository在github等服务器或者其他路径有过历史备份/副本,不要求是最新版本的,只要有就可能恢复你做的所有工作。 执行git fsck --full检查损坏的文件 在…

《TCP IP网络编程》第十一章

第 11 章 进程间通信 11.1 进程间通信的基本概念 通过管道实现进程间通信: 进程间通信,意味着两个不同的进程中可以交换数据。下图是基于管道(PIPE)的进程间通信的模型: 可以看出,为了完成进程间通信&…

代码随想录 DAY45

class Solution { public: int climbStairs(int n) { vector<int>dp(n1,0); dp[0]1; for(int j0;j<n;j){ for(int i1;i<2;i){ if(j>i) dp[j]dp[j-i]; } } return dp[n]; } }; 这个题还是说想清楚 这个因为有1和2 阶的情况 所以i就是从1开始遍历 然后小于等于…

ConcurrentHashMap

ConcurrentHashMap 同步容器类是 Java 5 增加的一个线程安全的哈希表。对与多线程的操作&#xff0c;介于 HashMap 与 Hashtable 之间。内部采用“锁分段”机制替代 Hashtable 的独占锁。进而提高性能。 jdk8 弃用了分段锁&#xff0c;使用 cassynchronized 放弃分段锁的原因&a…

SQL基础语法 | 增删改查、分组、排序、limit

Shell命令框和Navicat联合使用 一、数据库层面 创建数据库 postgres# CREATE DATABASE runoobdb;查看数据库 postgres# \l选择数据库 postgres# \c runoobdb删除数据库 postgres# DROP DATABASE runoobdb;二、表格层面 创建表格 CREATE TABLE table_name(字段名称 字段数据类型…

【NLP】一个使用PyTorch实现图像分类的迁移学习实例

一个使用PyTorch实现图像分类的迁移学习实例 1. 导入模块2. 加载数据3. 模型处理4. 训练及验证模型5. 微调6. 其他代码 在特征提取中&#xff0c;可以在预先训练好的网络结构后修改或添加一个简单的分类器&#xff0c;然后将源任务上预先训练好的网络作为另一个目标任务的特征提…

数据决定AIGC的高度,什么又决定着数据的深度?

有人曾言&#xff0c;数据决定人工智能发展的天花板。深以为然。 随着ChatGPT等AIGC应用所展现出的强大能力&#xff0c;人们意识到通用人工智能的奇点正在来临&#xff0c;越来越多的企业开始涌入这条赛道。在AIGC浪潮席卷全球之际&#xff0c;数据的重要性也愈发被业界所认同…

HTML5 的离线储存怎么使用,工作原理

TML5提供了一种称为离线储存&#xff08;Offline Storage&#xff09;的功能&#xff0c;它允许网页在离线时缓存和存储数据&#xff0c;以便用户可以在没有网络连接的情况下访问这些数据。离线储存是通过使用Web Storage API或者应用程序缓存&#xff08;Application Cache&am…

[SQL挖掘机] - 字符串函数 - lower

介绍: lower函数是mysql中的一个字符串函数&#xff0c;其作用是将给定的字符串转换为小写形式。它接受一个字符串作为参数&#xff0c;并返回一个新的字符串&#xff0c;其中所有的字母字符均被转换为小写形式。 使用lower函数可以帮助我们在字符串处理中实现标准化和规范化…