9.TypeScript完全解读-TS中的类

创建class.ts文件,并在index.ts内引用

创建一个类,这个类在创建好后有好几个地方都标红了

这是tslint的一些验证规则

一保存就会自动修复,视频中是可以修复的  估计我自己的电脑不一定会自动修复,这个错误的主要问题是属性和方法前面要加修饰符

表示它是公共的方法和属性

常见实例并输出

输出的结果

同样可以使用继承来封装一些特性

eslint的限制,一个ts文件里面只能定义一个类

所以就需要去掉这个限制

创建你分类,子类继承了父类,在里面的构造函数内执行super方法,这样父类的name属性就继承过来了,这和我们在es6中创建的并没有什么区别,这里只是增加了一些类型的定义

修饰符

定义一个私有的属性 age

调用私有的属性就报错

在类上也访问不到这个属性

定义一个子类继承父类,调用super方法,打印super.age同样报错,通过super关键字只能访问基类的公共方法

protcted受保护

继承该类的子类可以访问

protcted修饰构造函数,就不能使用父类去创建实例,否则就会报错

但是可以通过子类去创建实例

readonly

在类里面可以适应readonly修饰符设置属性为只读的。设置只读的属性只能读取,但是不能修改

既是公共的又是只读的name属性,可以输出name的值

修改name的值。不能修改,因为他是只读的属性

参数属性

定义一个类A,定义了一个空的构造函数,但是tslint验证不通过。

tslint内关闭这个选项即可。为了测试用,一般在实际的项目开发过程中,尽量不要这么去操作

因为我们只是接收参数,并没有this上设置属性值

下面使用参数属性,给参数加上三个修饰符中的任意一个即可。

我们访问这个属性也是可以的

属性上加上private就不能再去访问这个属性的值了

因为这个属性是私有的

加上参数修饰符,既会帮你指定这个属性是什么类型的,而且还会把你的这个属性放到实例上

静态属性

age是一个静态的属性

一问你这个属性是静态的

直接访问类上的这个属性,是可以访问到的,age是类的静态属性,只有类本身能够使用

把age设置为私有的private,保存的时候,tslint会建议把私有的属性放在公有的方法后面。

所以一保存了文件,私有的属性就被自动放到pulic方法的后面,当然这是视频中的效果,我的机器不一定会这样。。。

我们再去访问p.age就会报错了

类本身去访问也不行

以上就是静态属性

可选类属性

22分46

name是必选的 所以这里必须传入name的属性。

public sex是参数属性

因为没有传值,但是sex属性还是存在的

存取器

相当于es6中的存值函数和取值函数,在设置 属性值的时候调用的函数,用法和写法和es6的没有区别

调用存值器

这里是因为用下划线的eslint不允许

我们在tslint里面把这个关掉

调用infoStr存值器函数,就会打印出这句话同事给私有属性_infoStr赋值

抽象类

通常被其他类继承,而不直接创建实例,抽象类和内部定义的抽象方法都是用abstract关键字

构造函数什么也不写,

在使用abstract构造一个抽象方法,方法需要修饰符。抽象类创建实例就会报错。无法创建抽象类的实例

它只能被类继承,定义一个man类继承people这个类

如果要实现printName这个方法就要在Man类里面去实现这个方法,这样就可以使用man去创建实例了

abstract不仅可以标记类和方法,可以标记类里面的存取器

P类继承了People,必须实现里面的抽象属性_name

同时还要实现里面的insideName方法。抽象方法和抽象存取器都不能包含实际的代码块

实例属性

当我们定义一个类,并创建实例后,这个实例的类型就是 它创建的类

也就是说我们这个类既是一个值也是一个类型

创建一个类People,P2实例化People这个类,

p2的类型就是people类

也可以明确的制定类型就是people,但是这里是可以省略的,会自动根据你创建实例的类去推断出你的类型

定义一个animal的类,内部也是一个空的构造函数和People相同,p2去实例化Animal类也是没有问题的

类、类型接口

定义接口,里面定义type属性,定义类去继承这个借口,用关键字 implements

实现接口,子类必须也要定义属性type

实现接口的类 给type属性前面加上 static关键字。就会报错了。

static修饰了智能通过类本身去访问。在实例上就不会有这个type属性。接口的监测的是使用该接口定义的类创建的实例。所以实例上没有这个type属性,所以这里就会报错

所以你要保证这个类创建的实例要符合这个接口

接口继承类

接口继承了类后,接口会继承这个类的成员,但是不包括实现。也就是只继承成员和他的成员类型,接口还会继承类的private和protected成员,当接口继承的类中包含这两个修饰符的成员时他的接口只可被这个类或者它的子类去实现

定义类A里面定义一个受保护的属性name

I继承类A,里面什么也不实现

I里面什么也不实现,必须关闭tslint的选项。这里关闭就允许里面什么也不定义的空接口了。

定义类B实现接口I,这里就报错了,I继承了类A的属性,但是我们在继承接口I的时候并没有定义name属性

在B里面实现name属性,还是会报错。这是因为peotected修饰符的特点

受保护的属性只能在继承这个类的的子类中去访问,B并不是继承了这个类A,所以这里没法使用这个name属性

类B继承类A再去实现接口I,这样才可以

在泛型中使用类类型

create函数传入的参数是一个类,返回的是一个类创建的实例

new()表示的是调用这个类的构造函数,他的类型也就是创建实例后的类型

也可以实行这个传入的类型

输出我们创建的实例

给这个类Infos加上构造函数,就会有输出了

