TypeScript入门 | 青训营笔记

17 阅读3分钟

这是我参与「第五届青训营 」笔记创作活动的第3天。

这节课我们将介绍typescript的入门知识,对于有些小伙伴来说,相信即使没学过也有听过,近年来typescript成为越来越多前端开发者的选择,那么typescript到底是什么呢,这节课让我们一探究竟。

为什么选择TypeScript?

typescript相比JavaScript有以下优点:

一、typescript是静态类型语言,而JavaScript是动态类型。

动态类型:代码执行后才进行类型匹配。

静态类型:编译时就进行类型匹配。

静态语言有以下优点:

  • 可读性增强:基于语法解析TSDoc,ide增强
  • 可维护性增强: 在编译阶段暴露大部分错误
  • 多人合作的大型项目中,获得更好的稳定性和开发效率

二、typescript是JavaScript的超集

  • 包含于兼容所有Js特性,支持共存
  • 支持渐进式引入与升级

typescript和JavaScript都是弱类型语言。

弱类型语言:不同的数据类型可以进行操作,会强制进行类型转换;而强类型语言不会。

typescript基本语法

基础数据类型

typescript的基础数据类型和JavaScript基本一致,不同的是写法上typescript需要声明数据类型:

1.png

对象类型

typescript一般使用interface关键字进行对象声明,例如:

2.png

readonly:表示属性只可读,不可修改,如果修改会报错,如下所示;

?:表示属性是可选的,可以不存在;

使用[key :string]表示属性名变量,类似es6的语法,同时规定变量的类型;

3.png

函数类型

typescript的函数声明跟JavaScript类似,相当于在其基础上加上数据类型的约束,例如对于下面的函数

4.png

typescript的写法是:

5.png

另外,typescript也支持用interface进行函数声明,写法类似对象声明:

6.png

函数重载

下面的例子是一个简单的函数重载,其写法类似于JavaScript,对typescript也适用:

7.png

当然,typescript也有自己特有的重载写法,如下使用interface进行函数的声明及重载:

8.png

数组类型

typescript的数组声明有多种方式,下面我们介绍常见的4种:

  • “类型+方括号”表示
type IArr1 = number[];
  • 泛型表示
type IArr2 = Array<string | number | Record<string, number>>;

其中Record表示对象类型,<>内分别规定了key和value的类型。

  • 元组表示

可以逐一列举每个元素的数据类型:

type IArr3 = [number, number, string, string];
  • 接口表示
interface IArr4 {
    [key: number] : any;
}

typescript补充类型

void表示空类型。

any表示任意类型。

使用enum关键字可以声明枚举类型。

注意:枚举类型支持反向映射。

9.png

typescript泛型

typescript的泛型表示不预先指定具体的类型,而在使用的时候再指定,相当于把类型抽象成一个变量,类似C++里的对象模板。例如:

10.png

接口、类以及别名都支持泛型,他们的写法类似,例如:

11.png

泛型中还支持泛型约束,可以将泛型的类型限制在一定范围内,例如:

12.png

此外,泛型还支持指定默认类型:

13.png

类型别名&类型断言

通过type关键字可以为类型定义别名,例如:

14.png

typescript支持类型断言,在某些情况下,我们不希望编译器对类型进行检查报错,可以使用as关键字,断言类型为正确的,例如:

15.png

字符串/数字 字面量

typescript允许指定字符串和数字必须的固定值,有点类似枚举,例如:

16.png