TypeScript 环境搭建和类型

2022/01/18 posted in JS CSS HTML
Tags: #JavaScript

环境搭建

安装 Node.js
使用 npm 安装 typescript
npm i -g typescript
编写 typescript 代码，代码文件名通常以 ts 为后缀
使用命令将 ts 代码编译为 js 代码
tsc app.ts

变量声明方式

先声明后赋值
```
let a: number
a = 1
```

声明的同时赋值

let a: number = 1

// 自动推断类型
let b = 1

函数声明

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

变量类型

number

JavaScript 的 Number 类型为双精度 IEEE 754 64 位浮点类型

Number.MAX_SAFE_INTEGER
JavaScript 中最大的安全整数 (2^53 - 1)
Number.MIN_SAFE_INTEGER
JavaScript 中最小的安全整数 (-(2^53 - 1))

如果需要表示大于安全范围的整数，可以使用 BigInt（任意精度数字类型）

字面量

字面量就是取值只能和类型一样的变量

声明一个 "hello" 的字面量
```
let a: "hello"
a = "hello"
```
声明一个 "hello" 或 true 的字面量（联合类型）
```
let a: "hello" | true
a = "hello"
```

类型别名

type myValue = 1 | 2 | 3
let a: myValue
a = 1

any、unknown

any 类型变量可以存放任意类型的值，包含 any 类型的语句会禁用类型检查
```
// 不报错
let a: any = 5
let b: string = a
```

unknown 比 any 更安全，同样是可以存放任意类型的值，但在明确其具体变量类型前只能被赋值，无法被“使用”

let a: unknown = true
a = 5

let b: number

// 报错，明确类型前不能使用
b = a

// 强制转型
b = a as number

// 类型保护
if (typeof a === 'number') {
  console.log(a)
}

对象

一般声明，对象内键值对的类型和个数严格限制

let obj: { name: string, age: number }
obj = { name: 'tom', age: 18 }

通过 ?，设置可选的键值对

let obj: { name: string, age?: number }
obj = { name: 'tom' }

通过 []，设置任意个键值对
只能包含一个 []，且所有键值对都要满足 [] 的限制

let obj: { name: string, [propName: string]: number | string }
obj = { name: 'tom', age: 18, height: 180 }
obj = { name: 'tom' }

声明函数对象

let func: (a: number, b: number) => number
func = function (a: number, b: number): number {
  return a + b
}
console.log(func(1, 2)) // 3
func = (a: number, b: number) => {
  return a - b
}
console.log(func(1, 2)) // -1

声明一个同时满足多种限制的对象

let man: { name: string } & { age: number }
man = { name: "tom", age: 18 }

数组

方式一
```
let a: string[]
a = ['a', 'b', 'c']
```

方式二

let a: Array<string>
a = ['a', 'b', 'c']

枚举

enum Gender {
  male = 0,
  female = 1
}
// 等价
// enum Gender {
//   male,
//   female,
// }
let i: { name: string, gender: Gender }
i = { name: 'tom', gender: Gender.male }