认识TypeScript-类型接口和命名空间

TypeScript的核心原则之一是对数据的结构进行类型检查。 它有时被称做“鸭式辨型法”或“结构性子类型化”。 在TypeScript里，接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。

接口

接口初探

下面通过一个简单示例来观察接口是如何工作的：

  1. function printLabel(labelledObj: { label: string }) {
  2.   console.log(labelledObj.label);
  3. }
  5. let myObj = { size: 10, label: "Size 10 Object" };
  6. printLabel(myObj);

类型检查器会检查printLabel的调用。 printLabel有一个参数，并要求这个对象参数有一个名为label类型为string的属性。 需要注意的是，我们传入的对象参数实际上会包含很多属性，但是编译器只会检查那些必需的属性是否存在，并且其类型是否匹配。 然而，有些时候TypeScript却并不会这么宽松，我们下面会稍做讲解。

下面我们重写上面的例子，这次使用接口来描述：必须包含一个label属性且类型为string：

  1. interface LabelledValue {
  2.   label: string;
  3. }
  5. function printLabel(labelledObj: LabelledValue) {
  6.   console.log(labelledObj.label);
  7. }
  9. let myObj = {size: 10, label: "Size 10 Object"};
  10. printLabel(myObj);

LabelledValue接口就好比一个名字，用来描述上面例子里的要求。 它代表了有一个 label属性且类型为string的对象。 需要注意的是，我们在这里并不能像在其它语言里一样，说传给 printLabel的对象实现了这个接口。我们只会去关注值的外形。 只要传入的对象满足上面提到的必要条件，那么它就是被允许的。

还有一点值得提的是，类型检查器不会去检查属性的顺序，只要相应的属性存在并且类型也是对的就可以。

可选属性

接口里的属性不全都是必需的。 有些是只在某些条件下存在，或者根本不存在。 可选属性在应用“option bags”模式时很常用，即给函数传入的参数对象中只有部分属性赋值了。

下面是应用了“option bags”的例子：

  1. interface SquareConfig {
  2.   color?: string;
  3.   width?: number;
  4. }
  6. function createSquare(config: SquareConfig): {color: string; area: number} {
  7.   let newSquare = {color: "white", area: 100};
  8.   if (config.color) {
  9.     newSquare.color = config.color;
  10.   }
  11.   if (config.width) {
  12.     newSquare.area = config.width * config.width;
  13.   }
  14.   return newSquare;
  15. }
  17. let mySquare = createSquare({color: "black"});

带有可选属性的接口与普通的接口定义差不多，只是在可选属性名字定义的后面加一个?符号。

可选属性的好处之一是可以对可能存在的属性进行预定义，好处之二是可以捕获引用了不存在的属性时的错误。 比如，我们故意将 createSquare里的color属性名拼错，就会得到一个错误提示：

  1. interface SquareConfig {
  2.   color?: string;
  3.   width?: number;
  4. }
  6. function createSquare(config: SquareConfig): { color: string; area: number } {
  7.   let newSquare = {color: "white", area: 100};
  8.   if (config.clor) {
  9.     // Error: Property 'clor' does not exist on type 'SquareConfig'
  10.     newSquare.color = config.clor;
  11.   }
  12.   if (config.width) {
  13.     newSquare.area = config.width * config.width;
  14.   }
  15.   return newSquare;
  16. }
  18. let mySquare = createSquare({color: "black"});

只读属性

一些对象属性只能在对象刚刚创建的时候修改其值。 你可以在属性名前用 readonly来指定只读属性:

  1. interface Point {
  2.     readonly x: number;
  3.     readonly y: number;
  4. }

你可以通过赋值一个对象字面量来构造一个Point。 赋值后， x和y再也不能被改变了。

  1. let p1: Point = { x: 10, y: 20 };
  2. p1.x = 5; // error!

TypeScript具有ReadonlyArray<T>类型，它与Array<T>相似，只是把所有可变方法去掉了，因此可以确保数组创建后再也不能被修改：

  1. let a: number[] = [1, 2, 3, 4];
  2. let ro: ReadonlyArray<number> = a;
  3. ro[0] = 12; // error!
  4. ro.push(5); // error!
  5. ro.length = 100; // error!
  6. a = ro; // error!

上面代码的最后一行，可以看到就算把整个ReadonlyArray赋值到一个普通数组也是不可以的。 但是你可以用类型断言重写：

  1. a = ro as number[];

