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

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

杀入互联网江湖
关注TA
已关注
手记 58
粉丝 4
获赞 1

第一模块:

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

章节名称:2-12 ~ 2-19

讲师姓名:张轩


第二模块:

内容概述:

2-12 ~ 2-19小节主要介绍了TS的泛型系统、类型别名、字面量、交叉类型相关的知识点,以及内置类型


第三模块:

学习心得:

2-12 泛型(Generics)1

号称TS中最难的部分

eg:

http://img4.mukewang.com/636bc0060001ed6307290134.jpg

泛型T


2-12 泛型(Generics)2 约束泛型

使用interface对泛型进行约束:

http://img1.mukewang.com/636bc00e0001ea0707570316.jpg


2-13 泛型(Generics)3 在类和接口中使用泛型

类中使用泛型:

http://img.mukewang.com/636bc0150001cc1f04400328.jpg


泛型的最大意义:类型的一致性和灵活性都具备

事先不指定具体的类型,但依然能保证前后类型的一致性!!!在使用的时候将类型动态的传入。


interface中使用类型:

http://img.mukewang.com/636bc01b0001065d07590219.jpg


2-15 类型别名,字面量,交叉类型

http://img.mukewang.com/636bc0230001dcfb06990161.jpg


类型别名:

http://img3.mukewang.com/636bc0310001656007260353.jpg


交叉类型:一种语法糖

http://img3.mukewang.com/636bc0390001657405820175.jpg


2-16 内置类

这些TS中的内置类,就相当于Java中的内置类一样,是TS官方提前定义好的,方便开发人员直接使用

http://img4.mukewang.com/636bc03f0001c58d05560119.jpg


浏览器提供了许多内置对象,比如:

document、window......


在TS中可以随意使用JS的最新语法,十分方便。


2-18 理解TS的配置文件tsconfig.json

tsconfig.json是TS项目的配置文件,里面的作用:

  • 指定待编译的文件

  • 定义编译项

默认的,TS配置文件的所在路径是当前 TS 项目的根路径


tsconfig.json 的配置项众多并且复杂。所有的选项可以参考官方文档:

https://www.typescriptlang.org/zh/tsconfig


eg:

http://img4.mukewang.com/636bc04600012dd703910479.jpg


compilerOptions 中的选项配置,这些配置会影响整个编译过程和编译结果:

  • module - 生成的 Javascript 模块形式:none、commonjs、amd、system、umd、es6、es2015 或 esnext

  • noImplicitAny - 存在隐式 any 时抛错 (默认为 false)

  • sourceMap - 生成 map 文件 (默认为 false)

  • declaration - 生成对应的 .d.ts 文件 (默认为 false)


补充:

1.元祖的表示和数组非常类似,只不过它将类型写在了里面 这就对每一项起到了限定的作用

2.类型断言 - TypeScript 类型断言用来告诉编译器你比它更了解这个类型不是类型转换,断言成一个联合类型中不存在的类型是会出现错误的

3.类型守卫,typeof 和 instanceof 关键字


第四模块:

学习截图:

http://img1.mukewang.com/636bbf840001216f07360377.jpg

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