TypeScript里的interface扩展,多继承以及对应的JavaScript代码

简介: TypeScript里的interface扩展,多继承以及对应的JavaScript代码

TypeScript


interface Shape {

   color: string;

}


interface Square extends Shape {

   sideLength: number;

}


let square = {};

square.color = "blue";

square.sideLength = 10;


1

2

3

4

5

6

7

8

9

10

11

12

13

对应生成的JavaScript:


var square = {};

square.color = "blue";

square.sideLength = 10;

1

2

3

TypeScript

interface Shape {

   color: string;

}


interface PenStroke {

   penWidth: number;

}


interface Square extends Shape, PenStroke {

   sideLength: number;

}


let square = {};

square.color = "blue";

square.sideLength = 10;

square.penWidth = 5.0;


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

对应的JavaScript代码:


var square = {};

square.color = "blue";

square.sideLength = 10;

square.penWidth = 5.0;

1

2

3

4

extends ___ = ___ syntax in typescript

export interface ActionReducer {

 (state: T | undefined, action: V): T;

}

1

2

3

It specifies the default type of V . so V can be either a class which extends Action or if not mentioned will be of type Action.


目录
相关文章
|
3天前
|
设计模式 JavaScript 前端开发
在JavaScript中,继承是一个重要的概念,它允许我们基于现有的类(或构造函数)创建新的类
【6月更文挑战第15天】JavaScript继承促进代码复用与扩展,创建类层次结构,但过深的继承链导致复杂性增加,紧密耦合增加维护成本,单继承限制灵活性,方法覆盖可能隐藏父类功能,且可能影响性能。设计时需谨慎权衡并考虑使用组合等替代方案。
17 7
|
3天前
|
JavaScript 前端开发
在 JavaScript 中,实现继承的方法有多种
【6月更文挑战第15天】JavaScript 继承常见方法包括:1) 原型链继承,利用原型查找,实例共享原型属性;2) 借用构造函数,避免共享,但方法不在原型上复用;3) 组合继承,结合两者优点,常用但有额外开销;4) ES6 的 class,语法糖,仍基于原型链,提供直观的面向对象编程。
12 7
|
18小时前
|
JavaScript 前端开发 Java
【JavaScript】ECMAS6(ES6)新特性概览(二):解构赋值、扩展与收集、class类全面解析
【JavaScript】ECMAS6(ES6)新特性概览(二):解构赋值、扩展与收集、class类全面解析
7 2
|
18小时前
|
设计模式 存储 JavaScript
【JavaScript】JavaScript对象设计哲学:八种模式塑造高效代码
【JavaScript】JavaScript对象设计哲学:八种模式塑造高效代码
10 5
|
18小时前
|
前端开发 JavaScript 安全
高级前端开发需要知道的 25 个 JavaScript 单行代码
1. 不使用临时变量来交换变量的值 2. 对象解构,让数据访问更便捷 3. 浅克隆对象 4. 合并对象 5. 清理数组 6. 将 NodeList 转换为数组 7. 检查数组是否满足指定条件 8. 将文本复制到剪贴板 9. 删除数组重复项 10. 取两个数组的交集 11. 求数组元素的总和 12. 根据指定条件判断,是否给对象的属性赋值 13. 使用变量作为对象的键 14. 离线状态检查器 15. 离开页面弹出确认对话框 16. 对象数组,根据对象的某个key求对应值的总和 17. 将 url 问号后面的查询字符串转为对象 18. 将秒数转换为时间格式的字符串 19.
8 3
高级前端开发需要知道的 25 个 JavaScript 单行代码
|
21小时前
|
JavaScript 安全 前端开发
TypeScript 基础学习笔记:interface 与 type 的异同
TypeScript 基础学习笔记:interface 与 type 的异同
4 0
|
1天前
|
JavaScript 前端开发
页面加载时执行特定的 JavaScript 代码
页面加载时执行特定的 JavaScript 代码
|
2天前
|
JavaScript 前端开发 Android开发
kotlin安卓在Jetpack Compose 框架下使用webview , 网页中的JavaScript代码如何与native交互
在Jetpack Compose中使用Kotlin创建Webview组件,设置JavaScript交互:`@Composable`函数`ComposableWebView`加载网页并启用JavaScript。通过`addJavascriptInterface`添加`WebAppInterface`类,允许JavaScript调用Android方法如播放音频。当页面加载完成时,执行`onWebViewReady`回调。
|
3天前
|
JavaScript 前端开发
JavaScript 继承的方式和优缺点
JavaScript 继承的方式和优缺点
|
5天前
|
JavaScript 前端开发 编译器
探讨TypeScript如何帮助JavaScript开发者避免这些常见错误,从而提高代码质量和开发效率
【6月更文挑战第13天】TypeScript,JavaScript的超集,通过添加静态类型检查和面向对象特性,帮助开发者避免常见错误,提升代码质量和开发效率。它能检测类型错误,防止运行时类型转变引发的问题;使用可选链和空值合并避免引用错误;通过枚举减少逻辑错误中的魔法数字;接口和泛型等特性提高代码可维护性。学习TypeScript对提升JavaScript开发质量有显著效果。
12 4