readonly vs const

最简单判断该用readonly还是const的方法是看要把它做为变量使用还是做为一个属性。 做为变量使用的话用 const，若做为属性则使用readonly。

额外的属性检查

我们在第一个例子里使用了接口，TypeScript让我们传入{ size: number; label: string; }到仅期望得到{ label: string; }的函数里。 我们已经学过了可选属性，并且知道他们在“option bags”模式里很有用。

然而，天真地将这两者结合的话就会像在JavaScript里那样搬起石头砸自己的脚。 比如，拿createSquare例子来说：

  1. interface SquareConfig {
  2.     color?: string;
  3.     width?: number;
  4. }
  6. function createSquare(config: SquareConfig): { color: string; area: number } {
  7.     // ...
  8. }
  10. let mySquare = createSquare({ colour: "red", width: 100 });

注意传入createSquare的参数拼写为colour而不是color。 在JavaScript里，这会导致静默失败。

你可能会争辩这个程序已经正确地类型化了，因为width属性是兼容的，不存在color属性，而且额外的colour属性是无意义的。

然而，TypeScript会认为这段代码可能存在bug。 对象字面量会被特殊对待而且会经过 额外属性检查，当将它们赋值给变量或作为参数传递的时候。 如果一个对象字面量存在任何“目标类型”不包含的属性时，你会得到一个错误。

  1. // error: 'colour' not expected in type 'SquareConfig'
  2. let mySquare = createSquare({ colour: "red", width: 100 });

绕开这些检查非常简单。 最简便的方法是使用类型断言：

  1. let mySquare = createSquare({ width: 100, opacity: 0.5 } as SquareConfig);

然而，最佳的方式是能够添加一个字符串索引签名，前提是你能够确定这个对象可能具有某些做为特殊用途使用的额外属性。 如果 SquareConfig带有上面定义的类型的color和width属性，并且还会带有任意数量的其它属性，那么我们可以这样定义它：

  1. interface SquareConfig {
  2.     color?: string;
  3.     width?: number;
  4.     [propName: string]: any;
  5. }

我们稍后会讲到索引签名，但在这我们要表示的是SquareConfig可以有任意数量的属性，并且只要它们不是color和width，那么就无所谓它们的类型是什么。

还有最后一种跳过这些检查的方式，这可能会让你感到惊讶，它就是将这个对象赋值给一个另一个变量： 因为 squareOptions不会经过额外属性检查，所以编译器不会报错。

  1. let squareOptions = { colour: "red", width: 100 };
  2. let mySquare = createSquare(squareOptions);

要留意，在像上面一样的简单代码里，你可能不应该去绕开这些检查。 对于包含方法和内部状态的复杂对象字面量来讲，你可能需要使用这些技巧，但是大部额外属性检查错误是真正的bug。 就是说你遇到了额外类型检查出的错误，比如“option bags”，你应该去审查一下你的类型声明。 在这里，如果支持传入 color或colour属性到createSquare，你应该修改SquareConfig定义来体现出这一点。

函数类型

接口能够描述JavaScript中对象拥有的各种各样的外形。 除了描述带有属性的普通对象外，接口也可以描述函数类型。

为了使用接口表示函数类型，我们需要给接口定义一个调用签名。 它就像是一个只有参数列表和返回值类型的函数定义。参数列表里的每个参数都需要名字和类型。

  1. interface SearchFunc {
  2.   (source: string, subString: string): boolean;
  3. }

这样定义后，我们可以像使用其它接口一样使用这个函数类型的接口。下例展示了如何创建一个函数类型的变量，并将一个同类型的函数赋值给这个变量。

  1. let mySearch: SearchFunc;
  2. mySearch = function(source: string, subString: string) {
  3.   let result = source.search(subString);
  4.   return result > -1;
  5. }

对于函数类型的类型检查来说，函数的参数名不需要与接口里定义的名字相匹配。 比如，我们使用下面的代码重写上面的例子：

  1. let mySearch: SearchFunc;
  2. mySearch = function(src: string, sub: string): boolean {
  3.   let result = src.search(sub);
  4.   return result > -1;
  5. }

