深入浅出TS |青训营

60 阅读2分钟

TS

image.png

TypeScript 可处理已有的 JavaScript 代码,并只对其中的 TypeScript 代码进行编译。

TypeScript 是一种给 JavaScript 添加特性的语言扩展。增加的功能包括:

  • 类型批注和编译时类型检查
  • 类型推断
  • 类型擦除
  • 接口
  • 枚举
  • Mixin
  • 泛型编程
  • 名字空间
  • 元组
  • Await

TS学习的必要性

  • 实现类型安全
  • 支持JS特性
  • 具有完善的工具链

TS基础

TS基础数据类型包括:
布尔boolean、数字number、字符串string;
枚举enum;
anyunknownvoid;
never;
数组类型[];
元组类型tuple

TS接口

接口是为了定义对象类型,非常灵活
所谓的对象类型,即描述具体的JS对象,是对所有的键值对的描述。

TS的类

TS的类写法和JS差不多,但增加了一些定义
特点:

  • 增加了public、private、protected修饰符

  • 抽象类:

    • 只能被继承,不能被实例化
    • 作为基类,抽象方法必须被子类实现
  • interface约束类,使用implements关键字

TS的高级类型

1.联合类型 |


let num:number | string

2.交叉类型 &


interface person {
    name: string
    age: num
}
type student = person & (grade:number)
const stu: student

3.类型断言

在运行时看类型定义情况,可以提前使用断言,告诉编译器这个类型有指定的类型,省去相关的类型推断,手动指定类型推断。

4.类型别名

TS的类型别名就是给类型起个别名
和接口interface相比较:
相同点:

  • 都可以定义对象或函数
  • 都允许继承

差异点:

  • interface是TS用来定义对象,type是用来定义别名方便使用
  • type可以定义基本类型,interface不行
  • interface可以合并并重复声明,type不行

TS泛型及使用场景

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


function print<T>(arg:T):T {
    console.log(arg)
    return arg
}
print<string>('hello')

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

  • 定义要使用的类型
  • 通过TS类型推断,自动推导类型

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

泛型基础操作符:

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

TypeScript 是 JavaScript 的超集,扩展了 JavaScript 的语法,因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改,TypeScript 通过类型注解提供编译时的静态类型检查。