【九月打卡】第21天 Vue3 + Typescript 从0到1开发通用基础组件

第一模块：

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

章节名称：1-1 ~ 2-11

讲师姓名：张轩

第二模块：

内容概述：

1-1 ~ 2-11小节主要介绍了TS和TS的相关语法，语法包括：TS的类型，数组和元组，interface的概念以及函数、类型推导、联合类型、类型断言等，最后介绍了枚举类型。

第三模块：

学习心得：

1-1 导学

19年、20年TS、Vue3被热议

Vue3全新的API：composition API

Vue3的源码完全使用TS开发

2-2 啥是TS

编程语言类型：

• 动态类型语言：数据类型的检查发生在运行期

• 静态类型语言：数据类型的检查发生在编译期

TS：

• JS ++

• 静态类型风格的类型语言

• 从es6 - es10 甚至esnext 都支持

• 兼容各种浏览器、完全开源

2-3 为啥要学TS

• 在大型项目中能够提供更好的语义化的表达

• 效率更高（基于TS的类型系统，IDE可以更好的进行代码间的跳转和补全）

• 编译期间能发现大部分的错误

• 对JS完全兼容

2-4 安装TS（类似安装Java）

TS因为有完善的类型系统，从而可以对【编译器】和【编辑器】进行增强，从而获得更完美的代码跳转和补全的conding快感。

在使用TS之前，用的是ES6作为开发语言，这时为了减少代码中的暗病错误，一般会引入ESLint作代码检查；有了TS后，其实ESLint就显的每那么必要了

补充：

nvm 管理node版本

软件在安装到一个机器上时会有两种策略：

1.高低版本安装互斥：一台机器中，一个软件只能安装一个版本的实例

2.高低版本安装兼容：一台机器中，一个软件可以安装各个版本的实例，至于环境变量手动管理下就可以了。

2-6 原始数据类型和Any类型

7中原始数据类型（值无法改变）：

Boolean、Null、Undefined、Number、BigInt、String、Symbol

eg：

undefined、null是所有类型的子类型

any：

2-7 数组和元组

数组：

元组：起源于函数式编程

能够将不同数据类型的数据聚合成一个组数，像这种数组就叫元组

eg：

2-8 Interface 接口

Interface在JS中是不存在的概念，所以，Interface只能用来做类型的静态检查，TS文件编译后Interface是不会被转换过去的。

Interface：

• 对象形状的描述

• Duck Typing（长的像鸭子、叫的像鸭子，那就是鸭子）

eg：

可以发现，TS中的interface和java中的interface是两个不同的概念，TS中的interface是一种“类的轻量定义——代表一种类型，同时指明类型中的属性”

ES6中开始出现【类】的概念，这个类和java中的类是一个意思，包含【属性】、【构造函数】、【方法】

可以发现概念和使用上还是比较重的，而interface就轻的多。

2-9 函数

js中函数是一等公民（地位和类的实例对象一样，可以作为参数传入传出，可以存入数组，可以被赋值给另外一个变量）

JS中函数有两种写法：

• 声明的写法

• 函数表达式

声明写法：

函数表达式：

函数也是一种类型：

用interface定义函数的类型：

在TS、Scala中冒号后面的都是在声明类型！！！

2-10 类型推论 联合类型 类型断言

类型推论：声明变量的时候如果没有明确的指定变量的类型，这时TS就会自动的进行【 类型推论】，eg：

let str ='123'

会推导出str的类型为string

联合类型：同时支持多种类型

类型断言：我，开发者，自己知道一定会是啥类型，由我开发者指定类型

使用【类型守护】改写上面的代码：

2-11 枚举（Enum）：定义常用的通用常量

eg：

ts编译成js：

常量枚举：可以提高性能

加个const就行，注意：只有常量值才能进行常量枚举

第四模块：

学习截图：