TS 的类型声明

# TypeScript 中的基本类型

TypeScript 中的基本类型：

类型声明
- 类型声明是 TS 非常重要的一个特点；
- 通过类型声明可以指定 TS 中变量（参数、形参）的类型；
- 指定类型后，当为变量赋值时，TS 编译器会自动检查值是否符合类型声明，符合则赋值，否则报错；
- 简而言之，类型声明给变量设置了类型，使得变量只能存储某种类型的值；
- 语法：
  - ```
  let 变量：类型;
  
  let 变量：类型 = 值;
  
  function fn(参数：类型，参数：类型): 类型{
      ...
  }
```
  1
  2
  3
  4
  5
  6
  7
自动类型判断
- TS 拥有自动的类型判断机制
- 当对变量的声明和赋值是同时进行的，TS 编译器会自动判断变量的类型
- 所以如果你的变量的声明和赋值时同时进行的，可以省略掉类型声明

类型：

类型	例子	描述
number	1, -33, 2.5	任意数字
string	'hi', "hi", `hi`	任意字符串
boolean	true、false	布尔值 true 或 false
字面量	其本身	限制变量的值就是该字面量的值
any	*	任意类型
unknown	*	类型安全的 any
void	空值（undefined）	没有值（或 undefined）
never	没有值	不能是任何值
object	{name:'孙悟空'}	任意的 JS 对象
array	[1,2,3]	任意 JS 数组
tuple	[4,5]	元素，TS 新增类型，固定长度数组
enum	enum{A, B}	枚举，TS 中新增类型

number

let decimal: number = 6
let hex: number = 0xf00d
let binary: number = 0b1010
let octal: number = 0o744
let big: bigint = 100n

// 声明一个变量 a，同时指定他的类型为 number
let a: number

// a 的类型为 number，在以后的使用过程中，a 的值只能是 number
a = 1
a = 2
a = 3

// a = '1' // Type 'string' is not assignable to type 'number'.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

string

let color: string = 'blue'
color = 'red'

let fullName: string = `Bob Bobbington`
let age: number = 37
let sentence: string = `Hello, my name is ${fullName}.

I'll be ${age + 1} years old next month.`

// 声明一个变量 b，同时指定他的类型为 string
let b: string

b = '1'
b = '2'
b = '3'

// b = 1 // Type 'number' is not assignable to type 'string'.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

boolean

let isDone: boolean = false

// 声明一个变量 c，同时指定他的类型为 boolean，默认值为 true
// let c: boolean = true

// 如果变量的声明和赋值是同时进行的，TS 可以自动对变量进行类型检测
let c = true

c = false

// c = 1 // Type 'number' is not assignable to type 'boolean'.

1
2
3
4
5
6
7
8
9
10
11

function

// js 中的函数是不考虑参数的类型和个数的
// function sum(a, b) {
//   return a + b
// }

// console.log(sum(123, 456)) // 579
// console.log(sum(123, '456')) // 123456;

function sum(a: number, b: number): number {
  return a + b
}

console.log(sum(123, 456)) // 579
// console.log(sum(123, '456')) // Argument of type 'string' is not assignable to parameter of type 'number'.
// console.log(sum(123, 456, 789)); // Expected 2 arguments, but got 3.
// console.log(sum(123)); // Expected 2 arguments, but got 1.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

字面量

也可以使用字面量去指定变量的类型，通过字面量可以确定变量的取值范围

// 使用字面了进行类型声明
let a: 10
a = 10
// a = 11 // Type '11' is not assignable to type '10'

1
2
3
4

// 可以使用 | 来连接多个类型（联合类型）
let b: 'male' | 'female'
b = 'male'
b = 'female'

let c: boolean | number
c = true
c = 123

let color: 'red' | 'blue' | 'black'
let num: 1 | 2 | 3 | 4 | 5

1
2
3
4
5
6
7
8
9
10
11

any

// any 表示任意类型，设置 any 后，相当于关闭了 TS 的类型检查
// let d: any
// 声明变量如果不指定类型，TS 解析器会自动推断为 any 类型，叫做隐式 any
let d
d = 123
d = '123'
d = true

