TypeScript 之 Interface
2024-10-20 13:51:54
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
最新文章
- 【iBeacon】iBeacon前沿初探技术备忘
- POJ 题目分类(转载)
- yii2.0 url 跳转
- Facebook抛弃了HTML5,微信却捧火了它
- CodeForces 689A -Mike and Cellphone
- 4th day
- 转: pthread_create()
- hdu1796 How many integers can you find
- 手把手带你走进MVP +Dagger2 + DataBinding+ Rxjava+Retrofit 的世界
- hbase snapshot 表备份/恢复
- ServiceHub.DataWarehouseHost.exe内存泄漏问题的处理
- cnblog项目--20190309
- learning makefile ?=
- JAVA相关技术
- [转]RPA流程自动化-Blueprism认证考试介绍
- [leetcode]Largest Rectangle in Histogram @ Python
- vip导致的serverConnection closed by foreign host问题
- PaodingAnalysis 提示 ";dic home should not be a file, but a directory";
- NLayerAppV3--基础结构层(Cross-Cutting部分)
- PCL 库存在vtk的问题导致libproj.so链接错误
热门文章
- 【ceph】理解Ceph的三种存储接口:块设备、文件系统、对象存储
- 通过Thread Pool Executor类解析线程池执行任务的核心流程
- ASP.NET Core GRPC 和 Dubbo 互通
- GCC Arm 12.2编译提示 LOAD segment with RWX permissions 警告
- 手把手教你玩转 Gitea|使用 Helm 在 K3s 上安装 Gitea
- Pep9课下作业
- System.IO.FileSystemWatcher的坑
- Python学习三天计划-1
- Vue学习之--------深入理解Vuex、原理详解、实战应用(2022/9/1)
- Unexpected token u in JSON at position 0