TypeScript Handbook 2——接口1（翻译）

接口(Interfaces)

One of TypeScript's core principles is that type-checking focuses on the 'shape' that values have. This is sometimes called "duck typing" or "structural subtyping". In TypeScript, interfaces fill the role of naming these types, and are a powerful way of defining contracts within your code as well as contracts with code outside of your project.

实在水平有限，不知道怎么翻译。

大概的意思应该是，typescript对类型检查是对"形状"来判断的。用函数举个例子说，就是只要参数列表被调用的函数所包含，就算是匹配了。

你在项目内外编写的代码只要符合接口定义的协议，就都能识别。

我们的第一个接口

我们通过一个简单的例子来看接口是如何工作的：

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

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

The type-checker checks the call to 'printLabel'. The 'printLabel' function has a single parameter that requires that the object passed in has a property called 'label' of type string. Notice that our object actually has more properties than this, but the compiler only checks to that at least the ones required are present and match the types required.

调用'printLabel'时，类型检查器进行检查。'printLabel'函数需要传递一个参数，这个参数是一个对象(labelledObj)，并且有一个字符串的属性——"label"。

注意，我们的这个对象实际上可能不止这一个属性，但是编译器只会检查当前这个对象至少符合接口要求的类型，即包含一个label的字符串类型的属性。

我们再以同一个例子，这次使用一个接口来描述需要一个字符串类型的label属性：

interface LabelledValue {
  label: string;
}

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

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

The interface 'LabelledValue' is a name we can now use to describe the requirement in the previous example. It still represents having a single property called 'label' that is of type string. Notice we didn't have to explicitly say that the object we pass to 'printLabel' implements this interface like we might have to in other languages. Here, it's only the shape that matters. If the object we pass to the function meets the requirements listed, then it's allowed.

'LabelledValue'是接口的名字，这个接口用来描述前面那个例子的要求。它表示的仍然是一个叫做label的字符串类型的属性。

注意，我们没有像其他语言那样，明确说这个对象实现了LabelledValue接口。在这里，重要的只是“形状”(shape)。

如果这个对象符合函数的要求，那么就是允许的。

It's worth pointing out that the type-checker does not require that these properties come in any sort of order, only that the properties the interface requires are present and have the required type.

值得指出的是：类型检查并不要求属性的顺序，只要这个属性符合接口的要求，并且类型匹配，那么就是允许的。

可选属性(Optional Properties)

Not all properties of an interface may be required. Some exist under certain conditions or may not be there at all. These optional properties are popular when creating patterns like "option bags" where the user passes an object to a function that only has a couple properties filled in.

并不是所有的属性都是接口要求的。某些存在的条件不是必须的。当用户传递一个对象到一个只有具有一父类拥有的属性的函数时，这些可选属性很受欢迎。

下面是这个模式的例子:

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"});

Interfaces with optional properties are written similar to other interfaces, which each optional property denoted with a '?' as part of the property declaration.

有可选属性的接口在编码上与其他接口类似，每个可选属性在属性声明时用一个 '?'来表示。

The advantage of optional properties is that you can describe these possibly available properties while still also catching properties that you know are not expected to be available. For example, had we mistyped the name of the property we passed to 'createSquare', we would get an error message letting us know:

可选属性的优点是，您可以描述这些可能可用的属性，同时还可以检查您知道不需要使用的属性。例如假定传递给'createSquare'的属性名称拼写错误，则会得到下面错误消息：

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;  // Type-checker can catch the mistyped name here
  }
  if (config.width) {
    newSquare.area = config.width * config.width;
  }
  return newSquare;
}

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