本文已参与「新人创作礼」活动，一起开启掘金创作之路。

3.TypeScript常用类型

概述

TypeScript是JS的超集，TS提供了JS的所有功能，并且额外的增加了：类型系统。

所有的JS代码都是TS代码
JS有类型（比如：number/string等），但是JS不会检查变量的类型是否发生变化。而TS会检查。TypeScript类型系统的主要优势：可以显示标记出代码中的意外行为，从而降低了发生错误的可能性。

3.1.类型注解

实例代码：

let age:number = 18

说明：代码中的：number就是类型注解。

作用：为变量添加类型约束，比如，上述代码中，约定变量age的类型为number(数值类型)。

解释：约定了什么类型，就只能给变量赋值该类型的值，否则，就会报错。

3.2常用基础类型概述

可以将TS中的常用基础类型细分为两类：

JS已有类型

原始类型：number/string/boolean/null/undefined/symbol

对象类型：Object（包括，数组、对象、函数等对象）。
TS新增类型

联合类型、自定义类型（类型别名）、接口、元祖、字面量类型、枚举、void、any等

3.3原始类型

1.原始类型：number/string/boolean/null/undefined/symbol

特点：简单。这些类型，完全按照JS中类型的名称来书写

let age: number = 18
let myName: string = "啦啦啦"
let isLoading: boolean = false
let a: null = null
let b: undefined = undefined
let s: symbol = Symbol()

3.4数组类型

2.对象类型：Object（包括，数组、对象、函数等对象）。

特点：对象类型，在TS中更加细化，每个具体的对象都有自己的类型语法。

数组类型的两种写法：(推荐使用number[]写法)

let numbers: number[] = [1,2,3]
let string: Array<string> = ["a","b","c"]

需求：数组中既有number类型，又有string类型，这个数组的类型应该如何写？

let arr: (number | string)[] = [1,'a','c',2]

解释：| (竖线) 在TS中叫做联合类型（由两个或多个其他类型组成的类型，表示可以是这些类型中的任意一种）。

注意：这是TS中联合类型的语法，只有一根竖线，不要与JS中的或（||）混淆了。

3.5类型别名

类型别名：(自定义类型)：为任意类型起别名。

使用场景：当同一类型（复杂）被多次使用时，可以通过类型别名，简化该类型的使用。

type CustomArray = (number | string)[]
let arr1: CustomArray = [1,'a',3,'b']
let arr2: CustomArray = ['x','y',6,7]

解释：

使用type关键字来创建类型别名。
类型别名（比如，此处的CustomArray），可以是任意合法的变量名称。
创建类型别名后，直接使用该类型别名作为变量的类型注解即可。

3.6 函数类型

函数的类型实际上指的是：函数参数和返回值的类型。

为函数指定类型的两种方式：1单独指定参数、返回值的类型 2同时指定参数、返回值的类型

3.6.1.单独指定参数、返回值的类型：

function add(num1: number,num2: number):number{
    return num1 + num2
}

// 函数表达式的方式
const add = (num1: number,num2: number):number =>{
    return num1 + num2
}

3.6.2.同时指定参数、返回值的类型：

type CustomArray = (number | string)[]
let arr1: CustomArray = [1,'a',3,'b']
let arr2: CustomArray = ['x','y',6,7]

解释：当函数作为表达式时，可以通过类似箭头函数形式的语法来为函数添加类型。

注意：这种形式只适用于函数表达式。

3.6.3.void类型

如果函数没有返回值，那么，函数返回值类型为：void。

function greet(name: string): void{
    console.log("hello")
}

3.6.4.可选参数

使用函数实现某个功能时，参数可以传也可以不传。这种情况下，在给函数参数指定类型时，就用到可选参数了。比如，数组的slice方法，可以slice()也可以slice(1)还可以slice(1,3)。

function mySlice(start?:number,end?:number):void{
    console.log('起始索引：',start,'结束索引：',end)
}

可选参数：在可传可不传的参数名称后面添加？(问号)。

注意：可选参数只能出现在参数列表后面，也就是说可选参数后面不能再出现必选参数。

TypeScript学习2