学习《深入浅出TypeScript》| 青训营

79 阅读4分钟

今天记录学习《深入浅出TypeScript》。TypeScript是JavaScript的超集,具有可选的类型并可以编译为纯JavaScript。从技术上讲TypeScript就是具有静态类型的 JavaScript 。

一、为什么要用TypeScript

Typescript 是对 JavaScript 的增强,它大大增强了代码的可读性和维护性,让我们编写出更加健壮的代码。其类型安全,具有下一代js特性,完善工具链。不仅仅是一门语言,更是生产力工具。

二、TS常用类型

①布尔类型(boolean)、数字类型(number)、字符串类型(string)

·布尔类型(boolean):最基本的数据类型就是简单的true/false值,在JavaScript和TypeScript里叫做boolean(其它语言中也一样)。

·数字类型(number):和JavaScript一样,TypeScript里的所有数字都是浮点数。 这些浮点数的类型是number。 除了支持十进制和十六进制字面量,TypeScript还支持二进制和八进制字面量。

·字符串类型(string):和JavaScript一样,可以使用双引号(")或单引号(')表示字符串。还可以使用模版字符串,它可以定义多行文本和内嵌表达式。 这种字符串是被反引号包围,并且以${ expr }这种形式嵌入表达式。

②枚举类型(enum)

enum类型是对JavaScript标准数据类型的一个补充。 使用枚举类型可以为一组数值赋予友好的名字。默认情况下,从0开始为元素编号。也可以手动的指定成员的数值。

③任意值类型(any)、unknown、void

·任意值类型(any):有时候,我们会想要为那些在编程阶段还不清楚类型的变量指定一个类型。这些值可能来自于动态的内容,比如来自用户输入或第三方代码库。这种情况下,我们不希望类型检查器对这些值进行检查而是直接让它们通过编译阶段的检查。那么就可以使用any类型来标记这些变量。

·void:某种程度上来说,void类型像是与any类型相反,它表示没有任何类型。 当一个函数没有返回值时,通常会见到其返回值类型是void。

④never

never类型表示的是那些永不存在的值的类型,用于返回 error 死循环,是任何类型的子类型,也可以赋值给任何类型。

⑤数组类型(array)

有两种方式可以定义数组。 第一种,可以在元素类型后面接上[],表示由此类型元素组成的一个数组;第二种方式是使用数组泛型,Array<元素类型>。

⑥元组类型(tuple)

元组类型允许表示一个已知元素数量和类型的数组,各元素的类型不必相同。

三、TS函数类型

1)函数类型

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

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

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

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

2)接口

定义:接口非常灵活,是为了定义对象类型

特点:

—可选属性:?

—只读属性:readonly

—可以描述函数类型

—可以描述自定义属性

3)类

定义:写法和JS差不多,增加了一些定义

特点:

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

—抽象类:①只能被继承,不能被实例化;②作为基类,抽象方法必须被子类实现

—interface约束类,使用implements关键字

四、进阶用法

1)联合类型

2)交叉类型

3)类型断言

类型断言就是手动指定一个类型的值。有两种形式:其一是“尖括号”语法,另一个为as语法。

4)类型别名

定义:给类型起个别名。

type和interface的异同:

①相同点:

·都可以定义对象或函数

·都允许继承

②差异点:

·interface是TS用来定义对象,type是用来定义别名方便使用

·type可以定义基本类型,interface不行

·interface可以合并重复声明,type不行

5)泛型

(1)基本定义:

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

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

①定义要使用的类型

②通过TS类型推断,自动推导类型

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

(2)泛型工具类型:

1、基本操作符

·typeof:获取类型

·keyop:获取所有键

·in:遍历枚举类型

·T[K]:索引访问

·extends:泛型约束

2、常用工具类型

·Partia:将类型属性变为可选

·Required:将类型属性变为必选

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

·Pick、Record...

五、声明文件

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

②.d.ts:声明文件定义

③@types:三方库TS类型包

④tsconfig.json:定义TS的配置

总而言之,TypeScript是JavaScript的超集,它能做JavaScript所做的一切,并且还有一些附加功能。使用TypeScript可以为JavaScript添加静态类型,静态类型意味着变量的类型在程序中的任何时候都不能被改变,它可以防止大量的bug。