函数的参数会逐个进行检查，要求对应位置上的参数类型是兼容的。 如果你不想指定类型，TypeScript的类型系统会推断出参数类型，因为函数直接赋值给了 SearchFunc类型变量。 函数的返回值类型是通过其返回值推断出来的（此例是 false和true）。 如果让这个函数返回数字或字符串，类型检查器会警告我们函数的返回值类型与 SearchFunc接口中的定义不匹配。

  1. let mySearch: SearchFunc;
  2. mySearch = function(src, sub) {
  3.     let result = src.search(sub);
  4.     return result > -1;
  5. }

可索引的类型

与使用接口描述函数类型差不多，我们也可以描述那些能够“通过索引得到”的类型，比如a[10]或ageMap["daniel"]。 可索引类型具有一个 索引签名，它描述了对象索引的类型，还有相应的索引返回值类型。 让我们看一个例子：

  1. interface StringArray {
  2.   [index: number]: string;
  3. }
  5. let myArray: StringArray;
  6. myArray = ["Bob", "Fred"];
  8. let myStr: string = myArray[0];

上面例子里，我们定义了StringArray接口，它具有索引签名。 这个索引签名表示了当用 number去索引StringArray时会得到string类型的返回值。

TypeScript支持两种索引签名：字符串和数字。 可以同时使用两种类型的索引，但是数字索引的返回值必须是字符串索引返回值类型的子类型。 这是因为当使用 number来索引时，JavaScript会将它转换成string然后再去索引对象。 也就是说用 100（一个number）去索引等同于使用”100”（一个string）去索引，因此两者需要保持一致。

  1. class Animal {
  2.     name: string;
  3. }
  4. class Dog extends Animal {
  5.     breed: string;
  6. }
  8. // 错误：使用数值型的字符串索引，有时会得到完全不同的Animal!
  9. interface NotOkay {
  10.     [x: number]: Animal;
  11.     [x: string]: Dog;
  12. }

字符串索引签名能够很好的描述dictionary模式，并且它们也会确保所有属性与其返回值类型相匹配。 因为字符串索引声明了 obj.property和obj["property"]两种形式都可以。 下面的例子里， name的类型与字符串索引类型不匹配，所以类型检查器给出一个错误提示：

  1. interface NumberDictionary {
  2.   [index: string]: number;
  3.   length: number;    // 可以，length是number类型
  4.   name: string       // 错误，`name`的类型与索引类型返回值的类型不匹配
  5. }

最后，你可以将索引签名设置为只读，这样就防止了给索引赋值：

  1. interface ReadonlyStringArray {
  2.     readonly [index: number]: string;
  3. }
  4. let myArray: ReadonlyStringArray = ["Alice", "Bob"];
  5. myArray[2] = "Mallory"; // error!

你不能设置myArray[2]，因为索引签名是只读的。

类类型

与C#或Java里接口的基本作用一样，TypeScript也能够用它来明确或强制一个类去符合某种契约。

  1. interface ClockInterface {
  2.     currentTime: Date;
  3. }
  5. class Clock implements ClockInterface {
  6.     currentTime: Date;
  7.     constructor(h: number, m: number) { }
  8. }

你也可以在接口中描述一个方法，在类里实现它，如同下面的setTime方法一样：

  1. interface ClockInterface {
  2.     currentTime: Date;
  3.     setTime(d: Date);
  4. }
  6. class Clock implements ClockInterface {
  7.     currentTime: Date;
  8.     setTime(d: Date) {
  9.         this.currentTime = d;
  10.     }
  11.     constructor(h: number, m: number) { }
  12. }

接口描述了类的公共部分，而不是公共和私有两部分。 它不会帮你检查类是否具有某些私有成员。

类的静态部分和实例部分

当你在类上面使用接口时，你需要注意一个类是由两部分构成的：类的静态部分和实例部分。如果你的接口上面声明了构造器签名，然后将这个接口应用在类上，你会看到报错：

  1. interface ClockConstructor {
  2.     new (hour: number, minute: number);
  3. }
  5. class Clock implements ClockConstructor {
  6.     currentTime: Date;
  7.     constructor(h: number, m: number) { }
  8. }

这是因为一个类实现某个接口时，接口只检查类的实例部分，而constructor构造器方法是类的静态部分，因此它不包含在类型检查之内。

