TypeScript(6)函数
函数
函数是 JavaScript
应用程序的基础,它帮助你实现抽象层,模拟类,信息隐藏和模块。在 TypeScript
里,虽然已经支持类,命名空间和模块,但函数仍然是主要的定义行为的地方。TypeScript 为 JavaScript 函数添加了额外的功能,让我们可以更容易地使用。
基本示例
和 JavaScript 一样,TypeScript 函数可以创建有名字的函数和匿名函数。你可以随意选择适合应用程序的方式,不论是定义一系列 API 函数还是只使用一次的函数。
// 命名函数
function add(x, y) {
return x + y
}
// 匿名函数
let myAdd = function(x, y) {
return x + y;
}
函数类型
为函数定义类型
让我们为上面那个函数添加类型:
function add(x: number, y: number): number {
return x + y
}
let myAdd = function(x: number, y: number): number {
return x + y
}
我们可以给每个参数添加类型之后再为函数本身添加返回值类型。TypeScript 能够根据返回语句自动推断出返回值类型。
书写完整函数类型
现在我们已经为函数指定了类型,下面让我们写出函数的完整类型。
// 函数的完整写法
// myAdd2---->变量名----函数myAdd2
// (x: number, y: number) => number 是当前这个函数的类型
// function(x: number, y: number): number { return x + y } 相当于符合上面这个函数的值
let myAdd2: (x: number, y: number) => number =
function(x: number, y: number): number {
return x + y
}
可选参数和默认参数
TypeScript
里的每个函数参数都是必须的。 这不是指不能传递 null
或 undefined
作为参数,而是说编译器检查用户是否为每个参数都传入了值。编译器还会假设只有这些参数会被传递进函数。 简短地说,传递给一个函数的参数个数必须与函数期望的参数个数一致。
JavaScript
里,每个参数都是可选的,可传可不传。 没传参的时候,它的值就是 undefined
。 在TypeScript 里我们可以在参数名旁使用 ?
实现可选参数的功能。 比如,我们想让 lastName
是可选的
在 TypeScript
里,我们也可以为参数提供一个默认值当用户没有传递这个参数或传递的值是 undefined
时。 它们叫做有默认初始化值的参数。 让我们修改上例,把firstName
的默认值设置为 "A"
。
function buildName(firstName: string='A', lastName?: string): string {
if (lastName) {
return firstName + '-' + lastName
} else {
return firstName
}
}
// 都传入
console.log(buildName('C', 'D'))
// 只传入姓
console.log(buildName('C'))
// 什么也不传
console.log(buildName())
剩余参数
必要参数,默认参数和可选参数有个共同点:它们表示某一个参数。 有时,你想同时操作多个参数,或者你并不知道会有多少参数传递进来。 在 JavaScript
里,你可以使用 arguments
来访问所有传入的参数
在 TypeScript 里,你可以把所有参数收集到一个变量里:
剩余参数会被当做个数不限的可选参数。 可以一个都没有,同样也可以有任意个。 编译器创建参数数组,名字是你在省略号( ...)
后面给定的名字,你可以在函数体内使用这个数组。
function info(x: string, ...args: string[]) {
console.log(x, args)
}
info('abc', 'c', 'b', 'a')
函数重载
函数重载: 函数名相同, 而形参不同的多个函数
在JS中, 由于弱类型的特点和形参与实参可以不匹配, 是没有函数重载这一说的 但在TS中, 与其它面向对象的语言(如Java)就存在此语法
/*
函数重载: 函数名相同, 而形参不同的多个函数
需求: 我们有一个add函数,它可以接收2个string类型的参数进行拼接,也可以接收2个number类型的参数进行相加
*/
// 重载函数声明
function add (x: string, y: string): string
function add (x: number, y: number): number
// 定义函数实现
function add(x: string | number, y: string | number): string | number {
// 在实现上我们要注意严格判断两个参数的类型是否相等,而不能简单的写一个 x + y
if (typeof x === 'string' && typeof y === 'string') {
return x + y
} else if (typeof x === 'number' && typeof y === 'number') {
return x + y
}
}
console.log(add(1, 2))
console.log(add('a', 'b'))
TypeScript(6)函数的更多相关文章
- TypeScript 中函数的理解?与 JavaScript 函数的区别?
一.是什么 函数是JavaScript 应用程序的基础,帮助我们实现抽象层.模拟类.信息隐藏和模块 在TypeScript 里,虽然已经支持类.命名空间和模块,但函数仍然是主要定义行为的方式,Type ...
- TypeScript Function(函数)
在JavaScript中,函数是构成任何应用程序的基础块.通过函数,你得以实现建立抽象层.模仿类.信息隐藏和模块化.在TypeScript中,虽然已经存在类和模块化,但是函数依旧在如何去"处 ...
- TypeScript入门-函数
▓▓▓▓▓▓ 大致介绍 TypeScript为JavaScript函数添加了额外的功能,让我们可以更容易地使用.TypeScript中的函数也包括JavaScript中最常见的两种函数 functio ...
- TypeScript 之 函数
https://m.runoob.com/manual/gitbook/TypeScript/_book/doc/handbook/Functions.html 为函数定义类型 为函数添加类型: fu ...
- typescript - 3.函数
(1)函数的定义 ## 函数声明法 // function run():string{ // return 'run'; // } //错误写法,返回类型错误 // function run():st ...
- 《前端之路》- TypeScript(二) 函数篇
目录 一.定义函数方法 二.定义函数传参 三.可选传参 四.默认传参 五.传递剩余参数 六.函数重载 七.箭头函数 八.总结 一.定义函数方法 在 es5 中定时函数的方法有 命名函数和函数表达式(匿 ...
- TypeScript 素描 - 函数
/* 函数和javaScript并没有太大差别,只是增加了额外的功能,使函数有 更为强大的功能而且更易用使用 */ //现在支持函数的参数指定类型,在前面的博文中大家应该已经看到 //还可以指定函数的 ...
- typescript的函数
1:默认参数(传入值会覆盖默认参数,不传值也行) function getinfo(name:string,age:number=20):string{ return `${name}---${age ...
- TypeScript之函数
1.函数声明 与javascript一样,ts的函数声明也分为两种:函数声明,函数表达式 1)函数声明: function fn(age:number):string{ return `age is ...
- TypeScript中将函数中的局部变量“导出”的方法
首先是在模块a.js中声明一个可导出(export)的数据结构,例如: export class ModelInfo{ id: string; name:string; } 其次是在模块b中声明可导出 ...
随机推荐
- select下拉框获取下拉项值的问题
新发现: select option如果里面不写value值,默认提交<option></option>中间的值. 切记:真正提交的值写在value属性里面,option之间只 ...
- Color Constancy 颜色恒定性
1:Color Constancy? 世界上并不存在颜色.颜色仅仅是我们的眼睛和大脑对不同可见光的波长进行的一层映射.也就说颜色只是我们大脑和视网膜处理的结果. 1.1 关键问题 我们的视觉系统有一个 ...
- C++五子棋(六&七)——游戏结束
规则原理 如图 判断游戏结束 chessData.h //row,col 表示当前落子 bool checkWin(ChessData* game, int row, int col); 横.竖.斜( ...
- html显示与隐藏元素的几种方式
html显示与隐藏元素的几种方式 1.display none : 无 隐藏元素 block : 显示 转换为块级元素 不占位:当隐藏的时候元素就完全没有了.不能看见和操作该元素. 优点:为其他元 ...
- MySQL启动过程详解三:Innodb存储引擎的启动
Innodb启动过程如下: 1. 初始化innobase_hton,它是一个handlerton类型的指针,以便在server层能够调用存储引擎的接口. 2. Innodb相关参数的检车和初始化,包括 ...
- Ubuntu 下 firebird 数据库的安装和配置
Ubuntu 下 firebird 数据库的安装和配置 1.简介 本文主要是 Ubuntu 下 firebird 数据库的安装和目录迁移,同样适用于 Debian 系统:Ubuntu 20.0.4 f ...
- 《Mybatis 手撸专栏》第6章:数据源池化技术实现
作者:小傅哥 博客:https://bugstack.cn - 手写Mybatis系列文章 沉淀.分享.成长,让自己和他人都能有所收获! 一.前言 码农,只会做不会说? 你有发现吗,其实很大一部分码农 ...
- web服务报错类型
401:无权限(HttpStatus.UNAUTHORIZED) 404:页面找不到 405:不支持get/post请求,如只支持get请求但传了post请求 400:请求格式错误,如不为null但传 ...
- JQ的is()
is():根据选择器.元素或jQuery对象来检测匹配元素集合, 如果这些元素中至少有一个元素匹配给定的参数,则返回true. <!DOCTYPE html> <html lang ...
- app嵌套页
Wdatepicker