可以直接访问age属性是没有问题的

转载于:https://www.cnblogs.com/wangjunwei/p/10824748.html

TypeScript完全解读(26课时)_9.TypeScript完全解读-TS中的类相关推荐

  1. TypeScript完全解读(26课时)_12.TypeScript完全解读-高级类型(1)

    12.TypeScript完全解读-高级类型(1) 高级类型中文网的地址:https://typescript.bootcss.com/advanced-types.html 创建新的测试文件 ind ...

  2. TypeScript完全解读(26课时)_2.TypeScript完全解读-基础类型

    2.TypeScript完全解读-基础类型 src下新建example文件夹并新建文件.basic-type.ts.截图中单词拼错了.后需注意一下是basic-type.ts 可以装tslint的插件 ...

  3. webpack 读取文件夹下的文件_TypeScript完全解读(26课时)_1.TypeScript完全解读-开发环境搭建...

    1.TypeScript完全解读-开发环境搭建 初始化项目 手动创建文件夹 D:\MyDemos\tsDemo\client-demo 用VSCode打开 npm init:初始化项目 然后我们的项目 ...

  4. 【TypeScript 专题】之 Ts 中的类(class)

    在 ES6 中,class (类)作为对象的模板被引入,可以通过 class 关键字定义类.它本质仍然是函数,它让对象原型的写法更加清晰.更像面向对象编程的语法. 在 TypeScript 中,除了实 ...

  5. TypeScript完全解读(26课时)_14.ES6和Nodejs中的模块

    创建modules文件夹,我们的文件都写在这里面 modules下面新建index.js文件,在index.ts内引入这个js文件 es6的模块 最主要的两个关键字 import和export imp ...

  6. 如何进阶TypeScript功底?一文带你理解TS中各种高级语法

    引言 TypeScript 的重要性我不在强调了,我相信仍然会有大多数前端开发者碰到复杂类型一概使用 any 处理. 我写这篇文章的目的就是为了让你告别 AnyScript ,文章告别晦涩的概念结合实 ...

  7. 北邮计算机发展,北邮计算机学科前景怎样?升学就业如何?26日教授亲自来解读...

    原标题:北邮计算机学科前景怎样?升学就业如何?26日教授亲自来解读 各位家长,同学 2020年高考百日誓师时吹响的号角早已过去--于即将面对高考考验的学子而言,时间的流逝感日渐强烈,手中的纸笔也越攥越 ...

  8. 奉劝学弟学妹,学完JavaScript就该学TypeScript了,让我们一起了解TypeScript和如何去搭建运行环境吧

    文章目录 定义 介绍 提示 ts与js的区别 搭建ts运行环境 安装node.js VSCode使用 安装TypeScript 定义 介绍 程序更容易理解--如变量的类型只有在程序运行时才确定,如函数 ...

  9. typescript(四)ts中函数的参数和返回值的类型定义

    前面我们讲到过ts的静态类型定义中的函数类型定义,先来回顾下: const fnA: () => string = () => { return '1' } const fnB: () = ...

  10. TypeScript学习(一)初识TypeSCript

    文章目录 1.安装TypeScript环境 2.构建一个TypeScript文件 3.类型注解 4.接口 5.类 6.基础类型 1.安装TypeScript环境 npm install -g type ...

最新文章

  1. Python符号计算库sympy使用笔记
  2. jsp 修改的员工select怎么_jdbc+jsp实现简单员工管理系统|chu
  3. Linux下Mysql的基本操作
  4. c 语言程序设计教程 沈显君 答案,CD3计算机实践《C/C++语言程序设计》报告模板2.doc...
  5. MySQL 高级 while循环
  6. 程序员面试金典 - 面试题 08.13. 堆箱子(DP)
  7. python爬虫lxml xpath测试
  8. mysql中括号_干货!Python与MySQL数据库的交互实战
  9. burst什么意思_为什么Windows/iOS操作很流畅而Linux/Android却很卡顿呢?
  10. django 1.8 官方文档翻译: 6-6-2 如何使用WSGI 部署
  11. Python导入标准库和扩展库对象的几种方式
  12. js 定时器_Node.js实战6:定时器,使用timer延迟执行
  13. hdu -1251 统计难题(字典树水题)
  14. android渐变布局,关于Android的径向渐变高级编程的实现
  15. 海康威视工业相机SDK的开发使用笔记
  16. 北大青鸟linux运维,北大青鸟幸福IT学院:Linux运维学习路线,实用Linux教程,推荐学习收藏...
  17. 如何在万网注册域名及域名解析?
  18. java时区和时间的关系_Java 时间、日期与时区的关系
  19. kettle连接不上es7_kettle常见问题解决
  20. “道”与“术”之关系

热门文章

  1. 拓端tecdat:matlab数据可视化交通流量分析天气条件、共享单车时间序列数据
  2. 拓端tecdat|R语言stan进行基于贝叶斯推断的回归模型
  3. 拓端tecdat|Python之LDA主题模型算法应用
  4. 拓端tecdat|R语言解决最优化问题-线性规划(LP)问题
  5. 浙江省单考单招计算机提前招,2018浙江省各校高职提前招生简章汇总及深度解析...
  6. Pytorch遍历DataLoader时报错BrokenPipeError: [Errno 32] Broken pipe
  7. 一些用CRF做图像语义分割的资源
  8. ICCV 2015 揭开152层神经网络的面纱
  9. 基础知识(四)C++常用函数.txt
  10. python基于混合多项式模型PCF实现数据曲线拟合