类型推导
Typescript
提供了类型声明,但在声明变量时,仍然可以像写 JS 那样,不用显式地提供类型,比如:
let n = 10
Typescript 提供了类型推导的能力,能自动推断出变量 n
的类型:
所以此时 n
的类型就是 number
了。如果再给它赋值为其他类型的值,就会报错:
如果声明变量时,既没有指定类型,又没有赋值,那么该变量的默认类型是 any
:
对于 any
类型的变量,它可以接收任意类型的值,都不会报错:
let a;
a = 10;
a= 'hello';
联合类型
联合类型是由两个和以上其他类型组成的类型,比如:
let a: number | string;
变量 a
的值既可以是 number
类型,也可以是 string
类型:
a = 10;
a = ‘hello’;
在使用联合类型时,如果变量的值还没有确定,也就是此时存在多种可能性,此时只能访问联合类型中公共的属性和方法,比如:
一旦联合类型的变量的值确定下来了,此时就只能访问对应类型的属性和方法了:
类型别名
当有一个复杂的类型时,或者一个类型被频繁使用时,可以给该类型起一个别名,来简化使用。
比如声明一个描述人的对象,可以这么写:
let p: {name: string, age: number}= {
name: "John",
age: 20
}
但是如果要声明多个人时,就有点繁琐了。此时可以使用类型别名:
type Person = {
name: string,
age: number
}
let p: Person= {
name: "John",
age: 20
}
类型别名还经常和联合类型一起使用,比如:
type union = 'string' | 'number' | 'boolean'
之后,可以给变量 union
赋值这三种类型中的任意一种值。
let u1:union = 1
let u2:union = '2'
let u3:boolean = true
类型断言
Typescript
提供了足够多的类型,方便我们明确定义一个变量的类型。同时又具备类型推导的功能,可以快捷的从值来推导出变量的类型。
但是对于一些构成复杂的值,Typescript 本身并没有足够的能力去推导出它的类型。
好在 TS 又提供了类型断言(Type Assertions) ,此时我们可以手动强制指定它的类型,这就好比是做了强制类型转换。
比如获取一个 dom 元素:
let root = document.getElementById('root')
此时 div 的类型有两种,HTMLDivElement 或者 null:
此时可以使用类型断言语法,通过 as
关键字去指定特定的类型:
let root = document.getElementById('root') as HTMLElement
也可以在使用的时候去断言:
let root = document.getElementById('root');
(root as HTMLElement).innerText = 'Hello'
还可以使用 <>
语法来进行类型断言:
let root = <HTMLElement>document.getElementById('root');
但是这种语法在 React 中会被认为是一个 React 组件,所以不太使用。
小结
本文介绍了 TS 中的类型推导,联合类型,类型别名和类型断言,属于 TS 的基本类型知识,也都是最常用的语法。