TypeScript 类型声明、数据类型
好烦
数据类型
JavaScript 的类型分为两种:原始数据类型(Primitive data types)
和对象类型【引用数据类型】(Object types)
。
原始数据类型包括:布尔值
、数值
、字符串
、null
、undefined
以及 ES6 中的新类型 Symbol
和 ES10 中的新类型 BigInt
。
类型声明
看下面的代码:
javascript
let num = 10;
num = "123"
我们创建了一个 num 变量,赋值 10 ,然后我们修改 num 为一个字符串。在 js 当中,这是非常正常的一个操作,同时也是 js 语法里面所允许的操作,但是看 ts 里面:
这种操作在 ts 里面是不被允许的:
他会告诉我们不能把字符串赋值给数字的变量,ts 在内部给我们进行了一个类型的校验,这一点是和 js 不同的,在 ts 中,即时我们在创建变量的时候没有设置 :number
进行数据类型声明, ts 依旧会给我们进行数据类型的校验。
和我们给 num 声明了数据类型的效果是一样的,当然,这个 number 首字母大小写都是一样的,根据个人喜好设置就可以,只要标识这个变量是什么类型的就可以了,莫纠结,,但是建议是小写。
修改成数字就可以了,不会在报错了。
这个过程就叫做类型声明
,是 ts 的最大特点。通过类型声明,我们可以对 ts 的变量、参数、形参的类型进行设置。
比如我们创建一个方法需要一个参数:
如果我们没有声明参数 a 的类型,它默认是 any,也就是它会自己从用法中推断出更好更合适的类型。但是如果声明了 a 的类型:
javascript
function wjw(a:string) {
console.log(a)
}
wjw(123)
我们声明了 a 是一个字符串类型的参数,我们调用如果传进数字类型的话,语法校验就会出问题:
意思是传入的参数类型有问题。必须传入 string 类型数据。这是由 ts 编译器进行自动检查实现的。 类型声明给变量设置了类型后,使用变量只能存储设置的类型值。
原始数据类型
布尔值
布尔值是最基础的数据类型,在 TypeScript 中,使用 boolean
定义布尔值类型。
javascript
let flag:boolean = true
boolean
表示 flag
参数为布尔类型。以后给 flag 赋值的时候,只能是布尔类型。
javascript
let flag:boolean = true
flag = false
注意一点哈,布尔值赋值,只能是 true
和 false
,设置 0 或者是 1 都不可以。
数值
使用 number 定义数值类型。
javascript
let age:number = 18
age = 19
也是一样的,很简单,不赘述了。 但是有一点需要说一下,数字类型除了整数,还可以赋值其他数字类型,比如:二进制、八进制、十六进制等。
javascript
let a1:number = 0x123 // 十六进制
let a2:number = 0b101 // 二进制
let a3:number = 0o12 // 八进制
let a4:number = 1.23 // 小数
let a5:number = 123e-2 // 科学计数法
let a6:number = 123e2 // 科学计数法
上面这几种知道就好。
字符串类型
使用 string 定义字符串类型。
javascript
let str:string = "我是ed."
str = "我是wjw"
Null 和 Undefined
在 TypeScript 中,可以使用 null 和 undefined 来定义这两个原始数据类型。
javascript
let u:undefined = undefined
let n:null = null
设置了之后不允许在改为别的数据,不然语法校验不会通过。
所以说呢,这两个用处其实不大,几乎没有人会这样设置,当然了,业务需求除外哈。
但是! 尽管 undefined 和 null 不能修改成其他数据类型的值,但是他俩可以设置为其他类型的值作为字类型。即:可以把undefined 和 null 赋值给其他类型的变量。
javascript
let w: number = 18
w = null
这是没有问题的!语法校验不会出问题。
引用数据类型
数组
第一印象这样写是不可以的哈:
javascript
let arr1:Array = []
这是不行的,语法校验不能通过的:
为什么呢,因为我们更在意的不是他是不是数组,而是数组里面的元素是什么类型的。
javascript
let arr1:number[] = []
应该这个样子,告诉他是一个数据,是一个 number 类型的数组,这样就可以了。
这时候如果你重新赋值一个字符串类型的,他就会报错了。
你只能赋值数值类型的。
但是如果是一个空数组的话,就不需要声明类型。
javascript
let arr2: [] = []
这样子就可以了。
还可以通过泛型的方式创建数组。
javascript
let arr3: Array<number> = [10, 20, 30]
直接告诉他是一个数字,数组内元素是 number 类型。
对象
object 表示非原始类型,除了 number、string、boolean 之外的类型。
javascript
let obj:object = {}
注意一点哟:
any 和 void
看下面的代码:
javascript
let flag: boolean = true
我们给 flag 声明了布尔类型,只能设置 true 或者 false。但是后台如果返回的是 0 或者 1 怎么办?没法赋值啊?我们不能确定后端返回的数据类型,或者是在定义变量的时候还不能确定应该声明什么类型,这个时候我们怎么办呢?
这个时候有一个类型叫 any
类型提供给我们使用了,他表示任何类型
。
javascript
let h:any = 123
h = true
这个时候,无论什么类型我们都可以赋值给他。
void
表示空值,表示没有任何返回值的函数。
例如下面的方法,表示没有任何返回值:
javascript
function fun1() {
console.log("123");
}
console.log(fun1());
我们运行一下看一下结果:
看上面的截图不难发现, void 可以给 undefined 赋值,表示没有任何类型,当然这样写也没有任何意义。
javascript
let v: void = undefined
所以说 void 更多的使用在函数上面,表示函数没有任何返回值数据。
当然如果函数有返回值,定义返回值的类型,要像下面一样定义:
javascript
function fun2(): number {
console.log("123")
return 123
}
console.log(fun2())
类型推论
如果没有明确的变量指定类型,那么 TypeScript 会依照类型推论(Type Inference)的规则推断出一个类型。
比如说:
javascript
let t = 123
t = "123"
我们现在声明了一个 t 初始化数字 123,然后我又赋值字符串的 "123",发现校验报错了。
其实在我们初始化变量的时候,尽管我们没有主动设置变量类型,但是他进行了类型推论,根据我们的赋值,自动帮我们进行了类型设置,设置为 number 类型,因此等同于:
javascript
let t:number = 123
t = "123"
所以会报错。
还有一种情况,就是我们创建一个变量后不赋值,那么我们可以设置任何数据类型值。
javascript
let g
g = 123
g="123"
g = []
g = {}
g = true
这样是不会报错的,因为它默认给我们类型推论成了 any 类型。
总结一下:
- 定义变量的时候,直接给变量赋值,则定义类型为初始化变量时候对应的类型。
- 定义变量的时候,只声明不赋值,则定义类型为 any 类型。
联合类型
联合类型(Union Types)表示取值可以为多种类型中的一种。
之前有过一个案例:
看上面截图,既然 flag 可能是 true、false,也可能是 0、 1 。这个是确定的,那么我们可以不使用 any 类型,而是使用联合类型。
javascript
let flag1:boolean | number = true;
flag1 = 1;
这样子就可以了,这是类型要不是布尔,要不是数字类型。
但是要注意一点,就是操作值的方法会不会报错,就像是:
就会出现报错的问题,要注意!
反正哈:当 TypeScript 不确定一个联合类型的变量到底是哪个类型的时候,我们只能访问此联合类型的所有类型里共有的属性或方法。
好了,今天就先到这里吧!