【Hello,前端!】带你入门 TypeScript| 青训营笔记

77 阅读3分钟

这是我参与「第四届青训营 」笔记创作活动的第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初始化变量为一个未定义的值。
零类型nevernever 是其它类型(包括 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 {
  idnumber;
  namestring;
}
type Teacher {
  subjectstring;
  namestring;
}
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';
    }
}

简而言之,类型守卫就是为了根据具体类型进行分支,常用的分支方法包括 typeofinstanceOfin===!====!=等。