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
}

TypeScript  之 Interface

TypeScript  之 Interface

泛型( 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://itdw.cn/wp-content/uploads/2022/12/257304-wpLb6p.png?imageMogr2/thumbnail/1330×940

© 版权声明
好牛新坐标
版权声明:
1、IT大王遵守相关法律法规,由于本站资源全部来源于网络程序/投稿,故资源量太大无法一一准确核实资源侵权的真实性;
2、出于传递信息之目的,故IT大王可能会误刊发损害或影响您的合法权益,请您积极与我们联系处理(所有内容不代表本站观点与立场);
3、因时间、精力有限,我们无法一一核实每一条消息的真实性,但我们会在发布之前尽最大努力来核实这些信息;
4、无论出于何种目的要求本站删除内容,您均需要提供根据国家版权局发布的示范格式
《要求删除或断开链接侵权网络内容的通知》:https://itdw.cn/ziliao/sfgs.pdf,
国家知识产权局《要求删除或断开链接侵权网络内容的通知》填写说明: http://www.ncac.gov.cn/chinacopyright/contents/12227/342400.shtml
未按照国家知识产权局格式通知一律不予处理;请按照此通知格式填写发至本站的邮箱 wl6@163.com

相关文章