函数和重载

函数定义

1. 函数声明

function fn(x: number, y?: number): number {
	return ( y ? x + y : x)
}

2. 函数表达式

const fn = (x: number, y?: number): number => y ? x + y : x

3. 用 interface 定义一个公用函数类型

interface ISum {
    (x: number, y: number): number
}

const sum: ISum = (x, y) => x + y

4. 用 type 定义一个 公用函数类型

type Sum = (x: number, y: number) => number

5. 使用关键字 ? 定义参数为可选，可选参数只能定义在必选参数后面

function fn (one: number, two: string, three?: boolean) {}

6. 参数默认值

function fn (one: number, two: string = 'kingmusi') {}

7. Rest 参数

function fn (...item: number[]) {}

重载

ts 中的重载不同于 Java 中的重载，ts 中的重载是为了更好的解决自动类型推断不够准确的问题

有以下函数

type NumOrStr = number | string

function add(a: NumOrStr, b:NumOrStr) {
    // 可以看到，类型还是需要自己在函数中判断，否则会报错
    if (typeof a === 'string' || typeof b === 'string') {
      return a.toString() + b.toString()
    }
    return a + b
}

当使用两个字符串作为参数调用 add 函数时，我们很容易知道此时返回一个字符串，所以想使用字符串的 split 方法，但 ts 却会报错

add('x', 'y').split('') // Property 'split' does not exist on type 'number'

因为 ts 的自动推断并没有这么智能，它认为结果会是 number 或者 string，而 number 并没有 split 方法

那如何解决这烦人的报错呢？使用 ts 的函数重载

type NumOrStr = number | string
function add(a:number,b:number):number;
function add(a: string, b: string): string;
function add(a: string, b: number): string;
function add(a: number, b: string): string;
function add(a:Types, b:Types) {
  if (typeof a === 'string' || typeof b === 'string') {
    return a.toString() + b.toString();
  }
  return a + b;
}
const result = add('x', ' y');
result.split(' ');