TS 类型简版
# 字符
?
表示可有可无,定义对象时常用,表示某一属性可有可无|
表示或,当一个变量有多个类型时用&
表示且,当已经定义了几个类型,而这个变量是这几个类型的合集时用
let a = { name: string, 'age?': number } // 加引号是防止被格式化删除
a = { name: 'henry' }
a = { name: 'henry', age: 18 }
let b = string | number
b = 'henry'
b = 18
let c = { name: string } & { age: number }
c = { name: 'henry', age: 18 }
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 字面量
有点类似 const
let a: 10 a = 11 // 报错:Type '11' is not assignable to type '10'.
1
2限制值的范围 (联合类型)
当一个变量的取值在某些范围内时,可以使用字面量
比如 1 | 2 | 3, male | female
let b: 'male' | 'female' b = 'male' b = 'female' b = 'hello' // 报错:Type '"hello"' is not assignable to type '"male" | "female"'.
1
2
3
4
# any
any
类型的变量可以赋值给任意变量,不报错
let d
d = 1
d = '3'
d = true
let s: string
s = d
1
2
3
4
5
6
7
2
3
4
5
6
7
# unknown
unknown
实际上就是一个类型安全的 any
, unknown
类型的变量
不能直接赋值给其它变量
let e: unknown
e = '3'
let s: string
s = e // Type 'unknown' is not assignable to type 'string'.
1
2
3
4
5
2
3
4
5
但可以通过类型断言赋值
s = e as string
// 或
s = <string>e
1
2
3
4
5
2
3
4
5
# any 和 unknown 的区别
任何类型都能分配给 unknown
, 但 unknown
不能分配给其他基本类型,而 any
啥都能分配和被分配。
let foo: unknown
foo = true // ok
foo = 123 // ok
foo.toFixed(2) // error
let foo1: string = foo // error
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
let bar: any
bar = true // ok
bar = 123 // ok
foo.toFixed(2) // ok
let bar1: string = bar // ok
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# object
一个对象限制除了有几个必需属性后,别的属性均不管
如定义一个人的对象,必需属性为 name
和 age
, 再有别的属性也可以:
let people: { name: string; age: number; [propName: string]: any } // propName 也可以改成别的单词
people = { name: 'henry', age: 18, gender: 'male' }
people = { name: 'henry', gender: 'male' } // 报错
1
2
3
2
3
# array
数组的类型声明:
- 类型[]
- Array<类型>
let a1: number[]
let a2: string[]
let a3: Array<number>
let a4: Array<string>
let a5: (number | string)[]
let a6: Array<number | string>
1
2
3
4
5
6
2
3
4
5
6
# tuple
元祖,ts
新增类型,固定长度的数组
元祖的类型声明:[类型, 类型, 类型...]
数组数量必须与声明的相同,每个元素对应的类型都必须与声明的相同
# 类型的别名
当一个类型被多次使用时,可以给这个类型起一个别名
如:
let k: 1 | 2 | 3 | 4 | 5
let l: 1 | 2 | 3 | 4 | 5
1
2
2
可以改为:
type myType = 1 | 2 | 3 | 4 | 5
let k: myType
let l: myType
1
2
3
2
3
编辑 (opens new window)
上次更新: 6/6/2023, 1:43:45 PM
- 01
- 搭配 Jenkins 实现自动化打包微前端多个项目09-15
- 02
- 自动化打包微前端多个项目09-15
- 03
- el-upload 直传阿里 oss 并且显示自带进度条和视频回显封面图06-05