深入浅出TypeScript|青训营笔记

红裂
128 阅读5分钟

本课程从TS基础入手，由基础类型一步步延伸到高级类型，通过示例来深入浅出的了解TypeScript的各种姿势。

为什么要学习TypeScript

根据老师的说法，由下表可以看出，TS在社区的活跃度呈明显上升趋势，而且使用TS的人越来越多，现在的很多工程对TS的使用也比较广泛

image.png

TypeScript VS JavaScript

根据下图和下表可以看出，TS的功能更多更强，TS是JS的扩展和超集，TS也能编译成JS运行，同时TS在编译环节就可以发现一些问题,支持静态代码检测，支持后端语言中的一些相关特性。

image.png

TypeScript带来了什么

  1. 类型安全
  2. 下一代JS特性
  3. 完善的工具链

image.png

TypsScript推荐

TS开源教程及应用

GitHub - dzharii/awesome-typescript: A collection of awesome TypeScript resources for client-side and server-side development. Write your awesome JavaScript in TypeScript

TS到JS在线编译

TypeScript: TS Playground - An online editor for exploring TypeScript and JavaScript (typescriptlang.org)

TypeScript基础

基础类型

  1. boolean、number（包含整数、浮点数、负数）、string
  2. 枚举enum
  3. any、unknown、void
  4. never（永远不存在值的类型，防御性编程场景会使用）
  5. 数组类型
  6. 元组类型tuple（是数组的特殊形式，需要显示的去表示数组中每一个元素）

函数类型

定义：TS定义函数类型时要定义输入参数类型和输出类型

输入参数：参数支持可选参数和默认参数

输出参数：输出可以自动推断，没有返回值时，默认为void类型

函数重载：名称相同但参数不同，可以通过重载支持多种类型

image.png

interface

定义：接口是为了定义对象类型

特点：

  • 可选属性：？
  • 只读属性：readonly
  • 可以描述函数类型
  • 可以描述自定义类型

总结：接口非常灵活

image.png

类

定义：写法和JS差不多，增加了一些定义

特点：

  • 增加了public（默认方法和属性都是public）、private（私有属性，继承类和示例都不能调用）、protected（受保护的，仅支持在继承类里被调用，生成的示例不可调用）修饰符

抽象类：

  • 只能被继承，不能被实例化
  • 作为基类，抽象方法必须被子类实现

interface约束类，使用implements关键字

TypeScript进阶

高级类型

  1. 联合类型 |：在一个类型定义上存在多个基础类型，那就需要使用联合类型进行and取值关系
  2. 交叉类型 &：想在某个对象类型上进行一个相关扩展，可以使用交叉类型来表示一个并集关系
  3. 类型断言：可以提前使用断言省去一些相关类型的推断，告诉编译器某个实例的具体类型
  4. 类型别名（type VS interface）
  • 定义：给类型起个别名
  • 相同点：
  1. 都可以定义对象或函数
  2. 都允许继承
  • 差异点
  1. interface是TS用来定义对象，type是用来定义别名方便使用；
  2. type可以定义基本类型，interface不行；
  3. interface可以合并重复声明，type不行；

泛型

什么时候需要泛型？

官方定义：

软件工程中，我们不仅要创建一致的定义良好的API，同时也要考虑可重用性。组件不仅能够支持当前的数据类型，同时也能支持未来的数据类型，这在创建大型系统时为你提供了十分灵活的功能。
在像C#和Java这样的语言中，可以使用泛型来创建可重用的组件，一个组件可以支持多种类型的数据。这样用户就可以以自己的数据类型来使用组件。

应用场景：

定义一个print函数，这个函数的功能是把传入的参数打印出来，再返回这个参数，传入参数的类型是string，函数返回类型为string。

想支持打印number类型？

在一些返回值上在string的情况下标识一个number，来实现两个类型的定义和输出的过程

想支持打印数组类型？任意类型？

使用泛型

基本使用

基本定义：

  1. 泛型的语法是菱形框里面写类型参数，一般用T表示；
  2. 使用时有两种方法指定类型：
  • （1）定义要使用的类型
  • （2）通过TS类型推断，自动推导类型
  1. 泛型的作用是临时占位，之后通过传来的类型进行推导；

泛型工具类型

基础操作符

  • typeof：获取类型
  • keyof：获取所有键
  • in：遍历枚举类型
  • T[K]：索引访问
  • extends：泛型约束

image.png

常用工具类型

  • Partial< T >：将类型属性变为可选
  • Required< T >：将类型属性变为必选
  • Readonly< T >：将类型属性变为只读
  • Pick、Record...

image.png

TypeScript实战

声明文件

  • declare：三方库需要类型声明文件
  • .d.ts：声明文件定义
  • @types：三方库TS类型包
  • tsconfig.json：定义TS的配置

泛型约束后端接口类型

image.png

总结

为什么学TS

  • TS是JS的超集
  • 增强了类型安全
  • 提高生产力

TS基础

  • 基础类型
  • 函数类型
  • interface
  • Class类

TS进阶

  • 高级类型
  • 泛型
  • 泛型工具类型

TS实战

  • 声明文件

  • 后端接口约束

嗯，大概就是这么多！感谢观看！

avatar
文章
阅读
粉丝