[ TS 学习 - 前端与 HTML | 青训营笔记 ]

69 阅读3分钟

第九节 深入浅出TypeScript

一、为什么要学习TS

(一)TS 与JS 对比

TS里面包括JS

TypeScriptJavaScript
JavaScript的超集,用于解决大型项目的代码复杂性—种脚本语言,用于创建动态网页
强类型,支持静态和动态类型动态弱类型语言
可以在编译期间发现并纠正错误只能在运行时发现错误
不允许改变变量的数据类型变量可以被赋值成不同类型

(二)TS带来了什么

TS不仅仅是一门语言,更是生产力工具

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

二、TS基础

(一)TS 基础类型

  1. boolean、number、string
  2. undefined、null
  3. any、unknown、void
  4. never
  5. 数组类型 []
  6. 元组类型 tuple

(二)TS 函数类型

  1. 定义:TS定义函数类型时要定义输入参数类型和输出类型。
  2. 输入参数:参数支持可选参数和默认参数。
  3. 输出参数:输出可以自动推断,没有返回值时,默认为void类型。
  4. 函数重载:名称相同但参数不同,可以通过重载支持多种类型。

(三)interface

  1. 定义∶接口是为了定义对象类型
  2. 特点:
  • (1)可选属性:?
  • (2)只读属性:readonly
  • (3)可以描述函数类型
  • (4)可以描述自定义属性
  1. 总结:接口非常灵活duck typing

(四)类

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

三、TS 进阶

(一)高级类型

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

(二)泛型 - 基本使用

基本定义:

  1. 泛型的语法是令里面写类型参数,—般用T表示;
  2. 使用时有两种方法指定类型:
  • (1)定义要使用的类型
  • (2)通过TS类型推断,自动推导类型
  1. 泛型的作用是临时占位,之后通过传来的类型进行推导;

(三)泛型工具类型 - 基础操作符

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

(四)泛型工具类型 - 常用工具类型

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

四、TS实战

(一)声明文件

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