深入浅出的TypeScript|青训营笔记

33 阅读3分钟

TypeScript 与 JavaScript 两者的特性对比,主要表现为以下几点:

image.png TypeScript 是一种由微软开发的自由和开源的编程语言。它是 JavaScript 的一个超集,TypeScript 在 JavaScript 的基础上添加了可选的静态类型和基于类的面向对象编程

TypeScript基础 TS基础

  1. boolean、number(包括整数浮点数和负数)、string

  2. 枚举enum(通过枚举类型对枚举制做一些类型定义,常见的有数字枚举,还包含常量和异构枚举)

  3. any(一旦声明为any,则意味着关闭来ts的类型检查)、unknown(any的一个替代类型)、void(没有返回值)

  4. Never(永远没有返回值,常用于防御类型)

  5. 数组类型[]

  6. 元组类型tuple(表示一个已知元素数量和类型的数组,各元素的类型不必相同)

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

输出参数:参数支持可选参数和默认参数

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

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

TS中的接口 定义:为了定义对象类型

对象类型:具体描述一个js对象,是对所有键值对的描述

特点:可选属性:?

只读属性:readonly

可以描述函数类型

可以描述自定义属性

TS类 写法和JS差不多,增加了public,private,protected修饰符,

抽象类:抽象类只能在实例中使用(继承),不能直接被实例化,作为基类,抽象方法必须被子类实现

Interface约束类,使用implements关键字

Typescript高级类型: 1、交叉类型: 将多个类型合并成一个类型,新的类型将具有所有类型的特性,所以交叉类型特别适用对象混入的场景。“|”

2、联合类型: 声明的类型并不确定,可以为多个类型中的一个“&”

3、类型断言:允许我们设置值的类型并告诉编译器不要推断它

4、类型别名(type VS interface)

定义:给类型起个别名

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

差异点:

interface是TS用来定义对象,type是用来定义别名方便使用; 2.type可以定义基本类型,interface不行;

interface可以合并重复声明,type不行; TS泛型: 定义一个函数或类时,在一些情况下能够确定要使用的具体类型,而有些情况下无法确定其中要使用的具体类型(返回值、参数、属性的类型不能确定),此时泛型便能够发挥作用。

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

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

1.定义要使用的类型

2.通过TS类型推断,自动推导类型

泛型的作用是临时占位,之后通过传来的类型进行推导;

基础操作符: 1、typeof:获取类型

2、keyof:获取所有键

3、in:遍历枚举类型

4、T[K]:索引访问

5、extends:泛型约束

泛型工具类型-常用工具类型 1、Partial:将类型属性变为可选

2、Required:将类型属性变为必选

3、Readonly:将类型属性变为只读

4、Pick、Record…

TS实战-声明文件:

1、declare:三方库需要类型声明文件

2、.d.ts:声明文件定义

3、@types:三方库TS类型包

4、tsconfig.json:定义TS的配置