TypeScript 之 Interface

Interface

描述：用来描述对象的形状，能够被继承

常用语法 ( Common Syntax )

1. 描述普通对象

 interface JsonResponse {
  version:number;
  outOfStock ?:  boolean  ;
  readonly body: string;
  update: (retryTimes: number)  =>  void  ;
  update2(retryTimes: number):  void  
}
interface JsonResponse2 { [key: string]: number } 

2. 描述函数

上个例子中，我们描述的是一个对象中拥有的一些属性。Interface 也可以直接来描述一个函数。

因为在 JS 中，一切皆是对象，函数在 JS 中也是对象，可以拥有属性，并且可以被调用。

 interface JsonResponse {
  (): string;
  toFn: string
}
const fn: JsonResponse  = () =>  {
    return  'str' 
}
fn.toFn  = 'content'

3. 描述构造函数

还未搞懂...，有看到此随笔的朋友，推荐下相关链接?，感谢?‍

4. interface 的扩展

 //   接口扩展接口 
 interface X { x: number }
interface Point extends X { y: number }
  //   Point {x:numer;y:number} 

 //   也可扩展类型别名，同时可扩展多个 
type Y =  { y: number }
interface Point2 extends X, Y { z: number }
  //   Point2 {x:numer;y:number;z:number} 

接口重名也会扩展,后续属性声明必须属于同一类型，否则报错！

 interface Legged {
  numberOfLegs: number;
}
interface Legged {
  numberOfLegs:  123 ;
}

  //   报错，numberOfLegs 必须都为 number 

 //   ======= 在namespace 中也是如此 
 namespace Animals {
  export interface Legged {
    numberOfLegs: number;
  }
}
namespace Animals {
  export interface Legged {
    numberOfHands: number;
  }
}
  //   合并为 
 namespace Animals {
  export interface Legged {
    numberOfLegs: number;
    numberOfHands: number;
  }
} 

5. 附加注释，鼠标移入时编辑器会有附加注释

 interface JsonResponse {
  version: number
}
interface JsonResponse {
    /*  * In bytes   */  
  payloadSize: number
} 

 

 泛型（ Generics ）

interface APICall<R>  {
  data: R
}
  //   使用 
 interface JsonResponse { content: string };
const api: APICall <JsonResponse> = { data: { content: 'xxx'  } }
api.data.content 

泛型约束

 //   意味着要有 status 属性的类型才能使用 
interface APICall<R extends { status: number }>  {
  data: R
}
  //   使用 
 interface JsonResponse { content: string, status: number };
const api: APICall <JsonResponse> = { data: { content: 'xxx', status: 200  } }
api.data.status 

 重载（ Overloads ）

同样未搞懂...

Get & Set

可以描述对象的自定义 get 与 set 方法

 interface Ruler {
  get size(): number  |  string
  set size(value: number  |  string)
}

const ruler:Ruler  =  {
  size:  123 
}
ruler.size  = 456 
ruler.size  = '456' 
ruler.size    //   类型为 string  
//   Error  
//   ruler.size = false 

例子中 size 属性只能赋值 number 和 string 类型，由于第二次赋值为字符串，所以TypeScript自动推断返回值为 string，并不是 number | string

一致性类 （ Class conformance ）

可通过 implements 关键字来确保类的一致性

interface Syncable { sync():  void   }
class Account implements Syncable {
  sync() { }
}
  //   必须实现 sync 方法 

 

感谢观看，欢迎互相讨论与指导，以下是参考资料链接?

https://www.typescriptlang.org/static/TypeScript%20Interfaces-34f1ad12132fb463bd1dfe5b85c5b2e6.png

 

查看更多关于TypeScript 之 Interface的详细内容...