乐趣区

关于javascript:TypeScript魔法堂函数类型声明其实很复杂

jiezi

前言

江湖有传“动静类型一时爽，代码重构火葬场”，因为动静类型语言在开发时不受数据类型的束缚，因而非常适合在我的项目原型阶段和初期进行疾速迭代开发应用，这意味着我的项目将来将通过重写而非重构的形式进入成熟阶段。而在企业级利用开发中，每个零碎个性其实都是需要剖析人员与用户进行屡次调研后明确下来的，前期须要重写的可能性微不足道，更多的是修修改改，在单元测试有余常态化的环境下动态类型的劣势就尤为突出。而 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/fsjoh… —— \^\_\^ 肥仔 John

退出移动版