继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

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

杀入互联网江湖
关注TA
已关注
手记 58
粉丝 4
获赞 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:

http://img4.sycdn.imooc.com/633051f30001dd4305810257.jpg

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


any:

http://img1.sycdn.imooc.com/6330524b0001541005830137.jpg


2-7 数组和元组

数组:

http://img4.sycdn.imooc.com/633052520001f1f005830061.jpg


元组:起源于函数式编程

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

eg:

http://img1.sycdn.imooc.com/6330525d0001872705330032.jpg


2-8 Interface 接口

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


Interface:

  • 对象形状的描述

  • Duck Typing(长的像鸭子、叫的像鸭子,那就是鸭子)

eg:

http://img2.sycdn.imooc.com/633052640001844105850311.jpg

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

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

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


2-9 函数

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


JS中函数有两种写法:

  • 声明的写法

  • 函数表达式


声明写法:

http://img1.sycdn.imooc.com/6330526e00012a1f05760164.jpg


函数表达式:

http://img3.sycdn.imooc.com/633052750001065b05780166.jpg


函数也是一种类型:

http://img4.sycdn.imooc.com/63305282000119b805800242.jpg


用interface定义函数的类型:

http://img1.sycdn.imooc.com/6330528c000144e405800233.jpg


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


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

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

let str ='123'

会推导出str的类型为string


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

http://img1.sycdn.imooc.com/633052930001211e05790091.jpg


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

http://img1.sycdn.imooc.com/6330529d000186bc05820193.jpg

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

http://img1.sycdn.imooc.com/633052a500018f3405820167.jpg


2-11 枚举(Enum):定义常用的通用常量

eg:

http://img2.sycdn.imooc.com/633052ac0001214a05570248.jpg

ts编译成js:

http://img2.sycdn.imooc.com/633052b40001c0c505850248.jpg


常量枚举:可以提高性能

http://img1.sycdn.imooc.com/633052bb0001115b04690300.jpg

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


第四模块:

学习截图:

http://img1.sycdn.imooc.com/6330515900017ed407640706.jpg


打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP