TypeScript学习指南第二章--接口(Interface)

时间：2022-05-23 11:50:11

接口(Interface)

TypeScript的核心机制之一在于它的类型检查系统(type-checker)只关注一个变量的"模型(shape)" 稍后我们去了解这个所谓的形状是什么东西这种机制我们常称为鸭子类型(duck typing),是动态类型的一种风格.在TypeScript中接口充当着命名这些类型的职责，同时也是一种强大的方式与你的代码内部或外部项目之间定义契约.

定义第一个接口

我们通过一个简单的例子来理解在TypeScript中接口是如何工作的:

function printLabel(labelledObj: {label: string}) {
  console.log(labelledObj.label);
}

var myObj = {size: 10, label: "Size 10 Object"};
printLabel(myObj);

在调用printLable的地方类型检查系统这个函数，它要求传入一个对象并且这个对象中有一个命名为label的属性并且被定义为字符串类型(string). 需要特别强调的是，在上面的代码中，我们传入的对象实际上并不是只有label这一个属性，但是在编译的时候TypeScript的类型检查系统只去检查传入的对象是否包含约定好的属性，并且属性的数据类型正确与否.

我们把上面的例子改写一下，这次我们使用接口来约束函数printLabel所传入的参数，接口中定义一个字符串类型命名为label的属性.

interface LabelledValue {
  label: string;
}

function printLabel(labelledObj: LabelledValue) {
  console.log(labelledObj.label);
}

var myObj = {size: 10, label: "Size 10 Object"};
printLabel(myObj);

这次我们使用接口LabelledValue去描述上一个例子中函数printLabel所要求传入的对象，它仍然代表要求传入一个对象并且这个对象中有一个字符串类型的属性命名为label. 通过上例我们可以发现在TypeScript中使用接口并不像在其他语言中那样需要显示的去继承该接口，在这里接口只是描述了一个预先定义好的"模型(shape)"，只要我们传入的这个对象中包含接口LabelledValue所定义好的属性，TypeScript的类型检查系统就认为传入的参数是合法的.

另外值得一提的是TypeScript的类型检查系统并不去检查传入的这个对象中属性的顺序，只要传入的这个对象中包含的属性能与接口中定义的属性相匹配就可以.

可选属性(Optional Properties)

在一些特定情况下，并非所有定义在接口中的属性都是有必要的. 可选属性这种模式在我们使用一些类似"option bags"的模式时是非常有用的:

interface SquareConfig {
  color?: string;
  width?: number;
}

function createSquare(config: SquareConfig): {color: string; area: number} {
  var newSquare = {color: "white", area: 100};
  if (config.color) {
    newSquare.color = config.color;
  }
  if (config.width) {
    newSquare.area = config.width * config.width;
  }
  return newSquare;
}

var mySquare = createSquare({color: "black"});

在定义一个含有可选参数的接口时和其它的接口非常相像，只需在属性的名字后追加一个问号(?).

可选属性的一个好处是，虽然可选属性可以被忽略，但当你使用一个可选属性时，TypeScript的类型检查系统依然会监测使用的是否正确.

interface SquareConfig {
  color?: string;
  width?: number;
}

function createSquare(config: SquareConfig): {color: string; area: number} {
  var newSquare = {color: "white", area: 100};
  if (config.color) {
    newSquare.color = config.collor;  // 类型检查系统可以检测出这里的输入错误.(collor并没有被定义在接口SquareConfig中)
  }
  if (config.width) {
    newSquare.area = config.width * config.width;
  }
  return newSquare;
}

var mySquare = createSquare({color: "black"});

函数类型(Function Types)

TypeScript中的接口可以描述很多在JavaScript中可定义类型，除了描述一个对象中的属性，也可以描述函数(有点像Delegate).

为了描述一个函数类型的接口，我们为这个接口声明一个函数签名, 看起来就像声明了一个只要参数列表和返回值而没有方法体的函数.

interface SearchFunc {
  (source: string, subString: string): boolean;
}

当定义好一个函数类型的接口后我们可以像使用其他接口那样去使用它. 下面的例子将像你展示如何声明上面这个接口的对象以及为它分配一个与之匹配的函数.

var mySearch: SearchFunc;
mySearch = function(source: string, subString: string) {
  var result = source.search(subString);
  if (result == -1) {
    return false;
  }
  else {
    return true;
  }
}

当为一个函数类型的接口赋值时，TypeScript的类型检查机制只会去检查这个给定函数的参数列表和返回值是否符合要求而并不检查参数的名称是否一致，所以我们可以把上面的列子改写成如下所示:

var mySearch: SearchFunc;
mySearch = function(src: string, sub: string) {
  var result = src.search(sub);
  if (result == -1) {
    return false;
  }
  else {
    return true;
  }
}

当为一个函数类型的接口赋值时，类型检查机制会逐个检查这个给定函数的参数列表中每个参数出现的位置与函数签名中对应位置的参数类型是否相同. 同时也会检查函数的返回类型是否匹配，在上面的例子中我们期待的返回类型是布尔类型(true或false)，如果我们赋值一个返回值为数字或字符串类型的函数，TypeScript将会警告我们说返回类型与接口SearchFunc中定义返回类型不匹配(return type doesn't match the return type described in the SearchFunc interface).

相关文章