为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 【金秋打卡】第16天 Vue3 +...

【金秋打卡】第16天 Vue3 + Typescript 从0到1开发通用基础组件 6

2022.11.13 21:38 38浏览

第一模块:

课程名称:Vue3 + Typescript 从0到1开发通用基础组件

章节名称:4-1 ~ 4-5

讲师姓名:张轩


第二模块:

内容概述:

4-1 ~ 4-5 小节主要讲解了实战项目相关的内容,包括:需求分析、文件结构、代码规范等。


第三模块:

学习心得:

4-1 导学

typescript 作为 js 的超集,将类型系统带到了 js 的世界


4-2 需求分析

vue中写组件的最重要的能力


4-3 文件结构

spacer.gif


4-4 样式解决方案

一般有两种:

  • 基于组件库

  • 基于样式库


常见样式库:提供各种事先定义好的css类名,用户直接使用这些内置的类名进行样式的粉饰

  • Bootstrap

  • tailwindcss

  •  Foundation


4-5 开发流程

理想情况下,一个组件只干一件事,所以,组件的划分粒度是【功能】


组件开发最佳实践路径:

第一步:划分组件层级

第二步:开发静态版本(即:只有Html、CSS,没有js的交互)


补充:

二、TS基础类型

类型是TS最为核心的部分,使用TS声明变量时,都应该注明变量的类型,即: 所有的变量都需要有类型


1.TS支持的类型有:

spacer.gif

8大类、15小类


2.布尔类型

eg:

spacer.gif

格式:

作用域  变量名:类型 = 变量


3.数字类型

二进制数、十进制数、十六进制数都可以用 number 类型来表示。

eg:

spacer.gif


4.字符串类型

双引号或者单引号表示字符串

eg:

spacer.gif

模板字符串:

spacer.gif

模板字符串使用【反引号】来代替普通字符串中的用双引号和单引号。模板字符串可以包含特定语法 ${expression} 的占位符,占位符内可以写变量名,模板字符串会进行变量值的解析。


5.void类型

一个函数没有返回值时,可以将其返回值定义为void

spacer.gif


注意声明一个void类型的变量没什么用,因为void类型的变量只能赋值为undefined和null

eg:

spacer.gif


6.null类型和undefined类型

TS中undefined和null类型是所有类型的子类型

项目 默认开启 --strictNullChecks (严格的Null检查)检测的, 如果将 tsconfig.json  strictNullChecks 选项设置为 false,下面这种操作不会报错,不过尽量不要这么做(因为这样做没什么意义):

spacer.gif


7.数组类型

TS中数组有两种表示方法:

方式一:元素类型后接上 []

eg:

spacer.gif


方式二: 使用数组泛型 Array<元素类型>

eg:

spacer.gif


混合各种元素类型:

spacer.gif


8.any类型

使用场景:接收用户输入时,有时无法确定变量的类型,此时就可以使用any来指定变量类型,从而直接让它们通过编译阶段的检查。

eg:

spacer.gif


注意如果一个数据是any类型,那么可以访问他的任意属性,即使这个属性不存在:

spacer.gif

从上可知:any 类型几乎可以做任何操作,这样很容易编写类型正确但是执行异常的代码。

这不是TS使用的初衷,使用TS是为了代码的【健壮性】,所以要尽量减少 any 的使用。即:能不用就不用


9.object类型

object 表示非原始类型(non-primitive type):

eg:

spacer.gif

可以发现: 枚举、数组、元组和普通对象都是 object 类型。


10.容易混淆的点

  1. TypeScript 中描述类型要用 小写,比如 boolean、number、string等;

  2. 大写开头的如 Boolean、Number、String 代表的是 JavaScript 的构造函数:

spacer.gif

解析:

第 1 行,通过 new Number('10') 得到的是一个构造函数,本质是一个对象。

第 2 行,Number('10')  10 都是声明一个数字 10 的不同方式,本质就是一个数字。

第 4 - 5 行,instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。a 是一个对象,它的 __proto__ 属性指向该对象的构造函数的原型对象 Number,所以为 trueb 是一个数字,所以为 false

__proto__ 是非标准属性,你也可以使用 Object.getPrototypeOf() 方法来访问一个对象的原型:【类就是原型,原型就是类】

spacer.gif


11.小结

spacer.gif

三、TS BigInt

bigint 数据类型用来表示那些已经超出了 number 类型最大值的整数值,完美解决【 整数溢出问题


bigint是一种基本数据类型(primitive data type)

JavaScript 中用 Number 表示的最大整数为 2^53 - 1 可以写为 Number.MAX_SAFE_INTEGER。超出这个界限,就可以使用 BigInt来表示,它可以表示任意大的整数。


BigInt的基本使用:

1.调用函数 BigInt()

2. 一个整数字面量后加 n ,比如: 10n 

eg:

spacer.gif

解析:

1-3 行,是三种表达整数 9007199254740991 的方式,方式不同,含义相同,效果上完全一致。

BigInt  Number 的不同点:

* BigInt 不能用在 Math 对象中的方法。

* BigInt 和 Number 实例混合运算时,两者必须转换成同一种类型。

* BigInt 变量在转换为 Number 变量时可能会丢失精度。

eg:

spacer.gif

 3-4 行,最大精度就是这个容器已经完全满了,无论往上加多少都会溢出,所以这两个值是相等的。

所以:容器满了就不会在往里面装了,在往里面装就会'溢出',一旦溢出,那多出的部分就会被【舍弃】


改成 BigInt:

spacer.gif

3-4 行,bigint 类型就是用来表示那些已经超出了 number 类型最大值的整数值,也就是这个容器还没满,在此基础上加上两个不同的值,其结果不相等。


类型信息:

可以使用 typeof 检测数据类型, BigInt 对象返回 bigint:

spacer.gif

typeof 操作符返回一个字符串,表示未经计算的操作数的类型,用来判断基础数据类型。


BigInt的运算符:

可以正常使用 +-*/**(乘方)%(求余) 符号进行运算:

spacer.gif

注意: 

当使用 / 操作符时,会向下取整,不会返回小数部分:

spacer.gif


Number和BigInt之间的比较:

spacer.gif

补充:JS中的 == 和 ===

==用于一般比较,===用于严格比较

==在比较的时候可以转换数据类型

===严格比较,只要类型不匹配就bai返回flase

所以,从上面的代码运行结果可知,2n和2之间,只有数据的类型不同,其他的完全一致!!!

在比如:

spacer.gif

补充:在JS中,0表示false

解析:

JS中, 除了明确的 true 和 false 两个 boolean 类型外,还支持【强制的将值转换为布尔值】, 比如 0 是假,10 是真。那么,同样的,0n 是假,10n 是真。


小结:

 Number  BigInt 之间进行转换会损失精度【精度就是"支持的数据范围"】,建议:

spacer.gif

即:对于BigInt能不用就不用


第四模块:

学习截图:

https://img2.sycdn.imooc.com/6376519200012eb507640260.jpg

点击查看更多内容
0人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
全栈工程师
手记
粉丝
3
获赞与收藏
1

关注TA,一起探索更多经验知识

同主题相似文章浏览排行榜

风间影月说签约讲师

51篇手记,涉及Java、MySQL、Redis、Spring等方向

进入讨论

Tony Bai 说签约讲师

151篇手记,涉及Go、C、Java、Python等方向

进入讨论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消