🟡TypeScript类型声明

本文最后更新于:2022年5月28日 下午

原始类型

使用let,const会自动类型断言,可不写类型

1
2
3
4
5
const name: string = 'Jonathan'
const age: number = 20
const isMale: boolean = true
const bigInteger: bigint = 12345n
const mark: symbol = Symbol('mark')

undefined与null

undefined: null:

any与unknown

any:可以用任意数据赋值,可以使用任意方法

unknown:更安全的any,但仅可赋值给any或unknown

1
2
3
4
5
6
7
8
9
10
11
12
function transpondByAny (x: any): any {
return x
}

function transpondByUnkown (x: any): unknown {
return x
}

const y1 = transpondByAny(1) / 2
// 无报错
const y2 = transpondByUnkown(1) / 2
// 报错提示: 对象的类型为 "unknown"。

上面的例子表明使用unknown可以尽可能的提示开发者这么用可能会出错误(返回值不一定是number)

在使用时需要开发者手动断言类型以明确这么做不会错误错误

const y2 = transpondByUnkown(1) as number / 2

void与never

void:函数无返回值

never:函数无法执行到return语句,总是会抛出错误或进入死循环

1
2
3
4
5
6
7
const say = (): void => {
alert('Hellow TypeScript!')
}

function createError (msg: string): never {
throw new Error(msg)
}

内置对象类型

Number,String,Boolean,Date

1
2
3
4
const num: Number = Number(1)
const str: String = String('a')
const bool: Boolean = Boolean(true)
const time: Date = new Date()

联合类型

当类型是几个中的某个时可用联合类型 赋值前可使用各类型的共有属性或方法 联合类型赋值后会类型收窄,即不可使用赋值类型外的属性或方法 但可重新赋值其它联合范围内的值

1
2
let numStr: number | string
numStr = 2

类型断言

🍖可用标签断言any类型

1
2
const myName: any = 'Jonathan'
const Len: number = (<string>myName).length

🍖推荐as语法

1
2
const myName: any = 'Jonathan'
const Len: number = (myName as string).length

类型收窄

类型收窄是让TS对大类型进行更精确的定位

🍳赋值

1
2
3
4
5
6
7
let x: string | number

x = 'a' // 收窄为string
x.length

x = 1 // 收窄为number
x.length // number没有length属性会标红报错

🍳typeof

1
2
3
function getNum(x: string | number): number {
return x.length // number没有length属性会标红报错
}
1
2
3
4
5
function getNum(x: string | number): number {
if(typeof x === 'string')
return x.length // Ts可按上一句判断将类型收窄为string
return x // (parameter) x: number下一条的x收窄为number
}

🍳逻辑运算符

1
2
3
4
5
function getNum(x: string | number,y: string | boolean): number {
if(x === y) // 类型收窄为x,y的类型交集,即string
return x.length
return 0
}

数组

1
2
3
4
const list: number[] = [0, 1, 2]

// 或使用数组泛型
const list: Array<number> = [0, 1, 2]

元组

元组为元素数量,各索引数据类型已知的数据类型

1
const tuples: [string, number, boolean] = ['Jonathan', 20, true]

元素可以是更复杂的元素类型,或嵌套元组

1
2
3
4
5
6
7
const tuples: [
Array<string>,
[string, number, boolean]
] = [
['Hellow', 'TypeScript'],
['Jonathan', 20, true]
]

枚举

枚举可以通过数值得到反向映射结果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
enum ItemType {
RADIO,
INPUT = 2,
TYPEAREA,
SELECT,
SWITCH = 9,
}

if (formItem.type === ItemType.RADIO) { /* ...单选 */ }
else if (formItem.type === ItemType.SELECT) { /* ...下拉框 */ }

console.log(ItemType)
/**
* {
* '0': 'RADIO',
* '2': 'INPUT',
* '3': 'TYPEAREA',
* '4': 'SELECT',
* '9': 'SWITCH',
* RADIO: 0,
* INPUT: 2,
* TYPEAREA: 3,
* SELECT: 4,
* SWITCH: 9
* }
*/

收到后端的一个动态表单数据,后端用数字来表示不同的表单项类型

若用if (formItem.type === 0) { /* ...单选 */ }来表示就缺少了可读性

使用元组if (formItem.type === ItemType.RADIO) { /* ...单选 */ }就很明了

字符串枚举不支持反向映射

1
2
3
4
5
enum Message {
False = "No",
True = "Yes",
Yes = True
}

🟡TypeScript类型声明
https://qingshaner.com/TypeScript类型声明/
作者
清山
发布于
2022年1月23日
许可协议