## 报错情况

```js
// 报错信息：Cannot read properties of undefined (reading 'writeText')
navigator.clipboard.writeText(txt)
```

## 报错原因

浏览器禁用了非安全域的 `navigator.clipboard` 对象，**http属于非安全域**，在 http 环境下调用会出现报错

安全域包括
- 本地访问, 如 127.0.0.1 或 localhost 
- 开启TLS安全认证的地址，如 https 协议的地址




## 解决方法

### 使用第三方库

```shell
# 安装第三方库
npm install copy-to-clipboard
```

```js
// 使用第三方库
import copy from 'copy-to-clipboard';

// 复制到剪切板
copy(value)
```

### 手写代码

```js
function copyToClipboard(textToCopy) {
    // navigator clipboard 需要https等安全上下文
    if (navigator.clipboard && window.isSecureContext) {
        // navigator clipboard 向剪贴板写文本
        return navigator.clipboard.writeText(textToCopy);
    } else {
        // 创建text area
        let textArea = document.createElement("textarea");
        textArea.value = textToCopy;
        // 使text area不在viewport，同时设置不可见
        textArea.style.position = "absolute";
        textArea.style.opacity = 0;
        textArea.style.left = "-999999px";
        textArea.style.top = "-999999px";
        document.body.appendChild(textArea);
        textArea.focus();
        textArea.select();
        return new Promise((res, rej) => {
            // 执行复制命令并移除文本框
            document.execCommand('copy') ? res() : rej();
            textArea.remove();
        });
    }
}
```

解决复制到剪切板 navigator.clipboard.writeText 报错

## Windows及mac 升级

Windows及mac使用的 docker desktop 自带 docker-compose 工具。

只需要升级docker desktop 至最新版，就会安装 docker-compose v2




安装完成后，可以通过下方方式使用 v2
```sh
# docker compose v2 的使用方式
docker compose version

# 如果没有安装过docker-compose  v1，则兼容v1，如果安装过，则需按下方方式强制使用v2
docker-compose --version
```

根据下方方式启动 docker-compose v2 功能，覆盖v1

