前言

江湖有传“动静类型一时爽，代码重构火葬场”，因为动静类型语言在开发时不受数据类型的束缚，因而非常适合在我的项目原型阶段和初期进行疾速迭代开发应用，这意味着我的项目将来将通过重写而非重构的形式进入成熟阶段。而在企业级利用开发中，每个零碎个性其实都是需要剖析人员与用户进行屡次调研后明确下来的，前期须要重写的可能性微不足道，更多的是修修改改，在单元测试有余常态化的环境下动态类型的劣势就尤为突出。而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: undefinedfoo('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): HTMLElementfunction querySelector(x: string, p: JQuery): HTMLElementfunction querySelector(x: JQuery, p: HTMLElement): HTMLElementfunction 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 & OverloadquerySelector.overloads = [[q00, q01],[q10, q11]]

累死人了。。。。。。。

高阶函数的类型申明

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

// 1let foo1: (message: string, count?: number, displayLog?: boolean) => never// 2interface FooDecl {  (message: string, count?: number, displayLog?: boolean): never}let foo2: FooDecl // 3let foo3: {(message: string, count?: number, displayLog?: boolean): never}// 4type 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 + yconst increment(x: number) => number = x => x+1add = increment // 类型兼容increment = add // 类型不兼容const handleEvent: (e: Event) => void;const handleMouseEvent: (e: MouseEvent) => void;   handleEvent = handleMouseEvent // 类型兼容handleMouseEvent = handleEvent // 类型不兼容

总结

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

转载请注明来自：https://www.cnblogs.com/fsjoh... —— \^\_\^肥仔John