TypeScript概要 | 字节青训营

看月亮的方源
233 阅读3分钟

1.TypeScript 对比 JavaScript

  1. 如下图所示，js和ts对比

image.png

  1. Ts带来的好处
  • 安全类型
  • 下一代js特性
  • 完善的工具链

2. TS基础

2.1 基础类型

  1. boolean、number、string 2.枚举 enum
  2. any、unknown、void
  3. never
  4. 数组类型[]：允许表示一个已知元素数量和类型的数组，各元素的类型不必相同。
  5. 元组类型 tuple

image.png

2.2 函数类型

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

image.png

2.3 interface

  1. 定义:接口是为了定义对象类型。接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。 2.特点
  • 可选属性: ?
  • 只读属性:readonly
  • 可以描述函数类型
  • 可以描述自定义属性

总结:接口非常灵活 duck typing

image.png

2.4 类

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

image.png

  1. 当成员被标记成private时，它就不能在声明它的类的外部访问。
  2. protected修饰符与private修饰符的行为很相似，但有一点不同，protected成员在派生类中仍然可以访问。
  3. 在TypeScript里，每个成员默认为public的。不仅在内部可以访问它，如何它的实例也可以在外部访问它
  4. 你可以使用readonly关键字将属性设置为只读的。 只读属性必须在声明时或构造函数里被初始化。

3.高级类型

  1. 联合类型 I

image.png

  1. 交叉类型 &,取并集的关系。同名类型取交集，同名的非基础类型会进行相关元素的组合。

image.png

  1. 类型断言arg：告诉编译器某个实例具体的编译类型
  • 两个用法：
  • 通过标识符的方式，进行属性前置的断言定义。
  • 通过arg方式

image.png 4. 类型别名 (type VS interface)

  • 定义:给类型起个别名
  • 相同点:
  1. 都可以定义对象或函数
  2. 都允许继承
  • 差异点:
  1. interface是TS用来定义对象，type是用来定义别名方便使用
  2. type可以定义基本类型，interface不行
  3. interface可以合并重复声明，type不行

5.泛型

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

5.1 泛型的基本使用

基本定义

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

image.png

5.2 基础操作符

  • ·typeof:获取类型

image.png

  • ·keyof: 获取所有键 image.png
  • ·in:遍历枚举类型

image.png

  • ·T[K]: 索引访问

image.png

  • ·extends:泛型约束

image.png

5.3 工具类型

  • ·Partial<T>:将类型属性变为可选
  • ·Required<T>:将类型属性变为必选
  • ·Readonly<T>:将类型属性变为只读

6.Ts实战

  • .declare:三方库需要类型声明文件
  • .dts:声明文件定义
  • 三方库TS类型包@types:
  • ·tsconfig.json:定义TS的配置
avatar
文章
阅读
粉丝