初识 TypeScript 二。

简介: 初识 TypeScript 二。

三.extends 继承


学习过React的小伙伴一定对这个单词不陌生,我们创建一个类组件的时候往往就需要用到这个单词。

image.png

其实这里每次都是继承React.Component这个父类的。(我刚开始学习的时候以为这是固定写法呢,其实不然。)

四.type 约束对象类型


image.png

image.png

上图中xiaoming这个对象在声明中 定义了类型为person_1,那么小明的属性的数量和属性值的类型就已经确定,不允许多或者少。如上图我多了一个gender属性,就会报错。

五.interface 接口


1.接口可以定义一个的结构,定义一个类里需要有哪些属性和方法。 (不要在这里迷了,类 是定义实例化对象的结构)

2.接口中所有的属性都不允许有具体值

3.接口在定义对象中时,也是只定义对象的结构,接口本身不允许有具体值

4.接口中所有的方法,都不允许有逻辑运算.类似于抽象类里的抽象方法(接口和抽象类的不同是,抽象类里我可以给某个属性一个初始值,并且抽象类里可以有抽象方法也可以有具体逻辑运算的方法。而接口中不允许出现具体的值和 方法的方法体)

6.接口可以合并属性,下面是允许的。在被实现或者被继承的时候,实例属性为name age sex三个合♟

image.png

6.接口不仅可以用来定义类的结构,还可以定义对象结构,但是不能实例化对象(const xiaoming=new Myinter()是不允许的)要分清楚定义对象和实例化对象的区别。不要迷了。

image.png

下面是实例化对象(此处的用法和 type并无区别)

image.png

其实我刚开始到这一步的时候非常迷惑,这不是脱裤子放屁多此一举吗,我干嘛不直接class AA,然后设定构造器,然后实例化。为什么要先interface,然后class AA implements interface呢?

具体的使用场景有不同的应用方法,我能想到的就是约束子类的内容,不让子类多出一些其他属性。我举个不恰当的例子,假如你在设计一款射击游戏。你定义了一个接口,名字叫gun

image.png

等等其他属性,这是以下所有子枪必须拥有切不能多的属性。(你多了一个其他属性对其他枪来说不就不平衡了吗?除非充钱....)

然后枪的子类也必须且只能有这些属性。这相当于一个规范,非常类似与抽象类的概念。

image.png

六.泛型


这个就好像是给函数的参数,返回值设置一些限制,让函数的具体功能更加清晰,对于后期代码维护非常方便。

image.png

以这个函数为例子,你这样看会觉得啊,这不就是返回一直参数吗?但是你并不知道它要返回值的类型,也就是对于你后期维护来讲会很迷,不知道这个函数用的具体位置。

但是我也不想一开始就把这个函数写死了,比如下面,这样虽然很清晰,但是我如果要传入一个字符串呢?我是不是就得重新写一个函数 foo2 让参数是字符串类型呢

image.png

image.png

感觉这样也没必要,我就想根据我函数调用的时候我再设置参数的类型,那怎么办呢?

泛型的用处就来了。不要问为什么是<>这个扩起来,问就是规范!至于里面的T,只不过是一个代号而已,你就当是你数学中的 假设,假设 三角形的sin为X。

image.png

不一定非得是T,你随便起名字都行。不过就像循环里的i一样,我们约定先写T,P,也不一定,看项目怎么规定的吧。

image.png

这时候你就可以在你调用函数的时候,给参数赋值时,别忘了TS有自动检测的功能,忘记的去翻看我的第一篇内容的第一节。

image.png

ok现在我的T就是"number"类型

image.png

ok现在我的T就是字符串"string"类型

 

因为这是TS的自动检测功能,你还可以:在调用函数的时候直接设定T的类型,因为当你调用函数的时候,你已经非常明确你需要参数的类型是哪些值了。

下图就是我规定了number 我却给了一个字符串类型,那么就会报错.

image.png

T还可以继承与(extends) interface,class

image.png

image.png

这里就不再深入研究





相关文章
|
7月前
|
JavaScript 前端开发 安全
TypeScript五
TypeScript是面向对象的JavaScript超集,支持类、接口等OOP特性。类通过`class`定义,包括字段、构造函数和方法。例如,`Car`类有`engine`字段、构造函数和`disp`方法。类间可实现继承,如`Circle`继承`Shape`。TypeScript不支持多重继承,但允许多重继承链。`static`关键字定义静态成员,`instanceof`检查对象类型,访问控制修饰符(public, protected, private)管理访问权限。类能实现接口,如`AgriLoan`实现`ILoan`。 TypeScript对象是类型实例,
|
7月前
|
JavaScript 前端开发 开发者
TypeScript一
JavaScript开发迅速但维护成本高,适合小型项目,因其动态类型导致编辑器提示不全。TypeScript是JS超集,增加了类型系统,提高开发效率和代码质量。安装TypeScript需先安装Node.js,然后通过npm安装tsc。案例演示创建`.ts`文件,转换成`.js`并运行。TypeScript支持多种数据类型,如any、number、string等,并有严格变量声明和函数定义规则,包括函数重载和匿名函数。
|
7月前
|
存储 JavaScript 索引
TypeScript四
## 联合类型 联合类型使用`|`分隔,表示变量可为多种类型: ```c var val: string | number; val = 12; // OK val = &quot;Runoob&quot;; // OK `
|
7月前
|
JavaScript 前端开发
TypeScript二
JavaScript Number对象包含多种方法,如`toExponential()`将数值转化为指数形式,`toFixed()`保留指定位数的小数,`toLocaleString()`按本地格式显示数字,`toPrecision()`格式化数字到指定长度,`toString()`以指定基数表示数字,而`valueOf()`返回原始数值。此外,示例中还展示了Date对象的格式化方法。对于String对象,有`constructor`返回创建对象的函数,`length`获取字符串长度,`prototype`用于扩展对象,以及一系列如`charAt()`、`indexOf()
|
7月前
|
JavaScript 前端开发 Java
TypeScript
TypeScript是JavaScript的一个超集,简称ts,ts是能够完全兼容js的ts是一门静态类型的语言,js是动态类型的语言
63 0
|
JavaScript 前端开发 编译器
30分钟速成TypeScript
30分钟速成TypeScript
|
JavaScript
TypeScript(一)
TypeScript(一)
|
JavaScript 前端开发 安全
快速了解 TypeScript
快速了解 TypeScript
|
JavaScript 前端开发 数据库
TypeScript 期中考试现在开始
相信这段时间来,对 TypeScript 感兴趣的小伙伴们已经把这个神器给系统的学习了一遍了吧。如果计划开始学习但是还没有开始,或者没有找到资料的同学,可以看下我在之前文章中 前端进阶指南[1] 找一下 TypeScript 部分的教程,自行学习。
|
JSON JavaScript 前端开发
Typescript知识总结(1)
Typescript知识总结(1)
Typescript知识总结(1)