Typescript笔记之基础知识（3）：TS数据类型

foreword（前言）

就跟学习JS一样，学习TS首先需要掌握它具有哪些数据类型，本篇文章将记录TS基本的数据类型。

在TS中，数据类型都有哪些？

TS作为JS的超集，必然包含JS所有的数据类型，它们分别是：

• Boolean
• Number
• String
• Array
• Function
• Object
• Symbol
• undefined
• null

除此之外，TS还新增了以下的数据类型：

• void
• any
• never
• 元组
• 枚举
• 其他高级类型玩法

类型注解

在对比分析每种数据类型之前，有必要先了解TS中的类型注解。它相当于强类型语言中的类型声明，作用和C语言中“int a = 1”的int声明一样，具体语法如：(变量/函数):type，即在变量名后面加一个“类型”，如：

let n: number = 100

通过添加类型注解之后，我们就不能随便将其他类型的数据赋值给当前变量了，比如上面的n，我们不能将字符串赋值给它，不然vscode将会给我们格式高亮报错Type '"xxx"' is not assignable to type 'number'.

原始类型

JS中最基础的三个数据类型Boolean、Number、String的声明方式如下：

let bool: boolean = true
let num: number = 1
let str: string = 'handsome boy'

数组

数组在TS中的声明方式是这样的：

// 方式一
let arr1: number[] = [1, 2, 3]
// 方式二
let arr2: Array<number> = [1, 2, 3]

从上面我们可以发现的是，和原生的js相比，数组中每个元素的类型都在声明的时候已经绑定好了，所以如果其中插入一些非数字类型的数据，编辑器将会报错。

那如果要使得在数组中可以插入其他类型的数据呢，则可以采用联合类型的方式，比如：

let arr: Array<number | string> = [1, 'abc']

这样，数组就能包含多种数据类型了

元组

元组是一种特殊的数组，它控制了数组成员的类型和数量，比如：

let tuple: [number, string] = [1, 'abc']

上面代码就控制了三个条件：

• 数组第一个元素是数字类型；
• 数组第二个元素是字符串类型；
• 数组中只能有两个元素；

接下来我们来看下元组的越界问题：

let tuple: [number, string] = [1, 'abc']
tuple.push(2)
console.log(tuple) // [1, "abc", 2]
tuple[2] // 编辑器会报错

虽然元组可以通过push方法添加新元素，但是元组仍然无法访问刚添加的新元素。

函数

函数的声明需要给参数添加类型注解，如下：

let add = (a: number, b: number) => a + b
或者
let add = (a: number, b: number): number => a + b // 最后的这个number是对函数返回值类型的注解，不过平时可以省略（TS的类型推断）

函数的声明还有一种形式：(先声明后实现)

let add:  (a: number, b: number) => number
add = (n, m) => n + m

这种方式在实现时可以不写注解，参数名也可以和声明时不一样。

对象

按照JS的用法，或许我们觉得可以如下方式声明与操作对象：

let obj: object = { x: 1, y: 2 }
obj['x'] = 2 // 报错，ts中不知道你声明的对象中有x属性

Ts中应该这样做：

let obj: {x: number, y: number} = {x: 1, y: 2}
obj.x = 2

Symbol

let s1: symbol = symbol()
或者
let s2 = symbol()

undefined、null

当一个变量被声明成undefined或null，该变量只能被赋值undefined或者null:

let undef: undefined = undefined
let nul: null = null

在ts官网中，undefined和null是任何类型的子类型，说明undefined和null可以赋值给任何其他类型，但不能直接赋值：

/* 会报错 */
let num: number
num = undefined
num = null

要使得上面代码不报错，需要修改下ts的配置文件：

...

"strictNullChecks": false, /* Enable strict null checks. */

...

或者，如果想要用比较严格的语法，可以使用联合类型，比如：let num: number | undefined | null

void

在js中，void是一种操作符号，可以让任何表达式返回undefined，比如最简单的一种返回undefined的方式为void 0。（注：undefined不是js中的保留字，完全可以通过一个undefined变量覆盖，比如：(function () {var undefined = 111; console.log(undefined)})()），在全局声明是没效果的）

在ts中，void的意思是“没有返回值”，通常用来标示函数没有返回值（可以理解为函数没有return），个人理解为它是一种“标示”，和C语言中的void是类似的。

any

any即任何类型，ts中只要不指定类型注解即可。

never类型

这个类型和void有些相似，也是不返回值，标示函数，比如：

let error = () => {
	throw new Error('error')
}

let endless = () => {
	while (true) {
		console.log(111)
	}
}

通俗理解void与never：

• void可以理解为一个没有return但能执行完毕的函数；
• never是一个函数体无法结束执行的函数；

枚举类型

enum ConstEnum {
	a,
	b,
	c,
	d
}

enum StrEnum {
	a = 'a',
	b = 'b'
}

enum ComplexEnum {
	a,
	b = 'b'
	c = 1 // 只要前一个枚举成员为非数字类型，那边就要赋值
}

相同枚举类型或以相同枚举成员作为类型的数据才能进行比较。

last（最后）
非常感谢您能阅读完这篇文章，您的阅读是我不断前进的动力。

对于上面所述，有什么新的观点或发现有什么错误，希望您能指出。

最后，附上个人常逛的社交平台：

知乎：https://www.zhihu.com/people/bi-an-yao-91/activities

csdn：https://blog.csdn.net/YaoDeBiAn

github: https://github.com/yaodebian

个人目前能力有限，并没有自主构建一个社区的能力，如有任何问题或想法与我沟通，请通过上述某个平台联系我，谢谢！！！