TS --- 函数

136 阅读2分钟

「这是我参与2022首次更文挑战的第19天,活动详情查看:2022首次更文挑战

函数是任何应用的基础组成部分,无论它是局部函数(local functions),还是从其他模块导入的函数,亦或是类中的方法。当然,函数也是值 (values),而且像其他值一样,TypeScript 有很多种方式用来描述,函数可以以怎样的方式被调用。

基本定义方式

// 普通函数
function sum(num1: number, num2: number): number {
  return num1 + num2
}

// 箭头函数
const sumFun = (num1: number, num2: number) => num1 + num2
// 完整的定义方式
const sum = (num1: number, num2: number) => number
sum = (num1: number, num2: number) => num1 + num2
// 使用接口定义函数
interface Sum {
  (num1: number, num2: number): number
}

// 使用类型别名定义函数 --- 推荐
type sum = (num1: number, num2: number) => number

函数参数

可选参数

  1. 在参数名后加上问号的参数表示是可选参数
  2. 在TypeScript中,可选参数必须在默认参数的后边
type Sum = (num1: number, num2: number, num3?: number) => number

let sum: Sum = (num1: number, num2: number) => num1 + num2
sum = (num1: number, num2: number, num3: number) => num1 + num2 + num3

默认值

我们在定义函数的时候,可以给参数默认值

在TypeScript中只有在实际定义函数的形参的时候,才可以使用参数的默认值

在TypeScript中,并没有规定含有默认值的参数必须在参数列表的最后

如果一个参数有了默认值,那么这个参数的类型可以被默认推导出来

const sum  = (num1: number, num2 = 5) => num1 + num2

剩余参数

和JavaScript一样,在TypeScript中,剩余参数也必须在参数列表的最后

const fun = (num1: number, ...args: number[]) => {
  return `${num1}_` + args.join('_')
}

函数重载

定义多个拥有不同类型定义的同名函数

主要可以表现为函数参数的类型,个数 和 返回值的不同

在实际调用的时候,TypeScript会自动根据函数所传入的参数的个数或参数的类型的不同

去自动匹配最适合的那个函数签名

// 函数重载部分 --- 每一个重载部分都被称之为是函数声明
// 函数重载只能使用function关键字来进行定义
function getArr(param: string): string[]
function getArr(param: number): string[]

// 函数实际定义部分
function getArr(param: string | number): string[]

// 调用
getArr('Klaus') // 会被匹配到第一个函数声明
getArr(123) // 会被匹配到第二个函数声明