TypeScript魔法堂：函数类型声明其实很复杂

前言

江湖有传“动态类型一时爽，代码重构火葬场”，由于动态类型语言在开发时不受数据类型的约束，因此非常适合在项目原型阶段和初期进行快速迭代开发使用，这意味着项目未来将通过重写而非重构的方式进入成熟阶段。而在企业级应用开发中，每个系统特性其实都是需求分析人员与用户进行多次调研后明确下来的，后期需要重写的可能性微乎其微，更多的是修修改改，在单元测试不足常态化的环境下静态类型的优势就尤为突出。而TypeScript的类型系统和编译时类型检查机制则非常适合用于构建企业级或不以重写实现迭代升级的应用系通。

本系列将重点分享TypeScript类型声明相关实践

1. 函数类型声明其实很复杂
2. 玩转交叉类型和联合类型
3. class,inteface和type到底选哪个？
4. 从lib.d.ts学习外部类型声明的最佳实践
5. 类型声明综合实战

本文为该系列的首发，那么我们现在就开始吧！

定义即声明

当我们通过TypeScript定义函数时，实际上已经声明了函数签名和定义了函数体。

function foo(message: string, count?: number, displayLog = true): never {
    console[displayByLog ? 'log' : 'warn'](`message: ${message}; count: ${count}`)
    throw new Error('Just a error.')
}

上述函数定义附带声明了function foo(x: boolean, y: string, z: undefined | number): never函数签名，这里我特意替换参数名称以便大家将关注点放在函数参数列表类型和返回值类型上。

后续通过如下代码调用foo函数

foo('hi') // 回显 message: hi; count: undefined
foo('hi', 'yes') // 编译报错

函数重载

JavaScript中我们会通过函数重载来整合处理入参数据结构存在差异，但处理意图和处理结果相同的行为。具体实现方式有

function querySelector(x, parent) {
    var arg1 = typeof x === 'string' ? 0 : 1
    var arg2 = parent instanceof HTMLElement ? 0 : 1
    return (querySelector.overloads[arg1][arg2]).call(null, x, parent)
}
function q00 (x /*: string*/, p /*: HTMLElement*/) {
  return p.querySelector(x)
}
function q01 (x /*: string*/, p /*: JQuery*/) {
  return p.find(x)[0]
}
function q10 (x /*: JQuery*/, p /*: HTMLElement*/) {
  return $(p).find(x)[0]
}
function q11 (x /*: JQuery*/, p /*: JQuery*/) {
  return p.find(x)[0]
}

querySelector.overloads = [[q00,q01],[q10,q11]]

而TypeScript中的函数重载并没有让我们定义得更轻松，可以理解为在原JavaScript实现的基础上添加类型声明信息，这样反而让定义变得复杂，但为了能更安全地调用却是值得的。

写法1：

function querySelector(x: string, p: HTMLElement): HTMLElement
function querySelector(x: string, p: JQuery): HTMLElement
function querySelector(x: JQuery, p: HTMLElement): HTMLElement
function querySelector(x: JQuery, p: JQuery): HTMLElement
// 和JavaScript一样需要定义一个Dispatch函数，用于实现调用重载函数的具体规则
function querySelector(x, y) {
    var arg1 = typeof x === 'string' ? 0 : 1
    var arg2 = parent instanceof HTMLElement ? 0 : 1
    if (arg1 === 0 && arg2 === 0) {
        return p.querySelector(x)
    }
    else if (arg1 === 0 && arg2 === 1) {
        return p.find(x)[0]
    }
    else if (arg1 === 1 && arg2 === 0) {
        return $(p).find(x)[0]
    }
    else {
        return p.find(x)[0]
    }
}

写法2：

