TypeScript中的内联类型注解与接口

2019-04-28200次阅读TypeScript

接口

接口是TypeScript 的一个核心知识,它能合并众多类型声明至一个类型声明

interface Name {
  first: string;
  second: string;
}

let name: Name;
name = {
  first: 'John',
  second: 'Doe'
};

name = {
  // Error: 'Second is missing'
  first: 'John'
};

name = {
  // Error: 'Second is the wrong type'
  first: 'John',
  second: 1337
};

在这里,我们把类型注解:first: string + second: string 合并到了一个新的类型注解里 Name,这样能强制对每个成员进行类型检查。接口在 TypeScript中有很多方式来声明变量的结构

类可以实现接口

如果你希望在类中使用必须遵循的接口(类)或是别人定义的对象结构,可以使用implements关键字来确保兼容性

interface Point {
  x: number;
  y: number;
}

class MyPoint implements Point {
  x: number;
  y: number; // Same as Point
}

基本上在implements(实现)的存在下,该外部 Point 接口的任何更改都将导致代码库中的编译错误,因此可以轻松地使其保持同步:

interface Point {
  x: number;
  y: number;
  z: number; // New member
}

class MyPoint implements Point {
  // ERROR : missing member `z`
  x: number;
  y: number;
}

注意,implements限制了类实例的结构,即:

let foo: Point = new MyPoint();

像 foo: Point = MyPoint 这样并不是一回事。

注意并非每个接口都是很容易实现的

接口旨在声明 JavaScript 中可能存在的任意结构。

思考以下例子,其中可以使用 new 调用某些内容:

interface Crazy {
  new (): {
    hello: number;
  };
}

你可能会有这样的代码:

class CrazyClass implements Crazy {
  constructor() {
    return { hello: 123 };
  }
}

// Because
const crazy = new CrazyClass(); // crazy would be { hello:123 }

你可以使用接口声明所有的 JavaScript,甚至可以安全地从 TypeScript 中使用它们。但并不意味着你可以使用 TypeScript 类来实现它们。
 

 

内联类型注解

与创建一个接口不同,你可以使用内联注解语法注解任何内容::{ /*Structure*/ }:

let name: {
  first: string;
  second: string;
};

name = {
  first: 'John',
  second: 'Doe'
};

name = {
  // Error: 'Second is missing'
  first: 'John'
};

name = {
  // Error: 'Second is the wrong type'
  first: 'John',
  second: 1337
};

内联类型能为你快速的提供一个类型注解。它可以帮助你省去为类型起名的麻烦(你可能会使用一个很糟糕的名称)。然而,如果你发现需要多次使用相同的内联注解时,考虑把它重构为一个接口(或者是 type alias,它会在接下来的部分提到)是一个不错的主意。

上一篇: TypeScript中类型声明空间及变量声明空间  下一篇: TypeScript中函数参数可选参数,默认参数注解  

TypeScript中的内联类型注解与接口相关文章