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

2022/11/11 4:24:04

本文主要是介绍【金秋打卡】第12天 Vue3 + Typescript 从0到1开发通用基础组件 2,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

第一模块:

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

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

讲师姓名:张轩


第二模块:

内容概述:

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


第三模块:

学习心得:

2-12 泛型(Generics)1

号称TS中最难的部分

eg:

https://img4.sycdn.imooc.com/636bc0060001ed6307290134.jpg

泛型T


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

使用interface对泛型进行约束:

https://img1.sycdn.imooc.com/636bc00e0001ea0707570316.jpg


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

类中使用泛型:

https://img1.sycdn.imooc.com/636bc0150001cc1f04400328.jpg


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

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


interface中使用类型:

https://img1.sycdn.imooc.com/636bc01b0001065d07590219.jpg


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

https://img1.sycdn.imooc.com/636bc0230001dcfb06990161.jpg


类型别名:

https://img3.sycdn.imooc.com/636bc0310001656007260353.jpg


交叉类型:一种语法糖

https://img3.sycdn.imooc.com/636bc0390001657405820175.jpg


2-16 内置类

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

https://img4.sycdn.imooc.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:

https://img4.sycdn.imooc.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 关键字


第四模块:

学习截图:

https://img1.sycdn.imooc.com/636bbf840001216f07360377.jpg



这篇关于【金秋打卡】第12天 Vue3 + Typescript 从0到1开发通用基础组件 2的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程