深入浅出TypeScript从入门到应用 | 青训营笔记

75 阅读2分钟

一、TypeScript的优势

TypeScript&&JavaScript

TypeScript:

  • JavaScript的超集,用于解决大型项目的代码复杂性。
  • 强类型,支持静态和动态类型。
  • 可以在编译期间发现并纠正错误。
  • 不允许改变变量的数据类型。

JavaScript:

  • 一种脚本语言,用于创建动态网页。
  • 动态弱类型语言。
  • 只能在运行时发现错误。
  • 变量可以被赋值成不同类型。

TypeScript带来类型安全,下一代JS特性,完善的工具链。

二、TypeScript的基础

1.TS基础类型: boolean、number、string、undefined、null、any、unknown、void、never、数组类型、元组类型。

2.函数类型:

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

3.接口: 定义对象类型,特点是可选属性,只读属性,可以描述函数类型,可以描述自定义属性。

4.类:

  • 增加了public、private、protected修饰符。
  • 抽象类只能被继承,不能被实例化。
  • 作为基类,抽象方法必须被子类实现。
  • interface约束类,使用implements关键字。

三、TypeScript进阶

1.高级类型:

  • 联合类型|
  • 交叉类型&
  • 类型断言
  • 类型别名(type、interface)

相同点:都可以定义对象或函数,都允许继承

差异点:interface用来定义对象,type用来定义别名方便使用。type定义基本类型,interface合并重复声明。

2.泛型:一个组件可以支持多种类型的数据。

泛型的语法是<>里面写类型参数,一般用T表示;

使用时指定类型的两种方法:

  • 定义要使用的类型;通过TS类型推断,自动推导类型。
  • 泛型的作用是临时占位,之后通过传来的类型进行推导。

泛型工具类型

(1)基础操作符:

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

(2)常见工具类型:

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

四、TS实战

1.声明文件:

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

2.泛型约束后端接口类型

五、思考: TypeScript是javascript的超集。要在掌握javascript的基础上,从数据类型、类等方面区别和联系Typescript和javascript两种语言,在实际应用中熟悉typescript语言的特点。