关于TypeScript Interface你需要知道的10件事

TypeScript接口的10种使用场景——可能只有20%的web开发人员完全掌握它们

TypeScript中的接口是一个非常灵活的概念。除了抽象类的部分行为外，它还经常用于描述“对象的形状”。

必需的属性
?

在定义接口时，需要使用?interface?关键字:

interface User {  name: string;  sex: string;}???

const user: User = {  name: "Bytefer",  sex: "male",};

在上面的代码中，我们定义了一个?User?接口。然后定义一个?user?变量，并将其类型设置为?User?类型。但是，如果给?user?变量赋值时如果缺少相关的属性，TypeScript编译器会提示相关的错误。例如，在下面的代码中，我们在赋值时缺少?sex?属性:

那么如何解决上述错误呢? 解决方案之一是在定义接口时使用???声明一些属性是可选的。

可选属性
?

interface User {  name: string;  sex?: string;}

let user: User = { // OK  name: "Bytefer",};?????user = { // Ok  name: "Bytefer",  sex: "male",};

这样在赋值是不管有没有?sex?属性就都不会报错了。

那么是否可以添加未声明的属性呢?

从上图可以看出，当使用对象字面量赋值时，包括未声明的?age?属性，也会出现错误。解决这个问题最简单的方法是在?User?类型中添加?age?属性:

interface User {  name: string;  sex?: string;  age: number;}

虽然这种解决方案可以解决问题，但是如果我们想要添加其他任意属性，这种方式就不是很好了。为了满足上述要求，我们可以使用索引签名。

索引签名
?

索引签名的语法如下:

键的类型只能是字符串、数字、符号或模板文字类型，而值的类型可以是任何类型。

现在我们理解了索引签名的语法，让我们来更新?User?类型:

interface User {  name: string;  sex?: string;  [propName: string]: any; // Index Signatures}

在更新了?User?类型，并添加了新的?age?和?email?属性之后，TypeScript编译器就不会提示错误了。

let user: User = {  name: "Bytefer",  sex: "male",  age: 30,  email: "bytefer@gmail.com"};

只读的属性
?

在web系统中，我们需要区分不同的用户，一般来说，我们会使用?id?属性来识别不同的用户。此属性由Web系统自动生成，用户不能修改。对于上面的场景，我们可以使用?readonly?修饰符来定义只读属性。

除了属性，对象还可以包含方法。当使用接口定义对象类型时，还可以声明同时存在于对象上的方法:

interface User {  id: string;  name: string;  say(words: string): void;}???let user: User = {  id: "6666",  name: "Bytefer",  say(words: string) {    console.log(words);  },};

调用签名
?

描述函数最简单的方法是使用函数类型表达式。这些类型在语法上类似于箭头函数:

const log: (msg: string) => void = (msg: string) => {  console.log(msg);};

log("Bytefer");

语法?(msg: string) => void?表示“具有一个名为?msg?的字符串类型参数的函数，该函数没有返回值”。当然，我们可以使用类型别名来命名函数类型:

type LogFn = (msg: string) => void;

const log: LogFn = (msg: string) => {  console.log(msg);};

如果我们想用属性描述一些可调用的东西，函数本身也是一个对象。那么函数类型表达式就不能满足这个要求。对于这种情况，我们可以在定义对象类型时使用调用签名:

需要注意的是，在声明调用签名时，还支持重载:??????

interface Logger {  type: string;  (msg: string): void;  (msg: string, timestamp: number): void  (msg: string, timestamp: number, module: string): void}

构造签名

除了直接调用函数外，还可以使用?new?操作符来调用函数，这些函数通常称为构造函数。我们可以通过在调用签名前添加?new?关键字来编写构造签名:

interface PointConstructor {  new (x: number, y: number): { x: number; y: number };}??????function createPoint(ctor: PointConstructor,   x: number = 0, y: number = 0) {  return new ctor(x, y);}??????class Point {  
? 
? constructor(public x: number, public y: number) {}}??????const zero = createPoint(Point);console.log(zero);

混合类型
?

因此，在定义接口时，我们可以同时使用调用签名和构造签名吗? 答案是肯定的，我们常用的?Date?对象，它的类型是?DateConstructor?，其中调用签名和构造签名都被使用:

declare var Date: DateConstructor;

在上面的代码中，除了调用签名和构造签名之外，还定义了?Date?构造函数的属性和方法。

通用接口
?

泛型类型也可以与接口一起使用。下面是一个通用接口。

interface KeyPair<T, U> {  key: T;  value: U;}

let kv1: KeyPair<number, string> = { key: 1, value: "Bytefer" };

扩展接口

接口可以扩展一个或多个接口。这使得编写接口变得灵活和可重用。

interface Point1D {  x: number;}interface Point2D extends Point1D {  y: number;}interface Point3D extends Point2D {  z: number;}???????const point1D = { x: 0 };const point2D = { x: 0, y: 0 };const point3D = { x: 0, y: 0, z: 0 };

除了扩展单个接口，TypeScript还允许我们扩展多个接口:???????

interface CanSay {   say(words: string) :void }??????interface CanWalk {  walk(): void;}??????interface Human extends CanSay, CanWalk {  name: string;}

扩展类
?

在声明接口时，我们可以扩展一个或多个接口。实际上，我们也可以扩展已声明的类:???????

class Point1D {  public x!: number;}??????interface Point2D extends Point1D {  y: number;}

const point2D: Point2D = { x: 0, y: 0 }

对于一个类，在声明该类时，可以同时实现多个接口:???????

interface CanSay {   say(words: string) :void }???????interface CanWalk {  walk(): void;}???????class Person implements CanSay, CanWalk {  constructor(public name: string) {}    public say(words: string) :void {    console.log(`${this.name} says：${words}`);    }    public walk(): void {    console.log(`${this.name} walk with feet`);  }}?

对于TypeScript开发者来说，接口和类型有很多相似之处，当然也有一些不同之处，需要根据场景灵活运用。

?欢迎关注公众号：文本魔术，了解更多