Substitutability 中文含义是 可代替性,这个词我未在 TypeScript 的语言特性相关文档上看到,百度、谷歌搜索也寥寥无几。仅在TypeScript FAQ 找到相关描述。

有关类型系统的许多答案都提到了可替代性。 这是一个原则,即如果可以使用对象X代替某些对象Y,则XY的子类型。我们通常也说X可以分配给Y(这些术语在TypeScript中的含义略有不同,但是 区别在这里并不重要)。

这段描述很好理解,大体就是子类型可以用在父类型出现的地方。但实际涉及的TypeScript 使用场景,和这个词不是很契合,也许是语言的差异,中文含义不便于理解。

实际 Substitutability 解决的场景是:TypeScript 允许 function 作为回调函数时,入参个数、返回类型可以不符合方法签名。

回调 Function 入参比签名少

fetchResults 有一个参数,即回调函数。 该方法从某处获取数据,然后执行回调。 回调的方法签名有两个参数, statusCoderesults

function fetchResults(callback: (statusCode: number, results: number[]) => void) {
const results = [1,2,3];
...
callback(200, results);
}

我们用下面的方式调用 fetchResults,注意方法签名是不同的,它没有第二个参数 results

function handler(statusCode: number) {
// 业务处理
...
} fetchResults(handler); // ️

可以正常编译,没有任何错误或警告。 看起来有点奇怪,但细想一下,你一直在这么用。

Array.prototype.forEach 方法签名

    /**
* Performs the specified action for each element in an array.
* @param callbackfn A function that accepts up to three arguments. forEach calls the callbackfn function one time for each element in the array.
* @param thisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.
*/
forEach(callbackfn: (value: T, index: number, array: T[]) => void, thisArg?: any): void

实际使用:

let items = [1, 2, 3];
items.forEach(arg => console.log(arg));

在运行时,forEach使用三个参数(value、index、array)调用给定的回调函数,但大多数时候回调函数只使用其中的一个或两个参数。

那为什么不干脆将forEach 参数声明为可选。

forEach(callback: (element?: T, index?: number, array?: T[]))

如果声明为可选,由于回调的提供者不知道调用方何时会传递多少参数,将不得不检查各个参数,这显然不是你想要的。

function maybeCallWithArg(callback: (x?: number) => void) {
if (Math.random() > 0.5) {
callback();
} else {
callback(42);
}
}

声明非可选,是站在调用者的角度,保证按声明传递参数,可以兼容需要不同个数参数的回调函数;

这么处理的合理性在于,回调函数自身是最了解如何处理入参的,如果它不关心某些入参,它可以安全的忽略。

回调返回类型不匹配签名 return void

如果函数类型指定返回类型 void,则也接受具有不同的、更具体的返回类型的函数。同样,用前面的例子,这次增加handle的返回类型声明。

function handler(statusCode: number): {age:number}{
// 业务处理
...
return {"age": 4};
} fetchResults(handler); // ️

fetchResults 接受的回调函数返回类型是void,而这次的handler 返回{age:number}类型,依然正常编译。

你依然可以将callback结果赋值给一个变量,但仅仅限于声明语句,其他操作都将编译失败。

function fetchResults(callback: (statusCode: number, results: number[]) => void) {
const results = [1,2,3];
...
let didItWork = callback(200, results); // ️ 1)
console.log(didItWork); // ️
console.log(didItWork.age) //
didItWork = {"age": 4} ; //
} // 注意虽然编译报错,但不影响最后js执行,Playground 运行结果
[LOG]: {
"age": 4
}
[LOG]: 4

可能有人困惑既然void类型无法进行其他操作,为什么要允许1)处赋值void类型给变量。TypeScript 1.4语言规范 给出了如下说明:

注意:我们考虑过禁止声明Void类型的变量,因为它们没有用处。 但是,由于允许将Void作为泛型类型或函数的类型参数,因此不允许Void属性或参数是不可行的。

function foo<T>(param:T) {
let localParam:T = param;
}
foo<number>(3); // ️
foo<void>(undefined); // ️

这么处理的合理性在于,回调函数的调用者通过声明callback 返回void, 它最清楚也可以保证返回值不会被使用。

示例Playground

