函数重载（overload）

什么是函数重载？简单来说就是同名的函数，这个概念是从 java 来的

我们来看这个需求，一个方法接受的参数有两种情况，可能是 number，可能是 string

如果用 TS 来实现，非常简单

1
2
3
4
5
class X {
  method(n: number | string) {
    /* ... */
  }
}

但是 java 不支持这种情况的联合类型，但是遇到这种需求该怎么办呢？java 的设计者当时又不想直接弄出这么个联合类型，那干脆让一个方法写两遍好了

1
2
3
4
5
6
7
8
class X {
  method(n: number) {
    /* ... */
  }
  method(n: string) {
    /* ... */
  }
}

于是 java 就诞生了一个新语法，一个类的方法是可以同名的，用你的参数类型和个数来判断会具体执行那个函数（很奇怪的语法吧~）

所以重载是为了解决 java 的一个问题

其实在很久之前大家都应该接触过函数重载，在 JQuery 时代的 Selector 一样

1
2
3
$('#div')
$(window)
$...

也许内部使用了大量的 if else，所以说 js 不需要重载这个特性，也能做出一样的效果

但是说回 TS，我认为只有这些情况可能需要用重载

一个创建日期的函数，可以接受一个数量 number，也能接受具体的日期

1
2
3
4
5
6
7
8
9
10
11
12
function createData(n: number): Date
function createData(year: number, month: number, date: number): Date
 // TODO: 注意：下面这里会和 java 稍微不同一点
function createData(a: number, b?: number, c?: number): Date { // TODO: 最后一个实现的签名需要兼容上面所有的情况
  if (a !== undefined && b !== undefined && c !== undefined) {
    return new Date(a,b,c)
  } else if (a !== undefined && b === undefined && c === undefined) {
    return new Date(a)
  } else {
    throw new Error('只接受一个或三个参数')
  }
}

也许也能用联合类型➕if else 实现出来，但是重载会更优雅一点

但是我个人依然保持能不用就不用的态度看待它，就算遇到这种问题，为何非要用一个函数来解决，用两个不同名称的函数来不香么，createDataByNumber 和 createDataByYMD

其实如果你是一个库的封装者，像 JQuery 一样，把函数封装的复杂度留给自己，使用函数重载能方便使用者
但如果你是想把函数的使用权交给用户，就应该多明明几个函数提供用户任意组合使用

this

在 TS 中怎么定义 this 的类型呢？

1
2
3
4
5
6
7
8
type Person {
  name: string;
}
function fn(this: Person, word: string) { // TODO: 这个地方好奇 this 为什么会在参数上的人，请看我的 javascript-this 文章
  console.log(this.name, word)
}

fn('hi') // TODO: 报错

this 在参数上了，那么该如何调用呢？看下面几种方法：

1
2
3
4
5
6
7
8
9
10
11
12
// 强行拼凑出 person.fn()
const p: Person & { fn: typeof fn } = { name: 'jack', fn }
p.fn('hi')

// fn.call()
fn.call({ name: 'jack' }, 'hi')

// fn.apply()
fn.apply({ name: 'jack' }, ['hi'])

// fn.bind()
fn.bind({ name: 'jack' })('hi')

… 与 参数

剩余参数

1
2
3
4
5
6
7
function sum(...x: number[]) {
  return x.reduce((a,b) => a + b, 0)
}

sum(1)
sum(1,2,3,4,5)
sum(1,2,3,4,5,6,7,8,9)

展开参数

1
2
3
4
5
6
7
8
9
function sum(name: string, ...rest: number[]) {
  fn(...rest)
  // or
  fn.apply(null, rest)
}

function fn(...x: number[]) {
  console.log(x)
}

as const

我们知道 TS 有自动推导

1
let a = 'hi'

此时我们很容易看出来 a 的类型是 string
其实这样可能会有些问题
理论上来说 a 的类型应该可能是 ‘hi’ 或者 string
但是这个 TS 怎么知道我们这个 a 是常量（即类型为 ‘hi’）还是 string 呢？

用 const

1
let a = 'hi' as const

不对啊，直接用 const 关键词不就好了

1
const a = 'hi'

其实大多数的应用场景在对象上，因为 JS 的 const 就是残废

1
const array = [1, 'hi'] as const

参数对象的析构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
type Config = {
  url: string;
  method: 'GET' | 'POST' | 'PATCH';
  data?: number;
}

// 使用一
function ajax({ url, method, ...data }: Config) {}

// 使用二
function ajax({ url, method, ...data }: Config = {url: '', method: 'GET'}) {}

// 使用三
function ajax({ url, method, ...data } = {url: '', method: 'GET'} as Config) {}

void

1
2
3
4
5
6
7
8
9
10
11
function f1(): void {
  return
}
function f2(): void {
  return undefined
}
function f3(): void {
}
function f4(): void {
  return null // TODO: 报错
}