TypeScript基础入门 - 函数 - 可选参数和默认参数

简介: 转载TypeScript基础入门 - 函数 - 可选参数和默认参数项目实践仓库https://github.com/durban89/typescript_demo.gittag: 1.2.0为了保证后面的学习演示需要安装下ts-node,这样后面的每个操作都能直接运行看到输出的结果。

转载

TypeScript基础入门 - 函数 - 可选参数和默认参数

项目实践仓库

https://github.com/durban89/typescript_demo.git
tag: 1.2.0

为了保证后面的学习演示需要安装下ts-node,这样后面的每个操作都能直接运行看到输出的结果。

npm install -D ts-node

后面自己在练习的时候可以这样使用

npx ts-node 脚本路径

函数

可选参数和默认参数

TypeScript里的每个函数参数都是必须的。 这不是指不能传递 null或undefined作为参数,而是说编译器检查用户是否为每个参数都传入了值。 编译器还会假设只有这些参数会被传递进函数。 简短地说,传递给一个函数的参数个数必须与函数期望的参数个数一致。如下实例演示

function buildName(firstName: string, lastName: string) {
    return firstName + ' ' + lastName
}

// 错误演示
buildName("firstName")
// 错误演示
buildName("firstName", "lastName", "lastName")
// 正确演示
buildName("firstName", "lastName")

JavaScript里,每个参数都是可选的,可传可不传。 没传参的时候,它的值就是undefined。 在TypeScript里我们可以在参数名旁使用 ?实现可选参数的功能。 比如,我们想让last name是可选的:

function buildName(firstName: string, lastName?: string) {
    return firstName + ' ' + lastName
}

// 错误演示
buildName("firstName", "lastName", "lastName")
// 正确演示
buildName("firstName")
// 正确演示
buildName("firstName", "lastName")

可选参数必须跟在必须参数后面。 如果上例我们想让first name是可选的,那么就必须调整它们的位置,把first name放在后面。在TypeScript里,我们也可以为参数提供一个默认值当用户没有传递这个参数或传递的值是undefined时。 它们叫做有默认初始化值的参数。 让我们修改上例,把last name的默认值设置为"Smith"。

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

// 正确演示
buildName("A")
// 正确演示
buildName("A", undefined)
// 错误演示
buildName("firstName", "lastName", "lastName")
// 正确演示
buildName("firstName", "lastName")


在所有必须参数后面的带默认初始化的参数都是可选的,与可选参数一样,在调用函数的时候可以省略。 也就是说可选参数与末尾的默认参数共享参数类型。

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

function buildName(firstName: string, lastName?: string) {
    return firstName + ' ' + lastName
}

共享同样的类型(firstName: string, lastName?: string) => string。 默认参数的默认值消失了,只保留了它是一个可选参数的信息。与普通可选参数不同的是,带默认值的参数不需要放在必须参数的后面。 如果带默认值的参数出现在必须参数前面,用户必须明确的传入 undefined值来获得默认值。 例如,我们重写最后一个例子,让 firstName是带默认值的参数:

function buildName(firstName="Durban", lastName: string) {
    return firstName + ' ' + lastName
}

// 错误演示
buildName("A")
// 正确演示
buildName(undefined,  "A")
// 错误演示
buildName("firstName", "lastName", "lastName")
// 正确演示
buildName("firstName", "lastName")

本实例结束实践项目地址

https://github.com/durban89/typescript_demo.git
tag: 1.2.1
目录
相关文章
|
4月前
|
JavaScript 编译器
TypeScript中泛型在函数和类中的应用
【4月更文挑战第23天】TypeScript的泛型在函数和类中提供了灵活性,允许处理多种数据类型。了解泛型是掌握TypeScript类型系统的关键。
|
2月前
|
JavaScript 前端开发 程序员
Typescript 【实用教程】(2024最新版)含类型声明,类型断言,函数,接口,泛型等
Typescript 【实用教程】(2024最新版)含类型声明,类型断言,函数,接口,泛型等
56 0
|
2月前
|
JavaScript
TypeScript(六)函数
TypeScript(六)函数
19 0
|
3月前
|
JavaScript 前端开发 程序员
typescript入门笔记分享
typescript入门笔记分享
21 0
|
3月前
|
JavaScript 前端开发 API
TypeScript 函数
TypeScript 函数
|
3月前
|
JavaScript 前端开发
typescript 函数类型
typescript 函数类型
|
3月前
|
JavaScript 编译器 前端开发
11.【TypeScript 教程】函数(Function)
11.【TypeScript 教程】函数(Function)
20 0
|
4月前
|
JavaScript
vite+typescript从入门到实战(三)
vite+typescript从入门到实战
67 0
|
4月前
|
JavaScript
vite+typescript从入门到实战(二)
vite+typescript从入门到实战
70 0
|
2月前
|
前端开发 JavaScript 安全
TypeScript在React Hooks中的应用:提升React开发的类型安全与可维护性
【7月更文挑战第17天】TypeScript在React Hooks中的应用极大地提升了React应用的类型安全性和可维护性。通过为状态、依赖项和自定义Hooks指定明确的类型,开发者可以编写更加健壮、易于理解和维护的代码。随着React和TypeScript的不断发展,结合两者的优势将成为构建现代Web应用的标准做法。