interface QuerySelector{
    (x: string, p: HTMLElement): HTMLElement
    (x: string, p: number): HTMLElement
    (x: number, p: HTMLElement): HTMLElement
    (x: number, p: number): HTMLElement
    overloads: Function[][]
}
// 和JavaScript一样需要定义一个Dispatch函数，用于实现调用重载函数的具体规则
let querySelector: QuerySelector= <QuerySelector>function (x: string | number, p: HTMLElement | number): HTMLElement {
    let arg1 = typeof x === 'string' ? 0 : 1
    let arg2 = parent instanceof HTMLElement ? 0 : 1
    return (querySelector.overloads[arg1][arg2]).call(null, x, parent)
}
function q00 (x: string, p: HTMLElement):HTMLElement {
  return p.querySelector(x)
}
function q01 (x: string, p: JQuery):HTMLElement {
  return p.find(x)[0]
}
function q10 (x: JQuery, p: HTMLElement):HTMLElement {
  return p.find(x)[0]
}
function q11 (x: JQuery, p: JQuery):HTMLElement {
  return p.find(x)[0]
}
querySelector.overloads = [[q00, q01],[q10, q11]]

写法2注意事项：

1. Dispatch函数必须采用<T>作为类型断言而不能使用as进行类型转；
2. Dispatch函数必须通过function方式定义，而不能使用箭头函数方式定义。
   
   如果想以箭头函数的方式定义Dispatch函数，那么写法就会更复杂了。

interface QuerySelector{
    (x: string, p: HTMLElement): HTMLElement
    (x: string, p: number): HTMLElement
    (x: number, p: HTMLElement): HTMLElement
    (x: number, p: number): HTMLElement
}
interface Overload {
    overloads: Function[][]
}
let querySelector: <QuerySelector & Overload>
let querySelectorDispatch:<QuerySelector> = (x: string | number, p: HTMLElement | number): HTMLElement => {
    let arg1 = typeof x === 'string' ? 0 : 1
    let arg2 = parent instanceof HTMLElement ? 0 : 1
    return (querySelector.overloads[arg1][arg2]).call(null, x, parent)
}

function q00 (x: string, p: HTMLElement):HTMLElement {
  return p.querySelector(x)
}
function q01 (x: string, p: JQuery):HTMLElement {
  return p.find(x)[0]
}
function q10 (x: JQuery, p: HTMLElement):HTMLElement {
  return p.find(x)[0]
}
function q11 (x: JQuery, p: JQuery):HTMLElement {
  return p.find(x)[0]
}
querySelector = querySelectorDispatch as QuerySelector & Overload
querySelector.overloads = [[q00, q01],[q10, q11]]

累死人了。。。。。。。

高阶函数的类型声明

高阶函数作为JavaScript最为人称道的特性，在TypeScript中怎能缺席呢？

// 1
let foo1: (message: string, count?: number, displayLog?: boolean) => never

// 2
interface FooDecl {
  (message: string, count?: number, displayLog?: boolean): never
}
let foo2: FooDecl 

// 3
let foo3: {(message: string, count?: number, displayLog?: boolean): never}

// 4
type FooType = (message: string, count?: number, displayLog?: boolean) => never

上述为4种声明高阶函数类型的写法，其中第3种是第2种的简写形式。

1、2和3方式声明了变量的值类型，而2中的interface FooDecl和4中则声明类型本身。

foo1,foo2,foo3作为变量(value)可作为传递给函数的实参，和函数的返回值。因此针对它们的值类型声明是无法被重用的，也无法用于函数声明和其它类型声明中；

FooDecl,FooType作为类型声明，及可以被反复重用在各函数声明和其它类型声明中。

函数类型兼容

函数类型兼容的条件：

1. 形参列表个数小于等于目标函数类型的形参列表个数；
2. 形参列表中形参类型的顺序和目标函数类型的形参列表一致，或形参类型为目标函数类型相应位置的参数类型的子类型；
3. 函数返回值必须为目标函数类型返回值的子类型。

const add: (x: number, y: number) => number = (x, y) => x + y
const increment(x: number) => number = x => x+1

add = increment // 类型兼容
increment = add // 类型不兼容

const handleEvent: (e: Event) => void;
const handleMouseEvent: (e: MouseEvent) => void;

handleEvent = handleMouseEvent // 类型兼容
handleMouseEvent = handleEvent // 类型不兼容

总结

函数类型声明难点在于函数重载这一块，而作为库开发者函数重载往往能帮助我们开发出更容易记忆使用和优雅的接口，既然逃不过那不如好好努力克服困难吧！

转载请注明来自：https://www.cnblogs.com/fsjohnhuang/p/13903589.html —— ^_^肥仔John