所以，我们其实只要直接操作类的静态部分就可以了。在下述例子中，我们定义2个接口，一个ClockConstructor给构造器使用，一个ClockInterface供实例方法使用。方便起见，我们再定义一个构造器函数createClock：

  1. interface ClockConstructor {
  2.     new (hour: number, minute: number): ClockInterface;
  3. }
  4. interface ClockInterface {
  5.     tick(): void;
  6. }
  8. function createClock(ctor: ClockConstructor, hour: number, minute: number): ClockInterface {
  9.     return new ctor(hour, minute);
  10. }
  12. class DigitalClock implements ClockInterface {
  13.     constructor(h: number, m: number) { }
  14.     tick() {
  15.         console.log("beep beep");
  16.     }
  17. }
  18. class AnalogClock implements ClockInterface {
  19.     constructor(h: number, m: number) { }
  20.     tick() {
  21.         console.log("tick tock");
  22.     }
  23. }

因为createClock的第一个参数是ClockConstructor类型，在createClock(AnalogClock, 7, 32)里，会检查AnalogClock是否符合构造函数签名。

接口继承

和类一样，接口也可以相互继承。 这让我们能够从一个接口里复制成员到另一个接口里，可以更灵活地将接口分割到可重用的模块里。

  1. interface Shape {
  2.     color: string;
  3. }
  5. interface Square extends Shape {
  6.     sideLength: number;
  7. }
  9. let square = <Square>{};
  10. square.color = "blue";
  11. square.sideLength = 10;

一个接口可以继承多个接口，创建出多个接口的合成接口。

  1. interface Shape {
  2.     color: string;
  3. }
  5. interface PenStroke {
  6.     penWidth: number;
  7. }
  9. interface Square extends Shape, PenStroke {
  10.     sideLength: number;
  11. }
  13. let square = <Square>{};
  14. square.color = "blue";
  15. square.sideLength = 10;
  16. square.penWidth = 5.0;

混合类型

先前我们提过，接口能够描述JavaScript里丰富的类型。 因为JavaScript其动态灵活的特点，有时你会希望一个对象可以同时具有上面提到的多种类型。

一个例子就是，一个对象可以同时做为函数和对象使用，并带有额外的属性。

  1. interface Counter {
  2.     (start: number): string;
  3.     interval: number;
  4.     reset(): void;
  5. }
  7. function getCounter(): Counter {
  8.     let counter = <Counter>function (start: number) { };
  9.     counter.interval = 123;
  10.     counter.reset = function () { };
  11.     return counter;
  12. }
  14. let c = getCounter();
  15. c(10);
  16. c.reset();
  17. c.interval = 5.0;

命名空间

第一步

我们先来写一段程序并将在整篇文章中都使用这个例子。 我们定义几个简单的字符串验证器，假设你会使用它们来验证表单里的用户输入或验证外部数据。

所有的验证器都放在一个文件里：

  1. interface StringValidator {
  2.     isAcceptable(s: string): boolean;
  3. }
  5. let lettersRegexp = /^[A-Za-z]+$/;
  6. let numberRegexp = /^[0-9]+$/;
  8. class LettersOnlyValidator implements StringValidator {
  9.     isAcceptable(s: string) {
  10.         return lettersRegexp.test(s);
  11.     }
  12. }
  14. class ZipCodeValidator implements StringValidator {
  15.     isAcceptable(s: string) {
  16.         return s.length === 5 && numberRegexp.test(s);
  17.     }
  18. }
  20. // 一个使用例子
  21. let strings = ["Hello", "98052", "101"];
  23. // 可以使用的校验器
  24. let validators: { [s: string]: StringValidator; } = {};
  25. validators["ZIP code"] = new ZipCodeValidator();
  26. validators["Letters only"] = new LettersOnlyValidator();
  28. // 每个strings是否都能找到对应的校验器
  29. for (let s of strings) {
  30.     for (let name in validators) {
  31.         let isMatch = validators[name].isAcceptable(s);
  32.         console.log(`'${ s }' ${ isMatch ? "matches" : "does not match" } '${ name }'.`);
  33.     }
  34. }

命名空间

随着更多验证器的加入，我们需要一种手段来组织代码，以便于在记录它们类型的同时还不用担心与其它对象产生命名冲突。 因此，我们把验证器包裹到一个命名空间内，而不是把它们放在全局命名空间下。

下面的例子里，把所有与验证器相关的类型都放到一个叫做Validation的命名空间里。 因为我们想让这些接口和类在命名空间之外也是可访问的，所以需要使用export。 相反的，变量 lettersRegexp和numberRegexp是实现的细节，不需要导出，因此它们在命名空间外是不能访问的。 在文件末尾的测试代码里，由于是在命名空间之外访问，因此需要限定类型的名称，比如 Validation.LettersOnlyValidator。

