这是我参与「第四届青训营 」笔记创作活动的第12天
TypeScript 在如今的前端开发中越来越流行,TypeScript 因其更加规范的语法,更丰富的功能越来越收到前端开发者们的青睐,Angular、React、Vue 也陆续支持了 TS 开发。
TypeScript 现在也是前端开发者必备的一项技能了,今天就让我们一起来学习一下 TypeScript 吧。
基本数据类型
TypeScript 的基础语法和 JavaScript 是基本一致的,最明显的区别就在于 TypeScript 在声明变量、函数、类等情况下需要说明其数据类型。
// JavaScript
let num = 2
let ch = 'a'
// TypeScript
let num: number = 2
let ch: string = 'a'
| 数据类型 | 关键字 | 描述 |
|---|---|---|
| 任意类型 | any | 声明为 any 的变量可以赋予任意类型的值。 |
| 数字类型 | number | 数字,使用双精度 64 位浮点值。 |
| 字符串类型 | string | 字符串,使用单引号(')或双引号(")括起来的一段字符。也可以使用反引号来定义多行文本和内嵌表达式。 |
| 布尔类型 | boolean | 逻辑值,可以取 true 或 false。 |
| 数组类型 | 无 | 数组类型。 |
| 元组 | 无 | 元组类型限定了元素的数量和类型,对元组赋值时对应位置的数据类型需要和定义相同。 |
| 枚举 | enum | 枚举,定义一组特定的数值集合。 |
| 无类型 | void | 标识函数方法无返回值。 |
| 未定义 | undefined | 初始化变量为一个未定义的值。 |
| 零类型 | never | never 是其它类型(包括 null 和 undefined)的子类型,代表从不会出现的值。 |
变量声明
TypeScript 的变量命名规则与 JavaScript 一致:
- 变量名不能以数字开头
- 变量名可以由数字、字母、'_'和'$'
TypeScript 的变量声明遵循以下规则:
// 推荐的方式
var [变量名] : [类型] = 值
var [变量名] : [类型]
// 按照 JavaScript 的方式声明,则数据类型为 any
var [变量名] = 值
var [变量名]
高级用法
类型别名
我们可以通过type [别名] = [类型]的方式为类型添加别名,以创建自定义的数据类型,例如:
type numArr = Array<number>
类型断言
我们可以为一个值指定一个类型,即类型断言,语法结构如下:
<类型>值
值 as 类型
例如:
let str: string = '123'
let num: number = <number> <any> str
类型推断与类型转换的区别是,类型断言只是对类型进行了指定,而非真正的进行了底层数据类型的转换。
类型推断
在没有给出类型值时,TypeScript 会根据初始值来推断类型:
let num = 2
num = '3' // 编译报错,num 被设定为了 number 类型
联合类型
联合类型通过管道|为变量设置多种类型,使得变量可以赋值多种数据类型。
语法格式:
let [变量名]: Type1|Type2|Type3...
例如:
let union: number | string
union = 123
union = '123'
联合类型中的类型可以写为具体的值,这样就可以实现类似枚举的效果:
let gender: 'male' | 'female'
交叉类型
使用&连接两个数据类型可以将两个类型合二为一,使得该类型同时具备两种类型的特征。
type Student {
id: number;
name: string;
}
type Teacher {
subject: string;
name: string;
}
const people: Student & Teacher ={
id: 12,
subject: 'math',
name: 'zhangsan'
}
交叉类型与联合类型的区别在于,交叉类型将两个类型进行了合并,而联合类型只能取其中之一。
类型守卫
由于联合类型的使用,有时候我们不知道函数传入的参数的具体类型是什么,而我们又需要依据不同的参数类型执行不同的操作时,就需要用到类型守卫:
// 一个简单的类型守卫案例
function func(param: string| number): string {
if (typeof param === 'string') {
return 'string';
} else {
return 'number';
}
}
简而言之,类型守卫就是为了根据具体类型进行分支,常用的分支方法包括 typeof、instanceOf、in、===、!==、==、!=等。