TypeScript(六)函数

简介: TypeScript(六)函数

前言

本文收录于TypeScript知识总结系列文章,欢迎指正!

在前面的文章中,我使用对象类型以及接口分别定义了函数类型,浅谈了函数的定义及基本使用。本文将分享函数的进阶用法

可选参数

函数参数可以被标记为可选的,这意味着在调用函数时可以省略这个参数。要使参数成为可选参数,写法与接口的可选属性一样,在参数名后面加上一个问号?

function foo(params?: string): void {
    console.log(params)
}

需要注意的是,必选参数不能位于可选参数后,下面代码会提示错误

function foo(params?: string, params2): void {
    console.log(params, params2)
}

正确写法

function foo(params2, params?: string): void {
    console.log(params, params2)
}

参数默认值

参数默认值是在函数声明时可以为函数参数指定一个默认值,当传入的实参为空时使用该值

function foo(params?: string, params2: string = "hello"): void {
    console.log(params, params2)
}

此时函数中被赋予参数默认值的参数也建议放在最后(一般接入sonar会提示)

function foo(params2: string = "hello", params3: string): void {// 不推荐
    console.log(params2, params3)
}
function foo2(params3: string, params2: string = "hello"): void {// 建议这么写
    console.log(params2, params3)
}

剩余参数

剩余参数实际是JS中的语法,在ES6之前,使用function关键字声明函数一般使用arguments获取参数类数组,在ES6的结构赋值和箭头函数出现后,一般使用 ...args 获取函数剩余参数或所有参数

function foo(...args): void {
    console.log(...args, ...arguments)// a b c a b c
}
foo("a", "b", "c")

类型推断

TypeScript中函数可以自动推断返回值类型,比如

function foo(num: number, num2: number) {
    return num + num2
}

上述代码会根据想加逻辑将返回值推断为number

function foo(num: number, num2: number): number

函数重载

函数重载是TS中十分重要的特性,它允许我们针对同一个函数名定义多种参数及返回值类型;在调用时会根据传入的参数类型和返回值类型来自动选择正确的函数;函数重载的写法与接口和对象之间的关系有点相似:定义抽象的函数声明,使用函数将其实现。

function foo(num: number, num2: number): number
function foo(str: string): string
function foo(str: number | string, num2?: number) {
    return typeof str === "string" ? str : str + num2
}

上述例子是一个简单的函数重载,我定义了两个函数待实现,如果第一个参数类型是string则直接返回,否则返回参数之和

结尾

这篇文章针对TS中的函数进行了进阶的介绍,除了在之前文章中提到的函数定义及用法外,还介绍了函数参数的操作,返回值推断,函数重载

感谢你的阅读,希望文章对你有所帮助,有任何问题还望在评论区留言。

相关文章
|
6月前
|
JavaScript 前端开发 编译器
TypeScript 函数第一章
TypeScript 函数第一章
73 4
|
6月前
|
JavaScript 前端开发 测试技术
[小笔记]TypeScript/JavaScript模拟Python中的Range函数
[小笔记]TypeScript/JavaScript模拟Python中的Range函数
67 0
|
6月前
|
JavaScript 编译器
TypeScript中泛型在函数和类中的应用
【4月更文挑战第23天】TypeScript的泛型在函数和类中提供了灵活性,允许处理多种数据类型。了解泛型是掌握TypeScript类型系统的关键。
|
2月前
|
JavaScript
typeScript基础(3)_ts函数默认值和可选参数
本文介绍了在TypeScript中如何使用函数的默认值和可选参数。展示了如何为函数参数指定默认值,使得在调用函数时可以省略某些参数,以及如何定义可选参数。
151 2
|
1月前
|
移动开发 JavaScript 前端开发
TypeScript:数组类型&函数使用&内置对象
本文介绍了 TypeScript 中的数组类型、对象数组、二维数组、函数、函数重载、内置对象等概念,并通过代码示例详细展示了它们的使用方法。还提供了一个使用 HTML5 Canvas 实现的下雨效果的小案例。
|
2月前
|
JavaScript
typeScript基础(7)_函数的类型
本文介绍了TypeScript中函数的类型,包括函数声明与函数表达式的类型注解,如何定义函数的参数类型、返回类型,以及可选参数和参数默认值。还探讨了函数的剩余参数、如何使用接口定义函数的形状,以及函数重载的概念和实践。
26 0
|
4月前
|
JavaScript 前端开发 程序员
Typescript 【实用教程】(2024最新版)含类型声明,类型断言,函数,接口,泛型等
Typescript 【实用教程】(2024最新版)含类型声明,类型断言,函数,接口,泛型等
77 0
|
5月前
|
JavaScript 前端开发 API
TypeScript 函数
TypeScript 函数
|
5月前
|
JavaScript 前端开发
typescript 函数类型
typescript 函数类型
|
5月前
|
JavaScript 编译器 前端开发
11.【TypeScript 教程】函数(Function)
11.【TypeScript 教程】函数(Function)
28 0