TypeScript | 青训营笔记

83 阅读3分钟

重点

整体介绍:TS背景、优缺点、社区活动。

TS常用类型基本概念:基础类型、对象类型、接口、断言等。

进阶用法:类、泛型及使用场景。

工程向:1.代码检测、编译配置、tsconfig介绍。 2.工程中最佳实践、迁移工具。

一:为什么要学习TS

TS VS JS
    | TS                                   |           JS                 |

    | JS的超集,用于解决大型项目的代码复杂性 | 一种脚本语言,用于创建动态网络 |
    | 强类型,支持静态和动态类型            |动态弱类型语言                 |
    |可以在编译期间发现并纠正错误           |只能在运行时发现错误            |
    |不允许改变变量的数据类型               | 变量可以被赋值成不同的类型     |

TS带来了“类型安全”、“下一代JS的特性”、“完善的工具链”.

二:Ts的基础知识

(一).Ts的基础类型: 1.Boolean。 2.Null, Undefined。 null和undefined是所有类型的子类型,可以赋值给 任意类型的变量
undefined表示未定义的值,一个变量最原始的状态,例如声明了变量没有赋值
null是空值的意思,表示一个对象被人为的重置为空对象,相当于栈中的变量没有指向堆中的内 存对象。

3.any,unknowwn,viod。 4.never。 5.数组类型[]。 数组的项中不允许出现其他的类型; 有时候可以通过any类型来允许出现任意类型
类型+方括号的表示法 例如 number[], 这种类型的数组里面是不允许有除了number之外的类型 数组泛型 Array+ <类型> 例如 Array
接口表示数组, 利用索引签名
let list: number[] = [1, 2, 3];
let list: Array = [1, 2, 3];

6.元主类型 tupe。 数组是合并了相同类型的对象, 而元组Tuple合并了不同类型的对象

(二)TS的函数类型

1.定义:TS定义函数类型是要定义输入参数类型和输出类型

2.输入参数

3.输出参数

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

(三)interface 1.定义:接口是为了定义对象类型 2.特点:可选属性、只读属性readonly、可以描述函数类型、可以描述自定义属性 3.接口灵活 duck typing

(四)TS类: 比JS增加了一些定义: 1.增加了public、private、protect 2.抽象类: -只能被继承,不能被实例化 -作为基类,抽象方法必须被子类实现 3.interface约束类,使用implements关键字

TS进阶:

(一)高级类型:1.联合类型 | 2.交叉类型& 3.类型断言 4.类型别名(type VS interface) -定义:给类型取个别名 -相同点:都可以定义对象或函数、都允许继承 -差别:interface是TS用来定义对象,type是用来定义别名、type可以定义基本类型,interface不行、interface可以重复声明,type不行。

(二)泛型 定义:在软件中,不仅要创建API,还要考虑可重用性,组件不仅能够支持当前数据类型,同时还能支持未来的数据类型,为创建大型系统时为你提供了十分灵活的功能。

在C语言中和Java中,可以使用泛型来创建可重用的组件 一个组件可以支持多种类型的数据,这样用户可以用自己的数据类型来使用组件 格式:function print(arg:T):T{ //T是类型参数 console.log(arg) return arg } pringt('hello') 泛型的作用是临时占位,之后通过传来的类型进行推导。

(三)泛型工具类型

1.基础操作符:

type:获取类型

keyof:获取所有键

in:遍历枚举类型

T[K]:索引访问

extends:泛型约束

2.常用工具类型:

Partial:将类型属性变为可选

Required:将类型属性变为必选

Readonly:将类型属性变为只读 等等

TS实战

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

.d.ts:声明文件定义

@type:三方库TS类型包

tsconfig.json:定义TS的配置