![image.png](https://oss.silon.vip/img/9960f16561744355b6fd08e0d4891810.image.webp)

## Linux系统升级

[官方指引](https://docs.docker.com/compose/install/linux/#install-the-plugin-manually)

因为不确定 yum 源 apt 源是否会更新，所以选择手动升级的方式

```bash
# 卸载所有docker-compose 
sudo apt-get remove docker-compose

sudo rm /usr/local/bin/docker-compose

pip uninstall docker-compose
```

```bash
# 下载指定版本docker-compose
# 为您系统上的所有用户编写 Docker ，替换~/.docker/cli-plugins为/usr/local/lib/docker/cli-plugins.
# 不同版本的 Compose，替换v2.18.1为您要使用的 Compose 版本。
# 对于不同的体系结构，请替换x86_64为您想要的体系结构。

DOCKER_CONFIG=${DOCKER_CONFIG:-$HOME/.docker}
mkdir -p $DOCKER_CONFIG/cli-plugins
curl -SL https://github.com/docker/compose/releases/download/v2.18.1/docker-compose-linux-x86_64 -o $DOCKER_CONFIG/cli-plugins/docker-compose
```

```bash
# 对二进制文件应用可执行权限，如果上一步是为所有用户安装，则使用第二条命令
chmod +x $DOCKER_CONFIG/cli-plugins/docker-compose

# 为所有用户安装
sudo chmod +x /usr/local/lib/docker/cli-plugins/docker-compose
```

```bash
# 测试安装
docker compose version
```


![image.png](https://oss.silon.vip/img/f5542dc628ff2a52ec9f2ad8adf8eb8b.image.webp)

升级docker-compose至v2

## 函数

我们之前所涉及到的都是值的标注

**函数的标注** 会在 **值的标注** 基础上，对函数本身及其入参、返回值进行标注

### 函数入参、返回值标注

```ts
// 这里标注了入参 name 的类型为 string，返回值类型为 number
function foo(name: string): number {
  return name.length;
}
```

### 函数类型签名

在 js 中 可以通过以下方式声明一个函数

- 函数声明：`function name(){}`

```ts
function foo(name: string): number {
  return name.length;
}
```
- 函数表达式：`const foo = function(){}`

```ts
//方式 1
const foo = function (name: string): number {
  return name.length
}

//方式 2
// 可以像对变量进行类型标注那样，对 foo 这个变量进行类型声明
const foo: (name: string) => number = function (name) {
  return name.length
}
```

这里的` (name: string) => number` 就是 TypeScript 中的函数类型签名

一般我们不会使用 方式 2 去标注函数，因为可读性很差，所以一般会拆分开进行标注

```
type FuncFoo = (name: string) => number

const foo: FuncFoo = (name) => {
  return name.length
}
```


### 函数返回值 void 类型

在 TypeScript 中，一个**没有返回值（即没有调用 return 语句**的函数，其返回类型应当被标记为 `void` 而不是 `undefined`，即使它实际的值是 undefined。

```ts
// 没有调用 return 语句
function foo(): void { }

// 调用了 return 语句，但没有返回值
function bar(): void {
  return;
}

```


> 在 TypeScript 中
>  - undefined 类型是一个实际的、有意义的类型值
>  - void 才代表着空的、没有意义的类型值


### 可选参数与 rest 参数


#### 可选参数 ？
在函数类型中我们也使用 `?` 描述一个参数，为可选参数

```ts
// 在函数逻辑中注入可选参数默认值
function foo1(name: string, age?: number): number {
  const inputAge = age || 18; // 或使用 age ?? 18
  return name.length + inputAge
}

// 直接为可选参数声明默认值
function foo2(name: string, age: number = 18): number {
  const inputAge = age;
  return name.length + inputAge
}
```

#### rest 参数

rest 参数实际上是一个数组，这里我们也应当使用数组类型进行标注

```ts
function foo(arg1: string, ...rest: any[]) { }

// 或提供详细内容类型
function foo(arg1: string, ...rest: [number, boolean]) { }
```

TypeScript 的函数标注和面向对象

## 为什么需要字面量类型、联合类型、枚举类型

假设我们有一个接口结构，描述了响应的消息结构

```ts
interface Res {
  code: number;
  status: string;
  data: any;
}
```

大多数情况下code 与 status 实际值会来自于一组确定值的集合

比如：
- code 可能是 `0` / `200` / `10000` 等
- status 可能是 `‘success’`  / `"failure"` 等

但是上面的类型标注太宽泛了，我们既不能在访问 code 时获得精确的提示，也失去了 TypeScript 类型即文档的功能。

这时就需要更精确的字面量类型、联合类型、枚举类型，提供精确地取值标注

例如，我们可以使用字面量类型、联合类型将上面的例子标注的更清楚
```ts
interface Res {
  code: 10000 | 10001 | 50000;
  status: "success" | "failure";
  data: any;
}
```



## 字面量类型

直接使用值作为类型，即字面量类型（Literal Types），代表着比原始类型更精确的类型，同时也是原始类型的子类型

字面量类型主要包括`字符串字面量类型`、`数字字面量类型`、`布尔字面量类型`和`对象字面量类型`，它们可以直接作为类型标注


:::info{title="相关信息"}
无论是原始类型还是对象类型的字面量类型，它们的**本质都是类型而不是值**。

它们在编译时同样会被擦除，同时也是被存储在内存中的类型空间而非值空间。
:::

### 基础值字面量类型

```ts
const str: "silon" = "silon";
const num: 599 = 599;
const bool: true = true;
```

字面量类型比原始类型更精确:
- 原始类型：值可以包括任意的同类型值
- 字面量类型：要求值级别的字面量一致

```ts
// 报错！不能将类型“"silon123"”分配给类型“"silon"”。
const str1: "silon" = "silon123";

const str2: string = "linbudu";
const str3: string = "silon123";
```

### 对象字面量类型

对象字面量类型就是一个对象类型的值，即对象的所有属性都使用字面量进行了定义

```ts
interface Tmp {
  obj: {
    name: "linbudu",
    age: 18
  }
}

const tmp: Tmp = {
  obj: {
    name: "linbudu",
    age: 18
  }
}
```

## 联合类型

联合类型代表了一组类型的可用集合

- 只要最终赋值的类型属于联合类型的成员之一，就可以认为符合这个联合类型
- 联合类型对其成员并没有任何限制，可以将各种类型混合到一起

```ts
interface Tmp {
  mixed: true | string | 599 | {} | (() => {}) | (1 | 2)
}
```


:::info{title="相关信息"}
- 对于联合类型中的函数类型，需要使用括号`()`包裹起来
- 函数类型并不存在字面量类型，因此这里的 `(() => {})` 就是一个合法的函数类型
- 可以在联合类型中进一步嵌套联合类型，但这些嵌套的联合类型最终都会被展平到第一级中
:::

### 联合类型实现属性互斥

```ts
interface Tmp {
  user:
    | {
        vip: true;
        expires: string;
      }
    | {
        vip: false;
        promotion: string;
      };
}

declare var tmp: Tmp;

if (tmp.user.vip) {
  console.log(tmp.user.expires);
}
```

在这里 user 有两种数据结构，expires 属性只会在一种情况下出现。
一般业务中，通过判断 vip 是否为 true，来收窄后面的类型判断

### 通过类型别名复用联合类型

```ts
type Code = 10000 | 10001 | 50000;

type Status = "success" | "failure";
```


## 枚举类型

枚举并不是 JavaScript 中原生的概念，目前已经加入 Es 提案，但仍处于 [stage0 阶段](https://blog.csdn.net/ZiChen_Jiang/article/details/121215726)

我们会在业务场景中，列举一系列的值

```js
export const PageUrl = {
  Home_Page_Url: "url1",
  Setting_Page_Url: "url2",
  Share_Page_Url: "url3",
}
```

使用枚举形式如下

```ts
enum PageUrl {
  Home_Page_Url = "url1",
  Setting_Page_Url = "url2",
  Share_Page_Url = "url3",
}

const home = PageUrl.Home_Page_Url;
```

这么做的好处非常明显。
- 你拥有了更好的类型提示
- 这些常量被真正地约束在一个命名空间下（对象字面量声明总是差点意思）


TypeScript 中也可以同时使用字符串枚举值和数字枚举值
```
enum Mixed {
  Num = 599,
  Str = "linbudu"
}
```

### 枚举的递增

- 如果你没有声明枚举的值，它会默认使用数字枚举，并且从 0 开始，以 1 递增：
```ts
// Items.Foo , Items.Bar , Items.Baz的值依次是 0，1，2 。
enum Items {
  Foo,
  Bar,
  Baz
}
```

- 如果你只为某一个成员指定了枚举值，那么之前未赋值成员仍然会使用从 0 递增的方式，之后的成员则会开始从枚举值递增。

```ts
enum Items {
  // 0 
  Foo,
  Bar = 599,
  // 600
  Baz
}
```

- 在数字型枚举中，你可以使用延迟求值的枚举值。
    - **如果你使用了延迟求值，那么没有使用延迟求值的枚举成员必须放在使用常量枚举值声明的成员之后，或者放在第一位**

```ts
const returnNum = () => 100 + 499;

//
enum Items {
  Foo = returnNum(),
  Bar = 599,
  Baz
}
//
enum Items {
  Baz,
  Foo = returnNum(),
  Bar = 599,
}
```

### 枚举和对象的区别

枚举和对象的重要差异在于：
- 对象：是单向映射的
    - 只能从键映射到键值。
- 枚举：是双向映射的
    - 可以从枚举成员映射到枚举值
    - 可以从枚举值映射到枚举成员

```ts
enum Items {
  Foo,
  Bar,
  Baz
}

const fooValue = Items.Foo; // 0
const fooKey = Items[0]; // "Foo"
```

:::info{title="相关信息"}
- 仅有`值为数字`的枚举成员才能够进行这样的`双向枚举`
- `字符串`枚举成员仍然只会进行`单次映射`
:::

```ts
enum Items {
  Foo,
  Bar = "BarValue",
  Baz = "BazValue"
}

// 编译结果，只会进行 键-值 的单向映射
"use strict";
var Items;
(function (Items) {
    // 数值类型
    // 这里的 obj[obj[k] = v] = k 本质上就是进行了 obj[k] = v 与 obj[v] = k 这样两次赋值
    Items[Items["Foo"] = 0] = "Foo";
    // 非数字类型只有一次赋值
    Items["Bar"] = "BarValue";
    Items["Baz"] = "BazValue";
})(Items || (Items = {}));
```

### 常量枚举

常量枚举和枚举相似，只是其声明多了一个 const：

```ts
const enum Items {
  Foo,
  Bar,
  Baz
}

const fooValue = Items.Foo; // 0
```

他与普通枚举的区别在于访问性与编译产物

- 你只能通过枚举成员访问枚举值（而不能通过值访问成员）
- 在编译产物中并不会存在一个额外的辅助对象（如上面的 Items 对象），对枚举成员的访问会被直接内联替换为枚举的值。

以上的代码会被编译为如下形式：
```
const fooValue = 0 /* Foo */; // 0
```

Typescript 字面量、联合、枚举类型

## 基础数据类型标注

### 原始类型的类型标注

JavaScript的内置原始类型，在 TypeScript 中它们都有对应的类型注解

```ts
const name: string = 'linbudu';
const age: number = 24;
const male: boolean = false;
const undef: undefined = undefined;
const nul: null = null;
const obj: object = { name, age, male };
const bigintVar1: bigint = 9007199254740991n;
const bigintVar2: bigint = BigInt(9007199254740991);
const symbolVar: symbol = Symbol('unique');
```




### null 与 undefined

JavaScript 中，
- `null`: 这里没有值
- `undefined`: 这里有值，但是个空值 

而在 TypeScript 中，null 与 undefined 类型都是有具体意义的类型
- 这两者在没有开启 `strictNullChecks` 检查的情况下，会被视作其他类型的子类型，比如 string 类型会被认为包含了 null 与 undefined 类型


```ts
const tmp1: null = null;
const tmp2: undefined = undefined;

// 仅在关闭 strictNullChecks 时成立，下同
const tmp3: string = null; 
const tmp4: string = undefined;
```
### void


#### js 中的 void
在 JavaScript 中，`void` 是一个运算符，可以将任何表达式的值转换为 `undefined`。使用 `void` 运算符时，只需要在其后面跟上要被计算的表达式即可。

```js
void 0; // 返回 undefined
void "hello"; // 返回 undefined
void (1 + 2); // 返回 undefined
```

通常，void 运算符用于创建一个返回 undefined 的函数，以避免特定上下文中出现副作用。

```js
void function iife() {
  console.log("Invoked!");
}();
```

#### ts 中的 void
TypeScript 与 JavaScript 中不同的是，这里的 `void` 用于描述
- 一个内部没有 `return` 语句
- 或者没有显式 `return` 一个值的函数的返回值

```ts

// func1 与 func2 的返回值类型都会被隐式推导为 void
// 但在实际的代码执行中，func1 与 func2 的返回值均是 undefined
function func1() {}
function func2() {
  return;
}

// func3 其返回值类型被推导为了 undefined
function func3() {
  return undefined;
}

```
:::info{title="相关信息"}
你可以认为 void 表示一个空类型，而 null 与 undefined 都是一个具有意义的实际类型
:::

## 数组的类型标注


### 数组类型 list
TypeScript 中有两种方式来声明一个数组类型：

```ts
// 这两种方式是完全等价的
const arr1: string[] = [];

const arr2: Array<string> = [];
```

### 元组类型  tuple

数组是我们在日常开发大量使用的数据结构，但在某些情况下，使用 元组（Tuple） 来代替数组要更加妥当

```ts
// 数组对越界访问不会报错
const arr3: string[] = ['lin', 'bu', 'du'];
console.log(arr3[599]);

// 元组是指定了长度的数组，在越界访问时会给出类型报错
const arr4: [string, string, string] = ['lin', 'bu', 'du'];
console.log(arr4[599]);

// 元组内部也可以声明多个与其位置强绑定的，不同类型的元素
const arr5: [string, number, boolean] = ['type', 599, true];

// 元组也支持了在某一个位置上的可选成员
const arr6: [string, number?, boolean?] = ['type'];


// ts4.0后，可以为元组中的元素打上类似属性的标记
const arr7: [name: string, age: number, male?: boolean] = ['linbudu', 599, true];

```

元组的最大作用就是能够很好的提示显式或者隐式的越界访问

### 数组和元组的只读标注 readonly

数组与元组层面也有着只读的修饰

```ts
const myArray: readonly number[] = [1, 2, 3];
const myArray: ReadonlyArray<number> = [1, 2, 3];
myArray[0] = 4; // 报错：Type 'readonly number[]' cannot be mutated.
myArray.push(4); // 报错：Property 'push' does not exist on type 'readonly number[]'.
```

```ts
const myTuple: readonly [string, number] = ["hello", 123];
myTuple[0] = "world"; // 报错：无法分配到 "myTuple" ，因为它是只读的。
myTuple.push(456); // 报错：属性 'push' 在只读数组上不存在。
```

- 你只能将整个数组/元组标记为只读，而不能像对象那样标记某个属性为只读。

- 一旦被标记为只读，那这个只读数组/元组的类型上，将不再具有 `push`、`pop` 等方法（即会修改原数组的方法），因此报错信息也将是`类型 xxx 上不存在属性“push”`这种。
- 这一实现的本质是只读数组与只读元组的类型实际上变成了 ReadonlyArray，而不再是 Array。



## 对象类型标注

### interface 声明属性

在 TypeScript 中我们也需要特殊的类型标注来描述对象类型，即 `interface` ，可以理解为它代表了这个`对象对外提供的接口结构`。

```ts
// 声明一个结构
interface IDescription {
  name: string;
  age: number;
  male: boolean;
}

// 使用这个结构来作为一个对象的类型标注
const obj1: IDescription = {
  name: 'linbudu',
  age: 599,
  male: true,
};
```

`interface`的标注有以下限制作用：
- 每一个属性的值必须一一对应到接口的属性类型
- 不能有多的属性，也不能有少的属性，包括直接在对象内部声明，或是 `obj1.other = 'xxx'` 这样属性访问赋值的形式

### 可选属性 ？

类似于元组可选，在接口结构中同样通过 `?` 来标记一个属性为可选

```ts
interface IDescription {
  name: string;
  age: number;
  male?: boolean;
  func?: Function;
}

// 即使你在 obj2 中定义了 male 属性，但当你访问 obj2.male 时
// 它的类型仍然会是 boolean | undefined
const obj2: IDescription = {
  name: 'linbudu',
  age: 599,
  male: true,
  // 无需实现 func 也是合法的
};
```


### 只读属性 readonly

`readonly`可以标记这个属性为只读

```ts
interface IDescription {
  readonly name: string;
  age: number;
}

const obj3: IDescription = {
  name: 'zhang san',
  age: 599,
};

// 无法分配到 "name" ，因为它是只读属性
obj3.name = "silon";
```

### type 声明对象
用 `typ`e（Type Alias，类型别名）也可以代替`interface`结构描述对象。

```ts
type Person = {
  name: string;
  age: number;
  email?: string; // 可选属性
};

const person1: Person = {
  name: "Alice",
  age: 30,
  email: "alice@example.com"
};

const person2: Person = {
  name: "Bob",
  age: 25
};
```

更推荐的方式是:
- `interface`: 用来描述对象、类的结构
- `type`:用来将一个函数签名、一组联合类型、一个工具类型等等抽离成一个完整独立的类型。

大部分场景下`interface`都可以被`type`所取代，因此，只要你觉得统一使用类型别名让你觉得更整齐，也没什么问题。

## 装箱类型、 Object 、object 以及 { }

### 装箱类型（Boxed Types）
#### Object

原型链的顶端是 `Object` 以及 `Function`，这也就意味着：

所有的原始类型与对象类型最终都指向 `Object`，在 TypeScript 中就表现为 `Object` 包含了所有的类型

```ts
// 对于 undefined、null、void 0 ，需要关闭 strictNullChecks
const tmp1: Object = undefined;
const tmp2: Object = null;
const tmp3: Object = void 0;

const tmp4: Object = 'linbudu';
const tmp5: Object = 599;
const tmp6: Object = { name: 'linbudu' };
const tmp7: Object = () => {};
const tmp8: Object = [];
```

### 其他装箱类型（Boxed Types）

和 `Object` 类似的还有 `Boolean`、`Number`、`String`、`Symbol`，这几个`装箱类型（Boxed Types）` 同样包含了一些超出预期的类型。

以 `String` 为例，它同样包括 `undefined`、`null`、`void`，以及代表的 `拆箱类型（Unboxed Types）` `string`，但并不包括其他装箱类型对应的拆箱类型，如 boolean 与 基本对象类型
```
const tmp9: String = undefined;
const tmp10: String = null;
const tmp11: String = void 0;
const tmp12: String = 'linbudu';

// 以下不成立，因为不是字符串类型的拆箱类型
const tmp13: String = 599; // X
const tmp14: String = { name: 'linbudu' }; // X
const tmp15: String = () => {}; // X
const tmp16: String = []; // X
```

在任何情况下，你都不应该使用这些装箱类型。

### 非原始类型 object

`object` 的引入就是为了解决对 `Object` 类型的错误使用


- Object：代表所有类型
- object：代表所有**非原始类型的类型**，即数组、对象与函数类型这些：

```
const tmp17: object = undefined;
const tmp18: object = null;
const tmp19: object = void 0;

const tmp20: object = 'linbudu';  // X 不成立，值为原始类型
const tmp21: object = 599; // X 不成立，值为原始类型

const tmp22: object = { name: 'linbudu' };
const tmp23: object = () => {};
const tmp24: object = [];
```

### 非空类型 {}

`{}`表示一个合法的，但内部无属性定义的空对象。

它意味着任何非 `null` / `undefined` 的值

```
const tmp25: {} = undefined; // 仅在关闭 strictNullChecks 时成立，下同
const tmp26: {} = null;
const tmp27: {} = void 0; // void 0 等价于 undefined

const tmp28: {} = 'linbudu';
const tmp29: {} = 599;
const tmp30: {} = { name: 'linbudu' };
const tmp31: {} = () => {};
const tmp32: {} = [];
```

虽然能够将其作为变量的类型，但你实际上**无法对这个变量进行任何赋值操作**

```
const tmp30: {} = { name: 'linbudu' };

tmp30.age = 18; // X 类型“{}”上不存在属性“age”。
```

### Object 、object 以及 { } 的的使用场景

- 在任何时候都不要，不要，**不要使用 Object 以及类似的装箱类型**
- 当你不确定某个变量的具体类型，但能确定它不是原始类型，可以使用 object。
    - 推荐进一步区分如下：
    - 使用 Record<string, unknown> 或 Record<string, any> 表示对象
    - unknown[] 或 any[] 表示数组
    - (...args: any[]) => any表示函数

- 要避免使用{}。{}意味着任何非 null / undefined 的值，从这个层面上看，使用它和使用 any 一样恶劣