TypeScript 开发实战
梁宵
搜狗营销事业部高级架构师
34174 人已学习
新⼈⾸单¥59
课程目录
已完结/共 47 讲
TypeScript 开发实战
登录|注册
留言
26
收藏
沉浸
阅读
分享
手机端
回顶部
当前播放: 10 | 类(1):继承和成员修饰符
00:00 / 00:00
高清
  • 高清
1.0x
  • 2.0x
  • 1.5x
  • 1.25x
  • 1.0x
  • 0.75x
  • 0.5x
网页全屏
全屏
00:00
付费课程,可试看
01 | 重塑“类型思维”
02 | 类型基础(1):强类型与弱类型
03 | 类型基础(2):动态类型与静态类型
04 | 编写你的第一个TypeScript程序
05 | 基本类型
06 | 枚举类型
07 | 接口(1):对象类型接口
08 | 接口(2):函数类型接口
09 | 函数相关知识点梳理
10 | 类(1):继承和成员修饰符
11 | 类(2):抽象类与多态
12 | 类与接口的关系
13 | 泛型(1):泛型函数与泛型接口
14 | 泛型(2):泛型类与泛型约束
15 | 类型检查机制(1):类型推断
16 | 类型检查机制(2):类型兼容性
17 | 类型检查机制(3):类型保护
18 | 高级类型(1):交叉类型与联合类型
19 | 高级类型(2):索引类型
20 | 高级类型(3):映射类型
21 | 高级类型(4):条件类型
22 | ES6与CommonJS的模块系统
23 | 使用命名空间
24 | 理解声明合并
25 | 如何编写声明文件
26 | 配置tsconfig.json(1):文件选项
27 | 配置tsconfig.json(2):编译选项
28 | 配置tsconfig.json(3):工程引用
29 | 编译工具:从ts-loader到Babel
30 | 代码检查工具:从TSLint到ESLint
31 | 使用Jest进行单元测试
32 | 创建项目
33 | 组件与类型(1):函数组件与类组件
34 | 组件与类型(2):高阶组件与Hooks
35 | 事件处理与数据请求
36 | 列表渲染与路由
37 | Redux与类型
38 | 搭建服务端开发环境
39 | 列表的CRUD
40 | 导出Excel
41 | 搭建Vue开发环境
42 | 组件封装
43 | 组件发布
44 | 共存策略
45 | 宽松策略
46 | 严格策略
47 | 结课测试&结束语
本节摘要
登录 后留言

全部留言(26)

  • 最新
  • 精选
yshAnswer
“类成员的属性都是实例方法,不是原型属性,而类成员的方法都是实例方法” 这里是不是口误讲错了,类成员的方法明明就在原型上

作者回复: 是句口误,原话: “类成员的属性”都是实例属性,而不是原型属性;“类成员的方法”都是“实例”方法。 纠正为: “类的成员属性”都是实例属性,而不是原型属性,“类的成员方法”都是“原型”方法。

2019-07-18
59
Hurry
在 Typescript Playground,发现很奇怪的现象,下面的代码 class Husky extends Dog { constructor(name: string, public type: string) { super(name) this.type = type } } 转换后 class Husky extends Dog { constructor(name, type) { super(name); this.type = type; this.type = type; } } this.type = type 出现了两遍

作者回复: Husky 中的 this.color=color 可以删掉,参数加上public 相当于做了这个赋值。

2019-07-24
8
WL
我的js基础不太好, 请问一下老师怎样理解原型属性和原型方法,跟实例属性和实例方法有啥区别?

作者回复: JS 的继承方式是原型式继承,原型上的属性和方法是所有实例共享的,不需要共享的就放在构造函数中(也就是实例自己的属性和方法)。当调用实例的属性或方法时,先看实例自身有没有,如果没有就会沿着原型链查找。

2019-07-21
6
温宏杰
我想要写一个有很多方法的工具类, 单独地写在一个文件中代码会很长不利于维护,我应该如何去写呢.之前想用装饰器的模式但是绕不过函数签名未实现的检查.

