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

最新文章

  1. 【iBeacon】iBeacon前沿初探技术备忘
  2. POJ 题目分类(转载)
  3. yii2.0 url 跳转
  4. Facebook抛弃了HTML5,微信却捧火了它
  5. CodeForces 689A -Mike and Cellphone
  6. 4th day
  7. 转: pthread_create()
  8. hdu1796 How many integers can you find
  9. 手把手带你走进MVP +Dagger2 + DataBinding+ Rxjava+Retrofit 的世界
  10. hbase snapshot 表备份/恢复
  11. ServiceHub.DataWarehouseHost.exe内存泄漏问题的处理
  12. cnblog项目--20190309
  13. learning makefile ?=
  14. JAVA相关技术
  15. [转]RPA流程自动化-Blueprism认证考试介绍
  16. [leetcode]Largest Rectangle in Histogram @ Python
  17. vip导致的serverConnection closed by foreign host问题
  18. PaodingAnalysis 提示 &quot;dic home should not be a file, but a directory&quot;
  19. NLayerAppV3--基础结构层(Cross-Cutting部分)
  20. PCL 库存在vtk的问题导致libproj.so链接错误

热门文章

  1. 【ceph】理解Ceph的三种存储接口:块设备、文件系统、对象存储
  2. 通过Thread Pool Executor类解析线程池执行任务的核心流程
  3. ASP.NET Core GRPC 和 Dubbo 互通
  4. GCC Arm 12.2编译提示 LOAD segment with RWX permissions 警告
  5. 手把手教你玩转 Gitea|使用 Helm 在 K3s 上安装 Gitea
  6. Pep9课下作业
  7. System.IO.FileSystemWatcher的坑
  8. Python学习三天计划-1
  9. Vue学习之--------深入理解Vuex、原理详解、实战应用(2022/9/1)
  10. Unexpected token u in JSON at position 0