Type Script 学习笔记

# Type Script 学习笔记

## 官方文档有坑

1. typescript 2.7后,元祖长度被固定,访问元祖越界元素会报错,官方文档中的教程尚未更新。

## 基础类型

1. 布尔值: `let isDone: boolean = false;`

2. 数字:

```

let decLiteral: number = 6 // 十进制

let hexLiteral: number = 0xf00d // 十六进制

let binaryLiteral: number = 0b1010 // 二进制

let octalLiteral: number = 0o744 // 八进制

```

3. 字符串: `let name: string = "bob"`

4. 数组: `let list: number[] = [1, 2, 3]`, `let list: Array<number> = [1, 2, 3]`

5. 元组: 元组类型允许表示一个已知元素数量和类型的数组, 各元素类型不必相同。

- 数量和类型应该对应, 例:

```

let x: [string, number]

x = ['hello', 123] // Ok

x = [123, 'hh'] // Error

x = [123, 'hh', 123] // Error

```

6. 枚举 enum

- 可以为一组数值赋予友好的名字。

```

enum Color { Red, Green, Blue }

let c: Color = Color.Green

```

- 默认 Color[0] Red, Color[1] Green, Color[2] Blue

- 可以定义 Red = 1, 则 Color[1] Red, Color[2] Green, Color[3] Blue

```

enum Color { Red = 1, Green, Blue }

let c: Color = Color.Green // 2

```

- 可以全部手动赋值

```

enum Color { Red = 1, Green=3, Blue=6 }

let colorName: String = Color[6] // 'Blue'

```

7. any: 任意类型

- 允许在编译时可选地包含或移除类型检查。

```

let list: any[] = [1, true, "free"]

list[1] = 100

```

8. void: 与 any 类型相反,表示没有任何类型,

- 函数没有返回值的时候使用

```

function warning(): void {}

```

- 如果生命一个变量只能赋值 undefined 和 null

```

let und: void = undefined

```

9. Null 和 Undefined

- vscode 中设置 strict null check

```

let u: undefined = undefined

let n: null = null

```

10. never 类型可以赋值给任何类型和 never 类型

```

// 返回never的函数必须存在无法达到的终点

function error(message: string): never {

throw new Error(message);

}

// 推断的返回值类型为never

function fail() {

return error("Something failed");

}

// 返回never的函数必须存在无法达到的终点

function infiniteLoop(): never {

while (true) {

}

}

```

11. object 类型

- 也就是除number,string,boolean,symbol,null或undefined之外的类型。

12. symbol 类型, es6新类型, 唯一

```

symbol('xxx') === symbol('xxx') // false

symbol.for("xxx") === symbol.for("xxx") // true

```

- 使用 symbol 类型作为对象的属性, 不能使用 for in 遍历

```

let keys = Reflect.ownKeys(person)

keys.forEach(element => { console.log(person[element]) })

```

- Reflect, Es6 提供新对象。

13. 联合类型 `string | null | undefined`

## 变量声明

- let: 块级作用域, 可以理解为在 `{}` 中起作用, 声明前不能调用。

- const: 块做用户, 值不可以修改,状态可以修改。

## 解构

- 数组 `[a, b] = [1, 2]`

- 重命名: `let { a: newName1, b: newName2 } = o;`

- 对象带类型: `let {a, b}: {a: string, b: number} = o;`

- 数组余量

```

let [first, ...rest] = [1, 2, 3, 4];

console.log(first); // outputs 1

console.log(rest); // outputs [ 2, 3, 4 ]

```

- 对象余量

```

let { a, ...passthrough } = o;

let total = passthrough.b + passthrough.c.length;

```

- `{` 开头会被认为是一个块 `({ a, b } = { a: "baz", b: 101 })`

- 默认值, ? 为可空

```

function keepWholeObject(wholeObject: { a: string, b?: number }) {

let { a, b = 1001 } = wholeObject;

}

```

- 解构应尽量简单化,避免

```

function f({ a, b = 0 } = { a: "" }): void {

// ...

}

f({ a: "yes" }); // ok, default b = 0

f(); // ok, default to {a: ""}, which then defaults b = 0

f({}); // error, 'a' is required if you supply an argument

```

- 展开, 与解构相反

```

let first = [1, 2];

let second = [3, 4];

let bothPlus = [0, ...first, ...second, 5];

// [0,1,2,3,4,5]

```

- 数组的展开, 后边的属性会覆盖前边的属性, 并且会丢失对象的方法

```

let defaults = { food: "spicy", price: "$$", ambiance: "noisy" };

let search = { ...defaults, food: "rich" };

```

## 接口

- 接口规定了函数参数的类型和属性

```

interface SquareConfig {

color?: string;

width?: number;

}

```