深入浅出TyepScript|青训营笔记

84 阅读3分钟

这是我参与【第六届青训营】笔记创作活动的第6天~学习的内容是【深入浅出TypeScript】。

TypeScript是微软开发的一个开源的编程语言,通过在JavaScript的基础上添加静态类型定义构建而成。TypeScript通过TypeScript编译器或Babel转译为JavaScript代码,可运行在任何浏览器,任何操作系统。

本次课程从为什么要学习TS、TS基础、TS进阶和实战&工程向4个部分展开。

1 为什么要学习TypeScript?

TypeScript 与 JavaScript的对比:

截屏2023-05-15 上午9.34.55.png

TypeScript带来了类型安全、下一代JS特性和完善的工具链,它不仅仅是一门语言,更是生产力工具。

2 TypeScript基础

2.1 基础类型

截屏2023-05-15 上午9.41.25.png 包括以下六种:
1.boolean、number、string
2.undefined、null
3.any、unknown、void
4.never
5.数组类型[]
6.元组类型tuple

2.2 函数类型

截屏2023-05-15 上午9.41.37.png 定义:TS定义函数类型时要定义输入参数类型和输出类型(都要定义!!)
输入参数:参数支持可选参数和默认参数
输出参数:输出可以自动推断,没有返回值时,默认为void类型
函数重载:名称相同但参数不同,可以通过重载支持多种类型。

2.3 interface

截屏2023-05-15 上午9.41.51.png 定义:接口是为了定义对象类型
特点:
1.可选属性:?
2.只读属性:readonly
3.可以描述函数类型
4.可以描述自定义属性
总结:接口非常灵活

2.4 类

截屏2023-05-15 上午9.42.02.png 定义:写法和JS差不多,增加了一些定义
特点:
1.增加了public、private、protected修饰符
2.抽象类:只能被继承,不能被实例化;作为基类,抽象方法必须被子类实现
3.interface约束类,使用implements关键字

3 TypeScript进阶

3.1 高级类型

1.联合类型 |
2.交叉类型 &
3.类型断言
4.类型别名
(1)定义:给类型起个别名
(2)相同点:都可以定义对象或函数,都允许继承
(3)差异点:interface是TS用来定义对象,type是用来定义别名方便使用;type可以定义基本类型,interface不行interface可以合并重复声明,type不行

3.2 泛型

什么时候需要泛型?

截屏2023-05-15 上午9.47.55.png

截屏2023-05-15 上午9.48.01.png

3.2.1基本定义

截屏2023-05-15 上午9.48.50.png 1.泛型的语法是<>里面写类型参数,一般用T表示;
2.使用时有两种方法制定类型:
(1)定义要使用的类型;
(2)通过TS类型推断,自动推导类型
3.泛型的作用是临时占位,之后通过传来的类型进行推导。

3.2.2泛型工具类型

1.基础操作符

截屏2023-05-15 下午12.23.09.png

2.常用工具类型

截屏2023-05-15 下午12.24.38.png

4 TypeScript实战

4.1 声明文件

1.declare:三方库需要类型声明文件
2.d.ts:声明文件定义
3.@types:三方库TS类型包
4.tsconfig.json:定义TS的配置

4.2 泛型约束后端接口类型

截屏2023-05-15 下午12.26.40.png

5 个人总结

作为Java Script超集的TypeScript,它适用于任何规模的项目,TypeScript可以为大型项目带来更高的可维护性,以及更少的bug。通过本节课的学习,我对TypeScript基础部分有了一定的了解,各个类型的特点等等。