TypeScript 函数的详细使用（默认参数、可选参数、剩余参数、重载声明）_ts 函数参数

函数是一种特殊的对象，可以被调用。TS 里的函数和 原生、ES6 里的函数差不太多，只是多了一些其他功能。

函数的简单使用

// js
// 命名函数
function add (x, y) { return x + y }
// 匿名函数
const add1 = function (x, y) { return x + y }

// ts
// 命名函数
function add (x: number, y: number): number { return x + y }
// 匿名函数
const add1 = function (x: number, y: number): number { return x + y }

// 完整的函数写法：const add2: 函数类型 = 符合函数类型的值
const add2: (x: number, y: number) => number = function (x: number, y: number): number { return x + y }
1
2
3
4
5
6
7
8
9
10
11
12
13
14

函数参数的高级使用

// 可选参数
function add (x: number, y: number, z?:number): number {
  return x + y + (z || 0)
}
console.log(add(1, 10)) // 11
console.log(add(1, 10, 5)) // 15

// 默认参数
function add1 (x: number, y: number = 10, z?:number): number {
  return x + y + (z || 0)
}
console.log(add1(1)) // 11

// 剩余参数
function add2 (x: number, ...args: number[]) {
  // console.log(x)    // 1
  // console.log(args) // [2, 3, 4, 5]
  let total = x
  args.forEach(item => { total += item })
  return total
}
console.log(add2(1, 2, 3, 4, 5)) // 15


// 参数支持多种传入类型
function add3 (x: string| number, y: string|number): number {
  return Number(x || 0).valueOf() + Number(y || 0).valueOf()
}
console.log(add3('1', '10'))  // 11
console.log(add3(1, '10'))    // 11

// 返回值支持多种返回类型
function add4 (x: string, y: string, flag: boolean): number|string {
  if (flag) {
    return x + y
  } else {
    return parseInt(x) + parseInt(y)
  }
}
console.log(add4('1', '10', true))   // '110'
console.log(add4('1', '10', false))  // 11
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

函数的重载声明

// 函数重载声明（一定要写在函数的上面，写在函数下面会报错）
function add (x: string, y: string): string
function add (x: number, y: number): number

// 定义一个函数，如果传入都是字符串那么拼接，如果都是数字那么相加
function add (x: string | number, y: string | number): string | number {
  if (typeof x === 'string' && typeof y === 'string') {
    return x + y // 字符串拼接
  } else if (typeof x === 'number' && typeof y === 'number') {
    return x + y // 数字相加
  }
}

// 这两种是没问题的，每次传入的两种参数类型一致
add(1, 1)
add('1', '1')
// 但是下面这两种混合传入就有问题了，如果不希望传入这样的混合格式，那么就需要函数重载声明一下，进行报错
// 如果不声明，下面这种混合传入也不会报错
add(1, '1') // 函数重载声明后，这行则会进行报错，不能混合传入
add('1', 1) // 函数重载声明后，这行则会进行报错，不能混合传入
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20