TypeScript 的 Substitutability的更多相关文章

  1. TypeScript: Angular 2 的秘密武器(译)

    本文整理自Dan Wahlin在ng-conf上的talk.原视频地址: https://www.youtube.com/watch?v=e3djIqAGqZo 开场白 开场白主要分为三部分: 感谢了 ...

  2. TypeScript为Zepto编写LazyLoad插件

    平时项目中使用的全部是jQuery框架,但是对于做webapp来说jQuery太过于庞大,当然你可以选择jQuery 2.*针对移动端的版本. 这里我采用移动端使用率比较多的zepto框架,他跟jqu ...

  3. TypeScript Vs2013 下提示Can not compile modules unless '--module' flag is provided

    VS在开发TypeScript程序时候,如果import了模块有的时候会有如下提示: 这种情况下,只需要对当前TypeScript项目生成设置为AMD规范即可!

  4. TypeScript

    TypeScript: Angular 2 的秘密武器(译)   本文整理自Dan Wahlin在ng-conf上的talk.原视频地址: https://www.youtube.com/watch? ...

  5. 打造TypeScript的Visual Studio Code开发环境

    打造TypeScript的Visual Studio Code开发环境 本文转自:https://zhuanlan.zhihu.com/p/21611724 作者: 2gua TypeScript是由 ...

  6. 转职成为TypeScript程序员的参考手册

    写在前面 作者并没有任何可以作为背书的履历来证明自己写作这份手册的分量. 其内容大都来自于TypeScript官方资料或者搜索引擎获得,期间掺杂少量作者的私见,并会标明. 大部分内容来自于http:/ ...

  7. Webstorm编译TypeScript

    下载webstorm 下载node.js编译器npm   Webstorm的安装很简单.但如果没有Java For Mac 环境打开Webstorm时会有提示,点击提示会跳转下载链接,下载安装就好. ...

  8. CSS3与页面布局学习总结(七)——前端预处理技术(Less、Sass、CoffeeScript、TypeScript)

    CSS不像其它高级语言一样支持算术运算.变量.流程控制与面向对象特性,所以CSS样式较多时会引起一些问题,如修改复杂,冗余,某些别的语言很简单的功能实现不了等.而javascript则是一种半面向对象 ...

  9. 使用TypeScript拓展你自己的VS Code!

    0x00 前言 在前几天的美国纽约,微软举行了Connect(); //2015大会.通过这次大会,我们可以很高兴的看到微软的确变得更加开放也更加务实了.当然,会上放出了不少新产品和新功能,其中就包括 ...

随机推荐

  1. 在.NET Core中使用Channel(二)

    在我们之前的文章中,看了一些非常简单的例子来说明Channel是如何工作的,我们看到了一些非常漂亮的特性,但大多数情况下它与其他某某Queue实现非常相似.让我们进入一些更高级的话题.我说的是高级,但 ...

  2. 第6章 未来的函数:生成器和promise

    目录 1. 生成器函数 1.1 定义生成器函数 1.2 迭代器对象 1.3 对迭代器进行迭代 1.4 把执行权交给下一个生成器 2. 使用生成器 2.1 用生成器生成ID 2.2 用迭代器遍历DOM树 ...

  3. 计算机考研复试真题 N阶楼梯上楼问题

    题目描述 N阶楼梯上楼问题:一次可以走两阶或一阶,问有多少种上楼方式.(要求采用非递归) 输入描述: 输入包括一个整数N,(1<=N<90). 输出描述: 可能有多组测试数据,对于每组数据 ...

  4. 【C++】《C++ Primer 》第八章

    第八章 IO库 一.IO类 1. 标准库定义的IO类型 头文件 作用 类型 iostream 从标准流中读写数据 istream, wistream 从流读取数据 ostream, wostream ...

  5. 【Flutter】可滚动组件之GridView

    前言 GridView可以构建一个二维网格列表.需要关注的是gridDelegate参数,类型是SliverGridDelegate,它的作用是控制GridView子组件如何排列(layout).Sl ...

  6. (二)数据源处理2-xlrd操作excel

    import xlrd3workbook = xlrd3.open_workbook('test_data.xlsx')sheet =workbook.sheet_by_name('Sheet1')p ...

  7. 【ASM】asm中添加 diskgroup

    环境:rhel5 Oracle10g rac 背景:在esxi中添加了一个20g的共享磁盘准备存放归档日志用 一.准备环境 1.添加共享磁盘并且格式化 #fdisk -l查看磁盘已经添加完成 #fdi ...

  8. 记忆中的像素块褪色了吗?用开源的体素编辑器重新做个 3D 的吧!

    本文适合对图形表现有兴趣的美术或者开发人员 本文作者:HelloGitHub-Joey 早期的的显示设备像素颗粒较大,使得显示内容的颗粒感严重,像是由一堆方块组成的.比较好的例子就是 GBA 上的游戏 ...

  9. [XAML] 使用 XAML 格式化工具:XAML Styler

    1. XAML 的问题 刚入门 WPF/UWP 之类的 XAML 平台,首先会接触到 XAML 这一新事物.初学 XAML 时对它的印象可以归纳为一个词:一坨. 随着我在 XAML 平台上工作的时间越 ...

  10. 如何在C#中使用MSMQ

    MSMQ (Microsoft消息队列)是Windows中默认可用的消息队列.作为跨计算机系统发送和接收消息的可靠方法,MSMQ提供了一个可伸缩.线程安全.简单和使用方便的队列,同时为你提供了在Win ...