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
个人目前能力有限,并没有自主构建一个社区的能力,如有任何问题或想法与我沟通,请通过上述某个平台联系我,谢谢!!!