使用命名空间的验证器:

  1. namespace Validation {
  2.     export interface StringValidator {
  3.         isAcceptable(s: string): boolean;
  4.     }
  6.     const lettersRegexp = /^[A-Za-z]+$/;
  7.     const numberRegexp = /^[0-9]+$/;
  9.     export class LettersOnlyValidator implements StringValidator {
  10.         isAcceptable(s: string) {
  11.             return lettersRegexp.test(s);
  12.         }
  13.     }
  15.     export class ZipCodeValidator implements StringValidator {
  16.         isAcceptable(s: string) {
  17.             return s.length === 5 && numberRegexp.test(s);
  18.         }
  19.     }
  20. }
  22. // 一个例子
  23. let strings = ["Hello", "98052", "101"];
  25. let validators: { [s: string]: Validation.StringValidator; } = {};
  26. validators["ZIP code"] = new Validation.ZipCodeValidator();
  27. validators["Letters only"] = new Validation.LettersOnlyValidator();
  29. for (let s of strings) {
  30.     for (let name in validators) {
  31.         console.log(`"${ s }" - ${ validators[name].isAcceptable(s) ? "matches" : "does not match" } ${ name }`);
  32.     }
  33. }

分离文件

当应用变得越来越大时，我们需要将代码分离到不同的文件中以便于维护。

现在，我们把Validation命名空间分割成多个文件。 尽管是不同的文件，它们仍是同一个命名空间，并且在使用的时候就如同它们在一个文件中定义的一样。 因为不同文件之间存在依赖关系，所以我们加入了引用标签来告诉编译器文件之间的关联。 我们的测试代码保持不变。

Validation.ts

  1. namespace Validation {
  2.     export interface StringValidator {
  3.         isAcceptable(s: string): boolean;
  4.     }
  5. }

LettersOnlyValidator.ts

  1. /// <reference path="Validation.ts" />
  2. namespace Validation {
  3.     const lettersRegexp = /^[A-Za-z]+$/;
  4.     export class LettersOnlyValidator implements StringValidator {
  5.         isAcceptable(s: string) {
  6.             return lettersRegexp.test(s);
  7.         }
  8.     }
  9. }

ZipCodeValidator.ts

  1. /// <reference path="Validation.ts" />
  2. namespace Validation {
  3.     const numberRegexp = /^[0-9]+$/;
  4.     export class ZipCodeValidator implements StringValidator {
  5.         isAcceptable(s: string) {
  6.             return s.length === 5 && numberRegexp.test(s);
  7.         }
  8.     }
  9. }

Test.ts

  1. /// <reference path="Validation.ts" />
  2. /// <reference path="LettersOnlyValidator.ts" />
  3. /// <reference path="ZipCodeValidator.ts" />
  5. // Some samples to try
  6. let strings = ["Hello", "98052", "101"];
  8. // Validators to use
  9. let validators: { [s: string]: Validation.StringValidator; } = {};
  10. validators["ZIP code"] = new Validation.ZipCodeValidator();
  11. validators["Letters only"] = new Validation.LettersOnlyValidator();
  13. // Show whether each string passed each validator
  14. for (let s of strings) {
  15.     for (let name in validators) {
  16.         console.log(`"${ s }" - ${ validators[name].isAcceptable(s) ? "matches" : "does not match" } ${ name }`);
  17.     }
  18. }

当涉及到多文件时，我们必须确保所有编译后的代码都被加载了。 我们有两种方式。

第一种方式，把所有的输入文件编译为一个输出文件，需要使用—outFile标记：

  1. tsc --outFile sample.js Test.ts

编译器会根据源码里的引用标签自动地对输出进行排序。你也可以单独地指定每个文件。

  1. tsc --outFile sample.js Validation.ts LettersOnlyValidator.ts ZipCodeValidator.ts Test.ts

第二种方式，我们可以编译每一个文件（默认方式），那么每个源文件都会对应生成一个JavaScript文件。 然后，在页面上通过 <script>标签把所有生成的JavaScript文件按正确的顺序引进来，比如：

  1. <script src="Validation.js" type="text/javascript" />
  2. <script src="LettersOnlyValidator.js" type="text/javascript" />
  3. <script src="ZipCodeValidator.js" type="text/javascript" />
  4. <script src="Test.js" type="text/javascript" />