前言

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

TypeScript魔法堂:函数类型声明其实很复杂的更多相关文章

  1. TypeScript基础类型,类实例和函数类型声明

    TypeScript(TS)是微软研发的编程语言,是JavaScript的超集,也就是在JavaScript的基础上添加了一些特性.其中之一就是类型声明. 一.基础类型 TS的基础类型有 Boolea ...

  2. TypeScript魔法堂:枚举的超实用手册

    前言 也许前端的同学会问JavaScript从诞生至今都没有枚举类型,我们不是都活得挺好的吗?为什么TypeScript需要引入枚举类型呢? 也许被迫写前端的后端同学会问,TypeScript的枚举类 ...

  3. TypeScript入门三:TypeScript函数类型

    TypeScript函数类型 TypeScript函数的参数 TypeScript函数的this与箭头函数 TypeScript函数重载 一.TypeScript函数类型 在上一篇博客中已经对声明Ty ...

  4. TypeScript - 类型声明、枚举、函数、接口

    目录  可定义的类型  类型声明  枚举  函数  接口 可定义的类型 以下所写的并不代表typescript的数据类型,而是在使用过程中可以用作定义的类型 number : 数值类型: string ...

  5. JS魔法堂:那些困扰你的DOM集合类型

    一.前言 大家先看看下面的js,猜猜结果会怎样吧! 可选答案: ①. 获取id属性值为id的节点元素 ②. 抛namedItem is undefined的异常 var nodes = documen ...

  6. TypeScript 函数-函数类型

    //指定参数类型 function add(x:number,y:number){ console.log("x:"+x); // reutrn(x+y); } //指定函数类型 ...

  7. typescript函数类型接口

    /* 接口的作用:在面向对象的编程中,接口是一种规范的定义,它定义了行为和动作的规范,在程序设计里面,接口起到一种限制和规范的作用.接口定义了某一批类所需要遵守的规范,接口不关心这些类的内部状态数据, ...

  8. WebComponent魔法堂:深究Custom Element 之 标准构建

    前言  通过<WebComponent魔法堂:深究Custom Element 之 面向痛点编程>,我们明白到其实Custom Element并不是什么新东西,我们甚至可以在IE5.5上定 ...

  9. JS魔法堂:jsDeferred源码剖析

    一.前言 最近在研究Promises/A+规范及实现,而Promise/A+规范的制定则很大程度地参考了由日本geek cho45发起的jsDeferred项目(<JavaScript框架设计& ...

随机推荐

  1. getchar()与putchar()

    getchar() 用于读取用户从键盘输入的单个字符,它有一个整型的返回值,当发生读取错误的时候,返回整型值-1,当读取正确的时候,它会返回用户从键盘输的第一个字符的ASCII码, 当程序调用getc ...

  2. Effective C++ 读书笔记 名博客

    https://www.cnblogs.com/harlanc/tag/effective%20c%2B%2B/default.html?page=3

  3. 07 C语言常量

    常量的定义 常量是指固定的值,固定值在程序执行期间不会改变.这些固定值,又叫做字面量. 常量可以是任意的基本数据类型,比如整数常量.浮点常量.字符常量,或字符串字面值,也有枚举常量. 不要搞得太复杂, ...

  4. 关于继承、封装、多态、抽象和接口(Java)

    1.继承:    通过扩展一个已有的类,并继承该类的属性和行为,来创建一个新的类.已有的称为父类,新的类称为子类(父类派生子类,子类继承父类). (1)继承的优点:①代码的可重用性: ②父类的属性的方 ...

  5. JavaScript查找字符串中给定字符出现的位置以及次数

    要求: 给定字符串oabcoefoxyozzopp,要求输出字符o出现的位置和次数. 实现思路: 先查找第一个o出现的位置 然后只要判断indexOf返回的结果,若不是-1,则继续往后查找 因为ind ...

  6. 达梦产品技术支持培训-day2-DM8常用SQL

    (本文只作为随笔或个人笔记,非官方文档,请勿作他用,谢谢) DM8数据库的SQL兼容性很高,和Oracle差距不大,以下是个人认为比较关键的部分. 1.关键动词 create --新建 drop -- ...

  7. 我要告诉你:java接口中可以定义private私有方法

    在传统的Java编程中,被广为人知的一个知识点是:java Interface接口中不能定义private私有方法.只允许我们定义public访问权限的方法.抽象方法或静态方法.但是从Java 9 开 ...

  8. mysql CHAR and VARCHAR 比较

    写在前面 面试的时候突然有一位面试官问,说说CHAR和VARCHAR的区别,懵逼了,想自己平常使用的时候直接把VARCHAR拿来就用,真没注意到其中的不同. 反思,为什么没有注意到他们的不同 对于my ...

  9. mysql5.5和5.6的一些区别

    timestamp 5.5中 直接写timestamp不加长度   5.6 中 写的timestamp(3) datatime 5.5中 直接写datetime 不加长度  5.6中 可以添加长度(3 ...

  10. c# 误区系列(一)

    前言 整理很早以前认为的一些误区,准备整理一个系列.新手可以看下,然后大佬指点一下是否哪些地方错了. 正文 值类型存在栈上,引用类型存在堆上 很多人认为用这句话来解释值类型和栈类型的区别,甚至有些文章 ...