深入浅出TypeScript-0805|青训营笔记

82 阅读2分钟

为什么要学习TS

image.png

TypeScript

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

JavaScript

  • 一种脚本语言,用于创建动态网页

  • 动态弱类型语言

  • 只能在运行时发现错误

  • 变量可以被赋值成不同类型

TypeScript带来了什么?
    1. 类型安全
    2. 下一代JS特性
    3. 完善的工具链
  • 不仅仅是一门语言,更是生产力工具。

TS基础

基础类型

  1. boolean,number,string
  2. 枚举enum
  3. any,unknown,void
  4. never #防御性编程时会使用
  5. 数组类型 [ ]
  6. 元组类型tuple

函数类型

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

interface

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

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

高级类型

  • 联合类型|

  • 交叉类型&

  • 类型断言(省去相关类型推断,告诉编译器实例的具体类型)

    类型前置或arg方式

泛型

应用场景:定义一个print函数,函数功能是把传入的参数打印出来,再返回这个参数。传入参数的类型是string,函数返回类型是string。

想支持打印number类型?

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

任意类型:any or 泛型

基本定义:

  • 泛型的语法是<>里面写类型参数,一般用T表示;
  • 使用时有两种方法指定类型:
    • 定义要使用的类型;
    • 通过TS类型推断,自动推导类型;
  • 泛型的作用是临时占位,之后通过传来的类型进行推导;
function print<T>(arg:T):T{
    console.log(arg)
    return arg
}

print<string>('hello')//定义T为string
print(‘hello’)//TS为类型推断,自动推导类型为string
泛型基础操作符

typeof:获取类型

keyof:获取所有键

in:遍历枚举类型

T[k]:索引访问

extends:泛型约束

泛型常用工具类型

Partial:将类型属性变为可选

Required:将类型属性变为必选

Readonly:将类型属性变为只读

Pick,Record...

TS实战

声明文件

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

后端接口约束