TypeScript 中高级应用与完美实践

与 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’）等。它们无法再细分。

复合类型

（编辑：PHP编程网 - 黄冈站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!