初识 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

这里就不再深入研究





相关文章
|
2月前
|
存储 JavaScript
TypeScript三
在 TypeScript 中,数组可以通过类型定义,如 `number[]` 或 `string[]`。示例展示了数字和字符串数组的声明与访问。数组解构允许将数组元素赋值给多个变量。通过 `for...in` 循环可遍历数组。多维数组如 `number[][]` 存储嵌套数组。数组方法包括:`concat()` 连接数组,`every()` 检查所有元素是否满足条件,`filter()` 过滤符合条件的元素,`forEach()` 对每个元素执行回调,`indexOf()` 查找元素位置,`join()` 将数组转为字符串,`map()` 应用函数于每个元素并返回新数组
|
2月前
|
JavaScript 前端开发 开发者
TypeScript一
JavaScript开发迅速但维护成本高,适合小型项目,因其动态类型导致编辑器提示不全。TypeScript是JS超集,增加了类型系统,提高开发效率和代码质量。安装TypeScript需先安装Node.js,然后通过npm安装tsc。案例演示创建`.ts`文件,转换成`.js`并运行。TypeScript支持多种数据类型,如any、number、string等,并有严格变量声明和函数定义规则,包括函数重载和匿名函数。
|
2月前
|
存储 JavaScript 索引
TypeScript四
## 联合类型 联合类型使用`|`分隔,表示变量可为多种类型: ```c var val: string | number; val = 12; // OK val = &quot;Runoob&quot;; // OK `
|
9月前
|
JavaScript 前端开发 编译器
30分钟速成TypeScript
30分钟速成TypeScript
|
10月前
|
JavaScript
TypeScript
TypeScript
25 0
|
11月前
|
JavaScript
【TypeScript理解】
【TypeScript理解】
|
JavaScript 前端开发 数据库
TypeScript 期中考试现在开始
相信这段时间来,对 TypeScript 感兴趣的小伙伴们已经把这个神器给系统的学习了一遍了吧。如果计划开始学习但是还没有开始,或者没有找到资料的同学,可以看下我在之前文章中 前端进阶指南[1] 找一下 TypeScript 部分的教程,自行学习。
|
JavaScript 前端开发 开发工具
TypeScript初识
TypeScript初识
129 0