作者回复: 类中如果有太多的方法,首先就要考虑这个设计是否合理。有几点建议: 1)按功能拆分成多个类 2)通过继承基类,减少子类的方法 3)看方法中是否存在能够拆分出来的独立逻辑,每个函数的职责尽量要单一 装饰器适用的场景是动态地为类添加新的能力,用在一个基础工具类中不是一个好的模式。

2019-07-21
6
KaKaKa
不是很清楚为什么要在类中额外定义 name: string ?在 constructor(name: string)不是已经定义过了吗?TS 为什么要求多一步定义?

作者回复: 构造函数中定义的是参数的类型,而不是类成员的类型,要区分开,下面这个定义更方便理解: class A { constructor(x: string) { this.name = x } name: string; }

2020-06-07
5
2
是方旭啊
关于派生类必须调用super,调用super之后才能使用this,这个大家都是这么说和用的,但是归根到底是因为什么呢?有说法是Class的继承跟之前js的原型继承不一样,现在Class继承后的子类没有this,需要用父类的this。但还是不太清楚,能解答一下或者分享一个比较权威且详尽的文章么?感谢。

作者回复: 举个例子来说明: 传统 JavaScript 的继承: function Animal(name) { this.name = name; } function Dog(name) { Animal.call(this, name); } ES6的继承: class Animal { constructor(name) { this.name = name; } } class Dog extends Animal { constructor(name) { super(name); } } 这里 super 的作用是调用父类 Animal 的构造函数来初始化子类 Dog,等价于 Animal.call(this, ...)。也就是说,只有相关的实例属性被绑定到 this 上后,才能调用 this.xxx。

2019-08-25
2
三省
let fsReader:FileReader = new FileReader() // let fsReader = new FileReader() fsReader.readAsDataURL(file) fsReader.onload = function (e:Event) { let result:string = <string>fsReader.result callback && callback(result) fsReader = null } 像这种fsReader 需要释放的情况,把它置为null,需要怎么处理,声明的时候么

作者回复: function readFile(file: Blob, callback?: (result: string) => void) { let fsReader: (FileReader | null) = new FileReader(); fsReader.readAsDataURL(file); fsReader.onload = function(e) { let result = <string>(<FileReader>fsReader).result callback && callback(result); fsReader = null; } }

2020-06-20
2
1
大可可
super 是代表父类的实例还是代表父类的构造函数

作者回复: 父类的实例

2020-02-08
2
1
lmran
在typescript中, 接口可以继承类, 而类是需要需要实现类的,总觉得这两者有什么冲突(比如:一个类A实现了自己的方法,这是一个接口继承了这个类, 同时又有一个类B继承了这个接口, 那么这个类B需要再次实现类A中已经实现的方法吗?), 而在java中, 就没有接口可以继承类的概念,能解释其中的原因吗?

作者回复: 你的意思是类B“实现”了这个接口吧?看下面的例子: class A { method() {} } interface I extends A {} // B必须实现method class B implements I { method() {} } // C是A的子类,就不用实现method class C extends A implements I {} 接口可以继承类,是为了从已知的类中直接抽离出成员结构,用作它用,比如去约束其他的变量。

2019-08-19
1
纪颖志
我注意到这么一个现象: 因为 JS 是基于原型的面向对象语言,所以 class Animal {} class Dog extends Animal {} 相当于是把 Animal.prototype 设为 Dog.prototype 的原型,也就是 Animal.prototype.isPrototypeOf(Dog.prototype) // true 但同时我也发现 Animal.isPrototypeOf(Dog) // true 这好像是 ES6 class 语法的特有行为,因为 Dog 本质上是一个函数,它的原型应该是 Function.prototype 才对,请问老师这样设计的目的是什么呢?

作者回复: 你要分清两条原型链: 1)构造函数的原型链:Dog -> Anima -> Function Dog.__proto__ === Animal // true Animal.__proto__ === Function.prototype // true Animal.isPrototypeOf(Dog) // true,表示 Dog 在 Animal 的原型链上 2)原型的原型链:Dog.prototype -> Animal.prototype -> Object.prototype Dog.prototype.__proto__ === Animal.prototype // true Animal.prototype.__proto__ === Object.prototype // true Animal.prototype.isPrototypeOf(Dog.prototype) // true, 表示 Dog.prototype 在 Animal.prototype 的原型链上

2019-08-05
1
收起评论