与 interface 相比,type 的特点如下:
- 表达功能更强大,不局限于 object/class/function
- 要扩展已有 type 需要创建新 type,不可以重名
- 支持更复杂的类型操作
- type Tuple = [number, string];
- const a: Tuple = [2, 'sir'];
- type Size = 'small' | 'default' | 'big' | number;
- const b: Size = 24;
基本上所有用 interface 表达的类型都有其等价的 type 表达。但我在实践的过程中,也发现了一种类型只能用 interface 表达,无法用 type 表达,那就是往函数上挂载属性。
- interface FuncWithAttachment {
- (param: string): boolean;
- someProperty: number;
- }
-
- const testFunc: FuncWithAttachment = ...;
- const result = testFunc('mike'); // 有类型提醒
- testFunc.someProperty = 3; // 有类型提醒
extends 关键字
extends 本意为 “拓展”,也有人称其为 “继承”。在 TypeScript 中,extends 既可当作一个动词来扩展已有类型;也可当作一个形容词来对类型进行条件限定(例如用在泛型中)。在扩展已有类型时,不可以进行类型冲突的覆盖操作。例如,基类型中键 a 为 string,在扩展出的类型中无法将其改为 number。
- type A = {
- a: number
- }
-
- interface AB extends A {
- b: string
- }
- // 与上一种等价
- type TAB = A & {
- b: string
- }
泛型
在前文我们已经看到类型实际上可以进行一定的运算,要想写出的类型适用范围更广,不妨让它像函数一样可以接受参数。TS 的泛型便是起到这样的作用,你可以把它当作类型的参数。它和函数参数一样,可以有默认值。除此之外,还可以用 extends 对参数本身需要满足的条件进行限制。
在定义一个函数、type、interface、class 时,在名称后面加上<> 表示即接受类型参数。而在实际调用时,不一定需要手动传入类型参数,TS 往往能自行推断出来。在 TS 推断不准时,再手动传入参数来纠正。
- // 定义
- class React.Component<P = {}, S = {}, SS = any> { ... }
- interface IShowConfig<P extends IShowProps> { ... }
- // 调用
- class Modal extends React.Component<IModalProps, IModalState> { ... }
条件类型
除了与、或等基本逻辑,TS 的类型也支持条件运算,其语法与三目运算符相同,为 T extends U ? X : Y 。这里先举一个简单的例子。在后文中我们会看到很多复杂类型的实现都需要借助条件类型。
- type IsEqualType<A, B> = A extends B ? (B extends A ? true : false) : false;
- type NumberEqualsToString = IsEqualType<number, string>; // false
- type NumberEqualsToNumber = IsEqualType<number, number>; // true
环境 Ambient Modules
在实际应用开发时有一种场景,当前作用域下可以访问某个变量,但这个变量并不由开发者控制。例如通过 Script 标签直接引入的第三方库 CDN、一些宿主环境的 API 等。这个时候可以利用 TS 的环境声明功能,来告诉 TS 当前作用域可以访问这些变量,以获得类型提醒。
具体有两种方式,declare 和三斜线指令。
- declare const IS_MOBILE = true; // 编译后此行消失
- const wording = IS_MOBILE ? '移动端' : 'PC端';
用三斜线指令可以一次性引入整个类型声明文件。
- /// <reference path="../typings/monaco.d.ts" />
- const range = new monaco.Range(2, 3, 6, 7);
深入类型系统
基本类型
基本类型,也可以理解为原子类型。包括 number、boolean、string、null、undefined、function、array、字面量(true,false,1,2,‘a’)等。它们无法再细分。
复合类型 (编辑:晋中站长网)
【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!
|