第一模块：
课程名称：Vue3 + Typescript 从0到1开发通用基础组件
章节名称：4-1 ~ 4-5
讲师姓名：张轩
第二模块：
内容概述：
4-1 ~ 4-5 小节主要讲解了实战项目相关的内容，包括：需求分析、文件结构、代码规范等。
第三模块：
学习心得：
4-1 导学
typescript 作为 js 的超集，将类型系统带到了 js 的世界
4-2 需求分析
vue中写组件的最重要的能力
4-3 文件结构
4-4 样式解决方案
一般有两种：
基于组件库
基于样式库
常见样式库：提供各种事先定义好的css类名，用户直接使用这些内置的类名进行样式的粉饰
Bootstrap
tailwindcss
Foundation
4-5 开发流程
理想情况下，一个组件只干一件事，所以，组件的划分粒度是【功能】
组件开发最佳实践路径：
第一步：划分组件层级
第二步：开发静态版本（即：只有Html、CSS，没有js的交互)
补充：
二、TS基础类型
类型是TS最为核心的部分，使用TS声明变量时，都应该注明变量的类型，即： 所有的变量都需要有类型
1.TS支持的类型有：
8大类、15小类
2.布尔类型
eg：
格式：
作用域 变量名：类型 = 变量
3.数字类型
二进制数、十进制数、十六进制数都可以用 number 类型来表示。
eg：
4.字符串类型
双引号或者单引号表示字符串
eg：
模板字符串：
模板字符串使用【反引号】来代替普通字符串中的用双引号和单引号。模板字符串可以包含特定语法 ${expression} 的占位符，占位符内可以写变量名，模板字符串会进行变量值的解析。
5.void类型
一个函数没有返回值时，可以将其返回值定义为void
注意声明一个void类型的变量没什么用，因为void类型的变量只能赋值为undefined和null
eg：
6.null类型和undefined类型
TS中undefined和null类型是所有类型的子类型
项目 默认开启 --strictNullChecks （严格的Null检查）检测的， 如果将 tsconfig.json 中 strictNullChecks 选项设置为 false，下面这种操作不会报错，不过尽量不要这么做（因为这样做没什么意义）：
7.数组类型
TS中数组有两种表示方法：
方式一：元素类型后接上 []
eg：
方式二： 使用数组泛型 Array<元素类型>
eg：
混合各种元素类型：
8.any类型
使用场景：接收用户输入时，有时无法确定变量的类型，此时就可以使用any来指定变量类型，从而直接让它们通过编译阶段的检查。
eg：
注意如果一个数据是any类型，那么可以访问他的任意属性，即使这个属性不存在：
从上可知：any 类型几乎可以做任何操作，这样很容易编写类型正确但是执行异常的代码。
这不是TS使用的初衷，使用TS是为了代码的【健壮性】，所以要尽量减少 any 的使用。即：能不用就不用
9.object类型
object 表示非原始类型(non-primitive type)：
eg：
可以发现： 枚举、数组、元组和普通对象都是 object 类型。
10.容易混淆的点
TypeScript 中描述类型要用 小写，比如 boolean、number、string等；
大写开头的如 Boolean、Number、String 代表的是 JavaScript 的构造函数:
解析：
第 1 行，通过 new Number('10') 得到的是一个构造函数，本质是一个对象。
第 2 行，Number('10') 与 10 都是声明一个数字 10 的不同方式，本质就是一个数字。
第 4 - 5 行，instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。a 是一个对象，它的 __proto__ 属性指向该对象的构造函数的原型对象 Number，所以为 true。b 是一个数字，所以为 false。
__proto__ 是非标准属性，你也可以使用 Object.getPrototypeOf() 方法来访问一个对象的原型：【类就是原型，原型就是类】
11.小结
三、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：
解析：
1-3 行，是三种表达整数 9007199254740991 的方式，方式不同，含义相同，效果上完全一致。
BigInt 与 Number 的不同点：
* BigInt 不能用在 Math 对象中的方法。
* BigInt 和 Number 实例混合运算时，两者必须转换成同一种类型。
* BigInt 变量在转换为 Number 变量时可能会丢失精度。
eg：
3-4 行，最大精度就是这个容器已经完全满了，无论往上加多少都会溢出，所以这两个值是相等的。
所以：容器满了就不会在往里面装了，在往里面装就会'溢出'，一旦溢出，那多出的部分就会被【舍弃】
改成 BigInt:
3-4 行，bigint 类型就是用来表示那些已经超出了 number 类型最大值的整数值，也就是这个容器还没满，在此基础上加上两个不同的值，其结果不相等。
类型信息：
可以使用 typeof 检测数据类型， BigInt 对象返回 bigint:
typeof 操作符返回一个字符串，表示未经计算的操作数的类型，用来判断基础数据类型。
BigInt的运算符：
可以正常使用 +、-、*、/、**（乘方）、%（求余） 符号进行运算：
注意：
当使用 / 操作符时，会向下取整，不会返回小数部分：
Number和BigInt之间的比较：
补充：JS中的 == 和 ===
==用于一般比较，===用于严格比较
==在比较的时候可以转换数据类型
===严格比较，只要类型不匹配就bai返回flase
所以，从上面的代码运行结果可知，2n和2之间，只有数据的类型不同，其他的完全一致！！！
在比如：
补充：在JS中，0表示false
解析：
JS中， 除了明确的 true 和 false 两个 boolean 类型外，还支持【强制的将值转换为布尔值】， 比如 0 是假，10 是真。那么，同样的，0n 是假，10n 是真。
小结：
在 Number 与 BigInt 之间进行转换会损失精度【精度就是"支持的数据范围"】，建议：
即：对于BigInt能不用就不用
第四模块：
学习截图：
共同学习，写下你的评论
评论加载中...
作者其他优质文章
