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 } // 接受字符串索引，值为number

2. 描述函数

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

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

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

3. 描述构造函数

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

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

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

 

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

 泛型（ Generics ）

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

泛型约束

// 意味着要有 status 属性的类型才能使用
interface APICall {
  data: R
}
// 使用
interface JsonResponse { content: string, status: number };
const api: APICall = { 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