TypeScript 类型注解

复杂的类型：Array（数组）、Tuple（元组）、object

数组（Array）

数组的类型声明有两种方式：① 数组成员类型[]；② Array<数组成员类型>（Array 泛型）

//数组成员为 number 类型的数组，以下两种写法是一致的
let arr:number[] = [1,2,3]   
let arr2:Array<number> = [1,2,3]

🚨 注意：

数组类型声明必须同时声明成员类型，缺少成员类型声明是不允许的
```
arr:[] = [1,2,3] //Error 
```
数组成员类型必须保持一致
```
arr:number[] = [1,2,3,'str'] //Error: 不能将类型 string 分配给类型 nunber
```
可我就是想给数组里面放数字和字符串咋办，或者有时候会有 undefined 呀？其实也不是不行 🙄 给搞个类型别名把想要的类型联合在一起就好了 —— 联合类型下一次再展开研究哈。
```
type mix = string | number | undefined
arr:mix[] = [1,2,3,'str', undefined] //ok，因为都是 mix 类型嘛。
```

元组（Tuple）

元组类型用于表示一种特殊的数组：已知数组成员数量和类型的数组，且成员的类型不必保持一致。但成员类型需要与相应索引的类型保持一致（顺序对应）。

let x:[string, number];
let arr1 = ['str', 1];  //ok，个数和类型都匹配
let arr2 = [1, 'str']  //err，类型不匹配

元组类型特别适用于多值返回的场景，比如 React Hooks ：

const [state, setState] = useState([])

object

表示非原始类型（非 string、number、bigint、boolean、undefined、null、symbol），即可以表示对象、数组、函数等。

函数的类型声明（参数、返回值）

声明方式

在定义函数定义语句中分别添加参数、返回值的类型声明：

const test = (x, y) => { 
    return x + y
}
const test = (x:number, y:number):number => {
    return x + y
}

使用类型别名 type 进行函数类型定义

//上述的例子又可以写成这种方式
type myFn = (x:number, y:number) => number  //写法有点像箭头函数，但这只是一个函数类型声明
const test:myFn = (x, y) => { 
    return x + y
}

参数类型

可选参数

const test = (name:string, age?:number):string => {  //此处 age 为可选参数
    console.log(name, age)
}

默认参数
默认参数可以不做声明类型，TS 会根据默认值进行类型推断

const test2 = (str:string = 'hello'):void => {
    console.log(str)
}

剩余参数

const test3 = (...nums:number[]):number => {
    return nums.reduce((a,b)=> a+b , 0)
}

返回值类型

void：没有返回值。
我们知道在JS中，如果函数没有显式的 return，则返回值为 undefined；但在 TS 中，我们不能把函数的返回值显式定义为 undefined，而是应该使用 void。

//错误示范：
function test():undefined {
    //do sth
} 
//err：ts(2355) A function whose declared type is neither 'void' nor 'any' must return a value

//正确示范：
function test():void {
    //do sth
} 
//ok

函数返回值可缺省、可推断。我们不一定要给函数声明返回值类型，但对于个别特例，需要显式声明返回值类型的，比如 Generator 函数的返回值，需要显式声明为 Generator 泛型或 Iterator 泛型。

下集预告

学到这里，好像仍然只看到最基础的类型声明，TypeScript 学习笔记（1）前言中提到的问题还是没有得到解决。下一篇，咱们继续深入一下：

类类型
~~接口类型、类型别名~~
~~高级类型：联合类型、交叉类型~~

后记：我好像高估自己的学习速度了哈哈哈。还是放慢点吧，不贪吃，仔细消化，慢慢来~

TypeScript 学习笔记（2）：复杂类型数组、元组、函数