1
2
3
4
5
6
7

unknown

// unknown 表示未知类型，可以使用 unknown 声明
let e: unknown
e = 123
e = true
e = '123'

let f: unknown

let s: string
// d 的类型是 any，它可以赋值给任意类型而不报错，无形中会改变别的变量的类型
s = d

// unknown 实际上就是一个类型安全的 any
// unknown 类型的变量，只能赋值给 any 及 unknown 类型的变量，而不能赋值给其他类型
d = e
f = e
// 上面虽然给 e 赋值为 string，但赋值给 s 仍然报错
// s = e // Type 'unknown' is not assignable to type 'string'.
// 但我们可以使用下面两种方式将 unknown 赋值给 string，前提是 unknown 类型的变量是 string
// 方式一：类型断言
s = e as string
s = <string>e
// 方式二：类型判断
if (typeof e === 'string') {
  s = e
}

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

void

// void 表示没有任何返回值的函数
function sum(a: number, b: number): void {
  console.log(a + b)
  // return a + b // Type 'number' is not assignable to type 'void'
  // return null // Type 'null' is not assignable to type 'void'
  // return undefined // 可以
  // return // 可以
  // 没有 return // 可以
}

let unusable: void = undefined

1
2
3
4
5
6
7
8
9
10
11

never

// never 表示永远不会返回
function error(message: string): never {
  throw new Error(message)
}

function neverError(message: string): never {
  while (true) {}
}

1
2
3
4
5
6
7
8

object（没啥用）

let a: object
a = {}
a = []
a = function () {}
// a = null // Type 'null' is not assignable to type 'object'

1
2
3
4
5

{}

// {} 用来指定对象中包含哪些属性及其类型
// 语法：{属性名：属性类型; 属性名：属性类型; ...}
// 在属性名后面加上？，表示可选属性
let b: { name: string; age?: number }
b = { name: 'henry' }

// [propName: string]: any 表示任意类型的属性
let c: { name: string; age?: number; [propName: string]: any }
c = { name: 'henry', age: 18 }
c = { name: 'henry', age: 18, sex: 'male' }
// c = { age: 18, sex: 'male' } // Property 'name' is missing in type '{ age: number; sex: string; }' but required in type '{ [propName: string]: any; name: string; age?: number | undefined; }'

// 函数结构的类型声明
// 语法：(行参：类型，行参：类型，...) => 返回值
let d: (a: number, b: number) => number
d = function (a: number, b: number): number {
  return a + b
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

array

// string[] 表示一个字符串数组
let e: string[]
e = ['henry', 'haha', 'hehe']

// number[] 表示一个数字数组
let f: number[]
f = [1, 2, 3]

// Array<类型> 表示一个数组
let g: Array<number>
g = [1, 2, 3]

// any[] 表示任意类型的数组
let h: any[]
h = [1, 'henry', true]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

tuple

// 元祖类型，固定长度的数组
let i: [string, number]
i = ['henry', 18]

1
2
3

enum

enum Color {
  Red,
  Green,
  Blue
}
let c: Color = Color.Green

enum Color {
  Red = 1,
  Green,
  Blue
}
let c: Color = Color.Green

enum Color {
  Red = 1,
  Green = 2,
  Blue = 4
}
let c: Color = Color.Green

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

// & 表示两个或者多个类型的集合
let m: { name: string } & { age: number }
m = { name: 'henry', age: 18 }

1
2
3

类型别名

// 类型别名
type Name = string
let n: Name
type MyType = 1 | 2 | 3 | 4 | 5
let o: MyType
o = 4

1
2
3
4
5
6

类型断言
- 有些情况下，变量的类型对于我们来说是很明确，但是 TS 编译器却并不清楚，此时，可以通过类型断言来告诉编译器变量的类型，断言有两种形式：
  - 第一种
    - let someValue: unknown = 'this is a string' let strLength: number = (someValue as string).length
      
      1
      2
  - 第二种
    - let someValue: unknown = 'this is a string' let strLength: number = (<string>someValue).length
      
      1
      2

编辑

#TS

上次更新: 5/27/2023, 1:02:05 PM

← TS 开发环境搭建 TS 类型简版→