Typescript - 函数

有行为的地方就有函数, ts当然也少不了函数类型

目录

1. 定义完整的函数

2. 利用类型推论定义函数

3. 函数的参数

4. 剩余参数

---

1. 定义完整的函数

完整的定义增加了代码的可读性

type Fn = (a: number, b: number) => number[] // 定义一个 Fn 的函数类型
const fn: Fn = (a: number, b: number): number[] => [a, b] // 定义了一个类型为 Fn 的函数

const res = fn(1, 2)
console.log(res) // [1, 2]

2. 利用类型推论定义函数

当我们定义了类型时, 不必完全显式的进行类型注解, ts的类型推论机制会帮你推断出类型

类型推论可以简化我们的书写, 这叫做“按上下文归类”，是类型推论的一种。

type Fn = (a: number, b: number) => number[] // 定义一个 Fn 的函数类型
const fn: Fn = (a, b) => [a, b] // 定义了一个类型为 Fn 的函数

const res = fn(1, 2)
console.log(res) // [1, 2]

3. 函数的参数

在ts中定义的函数必须与其函数类型期望的一致, 不能存在期望传入两个参数,实际传入一个参数的情况, 如果你希望参数可传可不传, 可以利用 ? 关键字设置参数可选

type Fn = (a: string, b?: number) => string

const fn: Fn = (a, b) => (b ? a + b : a)

const res = fn('a')

console.log(res)

4. 剩余参数

未知数量的参数, 可以使用剩余参数

const fn = (a: string, ...rest: (number | string)[]) => {
  return `${a},${rest}`
}
const res = fn('a', 'b', 'c', 1, 2, 3)
console.log(res) // a,b,c,1,2,3