# TypeScript 极速入门




## 运行环境

- 在线环境：[TypeScript: 演练场 - 一个用于 TypeScript 和 JavaScript 的在线编辑器](https://www.typescriptlang.org/zh/play)
- 本地环境：VS Code + node + ts-node(tsc) + Code Runner(可选)

## 声明和数据类型

### 声明

![image.png](/static/img/b98ad5d3c3c3afbbd8d0937632da401d.image.png)

```typescript
// 变量声明
let a: string = 'hello';

// 常量声明
const b: number = 100;
```

如果一个变量或常量的声明包含了初始值，ts便可根据初始值进行类型推断，此时可不显式指定其类型

### 常用数据类型

- `number`：整数和浮点数
- `string`
- `boolean`：`true`，`false`
- 数组：`元素类型[]`(如 `number[]`)
- 对象：声明所有属性的名称和类型(如 `{name: string, age: number, tel: string}`)
- `any`：请注意不要把 `TypeScript` 用成 `AnyScript`
- 联合类型：一个变量或常量可能用于处理不同类型的值，例如 `let frameRate: string | number`

```typescript
let position: string = '东';
let price: number = 150;
let countable: boolean = true;
const numbers: number[] = [1, 2, 3, 4, 5];
const person: {name: string, age: number, tel: string} = {name: '张三', age: 18, tel: '199999999'};
let frameRate: string | number = 60;
```

## 函数

![image.png](/static/img/af15cb92053cb970a0641916f11b3b40.image.png)

### 参数

- 可选参数：在参数名后使用 `?` 进行标识
- 默认参数：为参数赋初始值，例如 `format: string = 'avc'`

### 返回值

若函数没有返回值，则可以使用`void`作为返回值类型，其含义为空。函数的返回值类型可根据函数内容推断出来，因此可以省略不写。

```typescript
function getVideoInfo(name: string, format: string = 'avc', frameRate: string | number, audioFormat?: string): string {
    return `${name}.${format}, audio-${audioFormat}, ${frameRate}fps`;
}
```

> 必选参数要写在可选参数的前面，否则会报错：`A required parameter cannot follow an optional parameter.`

### 匿名函数与箭头函数

- 匿名函数能够根据上下文推断出参数类型，因此参数类型可以省略
- 箭头函数只有一个参数时，左侧括号可以省略，只返回值时，右侧花括号可省略

```typescript
let numbers: number[] = [1, 2, 3, 4, 5]
numbers.forEach(function (number) {
    console.log(number);
})

let numbers2: number[] = numbers.map(number => number + 1);
```

## 类

类（class）是面向对象编程语言中的一个重要概念。

面向对象编程（Object-Oriented Programming，简称OOP）是一种编程范式，其核心理念在于将程序中的数据与操作数据的方法有机地组织成对象，从而使程序结构更加模块化和易于理解。通过对象之间的协同合作，实现更为复杂的程序功能。

类（class）是对象的蓝图或模板，它定义了对象的属性（数据）和行为（方法）。通过类可以创建多个具有相似结构和行为的对象。

![image.png](/static/img/fc71bd35ce37b73d9fbbdc1b6544923e.image.png)

```typescript
class Person {
    id: number;
    name: string;
    age: number = 18;

    constructor(id: number, name: string) {
        this.id = id;
        this.name = name;
    }

    introduce(): string {
        return `hello,I am ${this.name},and I am ${this.age} years old`;
    }
}
```

### 对象创建

创建对象的关键字为 `new`，可以访问对象身上的属性，并调用对象身上的方法

```typescript
console.log(person.name); //读

person.name = 'lisi'; //写
console.log(person.name);

let intro = person.introduce();
console.log(intro);
```

### 静态成员

静态成员隶属于类本身，而不属于某个对象实例，静态成员通常用于定义一些常量、工具方法

定义静态成员需要使用 `static` 关键字

静态成员无需通过对象实例访问，直接通过类本身访问即可

```typescript
class Constants {
    static count: number = 1;
}

class Utils {
    static toLowerCase(str: string) {
        return str.toLowerCase();
    }
}

console.log(Constants.count);
console.log(Utils.toLowerCase('Hello World'));
```

### 继承

继承是面向对象编程中的重要机制，允许一个类（子类或派生类）继承另一个类（父类或基类）的属性和方法。派生类可以直接使用基类的特性，并根据需要添加新的特性或覆盖现有的特性。这种机制赋予面向对象程序良好的扩展性

```typescript
class Student extends Person {
    classNumber: string;
    constructor(id: number, name: string, classNumber: string) {
        super(id, name);
        this.classNumber = classNumber;
    }

    introduce(): string {
        return super.introduce() + `, and I am a student`;
    }
}

let student = new Student(1, 'xiaoming', '三年二班');
console.log(student.introduce());
```

- 类的继承需要使用关键字 `extends`
- 子类构造器中需使用 `super()` 调用父类构造器对继承自父类的属性进行初始化
- 在子类中可以使用 `this` 关键字访问继承自父类的属性和方法
- 在子类中可以使用 `super` 关键字访问父类定义的方法

### 访问修饰符

访问修饰符（Access Modifiers）用于控制类成员（属性、方法等）的可访问性。TypeScript 提供了三种访问修饰符，分别是 `private` 、`protected` 和 `public`

```typescript
class Person {
    private id: number;
    protected name: string;
    public age: number;

    constructor(id: number, name: string, age: number) {
        this.id = id;
        this.name = name;
        this.age = age;
    }
}

```

## 接口

接口（ `interface` ）是面向对象编程中的另一个重要概念。接口通常会作为一种契约或规范让类（ `class` ）去遵守，确保类实现某些特定的行为或功能。

### 定义与实现

接口使用 `interface` 关键字定义，通常情况下，接口中只会包含属性和方法的声明，而不包含具体的实现细节，具体的细节由其实现类完成

接口的实现需要用到 `implements` 关键字，实现类中，需要包含接口属性的赋值逻辑，以及接口方法的实现逻辑

```typescript
interface Person {
    id: number;
    name: string;
    age: number;
  
    introduce(): void;
}

class Student implements Person {
    id: number;
    name: string;
    age: number;

    constructor(id: number, name: string, age: number) {
        this.id = id;
        this.name = name;
        this.age = age;
    }

    introduce(): void {
        console.log('Hello,I am a student');
    }
}
```

### 多态

多态是面向对象编程中的一个重要概念，它可以使同一类型的对象具有不同的行为

创建两个不同的类分别实现接口 `Person`

```typescript
interface Person {
    id: number;
    name: string;
    age: number;
  
    introduce(): void;
}

class Student implements Person {
    id: number;
    name: string;
    age: number;

    constructor(id: number, name: string, age: number) {
        this.id = id;
        this.name = name;
        this.age = age;
    }

    introduce(): void {
        console.log('Hello,I am a student');
    }
}

class Teacher implements Person {
    id: number;
    name: string;
    age: number;

    constructor(id: number, name: string, age: number) {
        this.id = id;
        this.name = name;
        this.age = age;
    }

    introduce(): void {
        console.log('Hello,I am a teacher');
    }
}
```

分别创建 `Student` 对象和 `Teacher` 对象，然后分别调用其中的 `introduce` 方法

```typescript
let p1: Person = new Student(1, 'zhangsan', 17);
let p2: Person = new Teacher(2, 'lisi', 35);

p1.introduce();//Hello,I am a student
p2.introduce();//Hello,I am a teacher
```

### TS 中接口的特殊性

TypeScript 中的接口是一个非常灵活的概念，除了用作类的规范之外，也常用于直接描述对象的类型

```typescript
interface Person {
    name: string;
    age: number;
    gender: string;
}

let person: Person = {name: '张三', age: 10, gender: '男'};
```

## 枚举

枚举（Enumeration）是编程语言中常见的一种数据类型，其主要功能是定义一组有限的选项，例如，方向（上、下、左、右）或季节（春、夏、秋、冬）等概念都可以使用枚举类型定义

### 定义与赋值

枚举的定义需要使用 `enum` 关键字

```typescript
enum Season {
    SPRING,
    SUMMER,
    AUTUMN,
    WINTER
}
```

- 枚举值的访问
  - 像访问对象属性一样访问枚举值，例如Season.SPRING
- 枚举值的类型
  - 枚举值的类型为enum的名称，例如Season.SPRING和Season.SUMMER等值的类型都是Season

案例：

```typescript
enum Direction {
    UP,
    BOTTOM,
    LEFT,
    RIGHT
}

function move(direction: Direction) {
    if (direction === Direction.UP) {
        console.log('向上移动');
    } else if (direction === Direction.BOTTOM) {
        console.log('向下移动');
    } else if (direction === Direction.LEFT) {
        console.log('向左移动');
    } else {
        console.log('向右移动');
    }
}

move(Direction.UP);
```

### 赋值

在 TypeScript 中，枚举实际上是一个对象，而每个枚举值都是该对象的一个属性，并且每个属性都有具体的值，属性值只支持两种类型——数字或字符串

默认情况下，每个属性的值都是数字，并且从 `0` 开始递增

通过为枚举属性赋值，可以赋予枚举属性一些更有意义的信息

```typescript
enum Direction {
    UP = 'up',
    BOTTOM = 'bottom',
    LEFT = 'left',
    RIGHT = 'right'
}

enum Color {
    Red = 0xFF0000,
    Green = 0x00FF00,
    Blue = 0x0000FF
}

enum FontSize {
    Small = 12,
    Medium = 16,
    Large = 20,
    ExtraLarge = 24
}
```

## 模块化

模块化是指将复杂的程序拆解为多个独立的文件单元，每个文件被称为一个模块。在 TypeScript 中，默认情况下，每个模块都拥有自己的作用域，这意味着在一个模块中声明的任何内容（如变量、函数、类等）在该模块外部是不可见的。为了在一个模块中使用其他模块的内容，必须对这些内容进行**导入**、**导出**。

![image.png](/static/img/4b59288efa84125306187ef59c1ac150.image.png)

### 导出

```typescript
export function hello() {
    console.log('hello module A');
}

export const str = 'hello world';

export const num = 1;
```

### 导入

```typescript
import { hello, str } from './moduleA';

hello();
console.log(str);
```

### 避免命名冲突

若多个模块中具有命名相同的变量、函数等内容，将这些内容导入到同一模块下就会出现命名冲突

#### 导入重命名

```typescript
import { hello as helloFromA, str as strFromA } from "./moduleA";
import { hello as helloFromC, str as strFromC } from "./moduleC";

helloFromA();
console.log(strFromA);

helloFromC();
console.log(strFromC);
```

#### 创建模块对象

```typescript
import * as A from "./moduleA";
import * as C from "./moduleC";

A.hello();
console.log(A.str);

C.hello();
console.log(C.str);
```

### 默认导入导出

默认导出允许一个模块指定一个（最多一个）默认的导出项

```typescript
export default function hello(){
    console.log('moduleA');
}
```

由于每个模块最多有一个默认导出，因此默认导入无需关注导入项的原始名称，并且无需使用 `{}`

```typescript
import helloFromA from "./moduleA";
```

由于默认导入时无需关注导入项的名称，所以默认导出支持匿名内容，比如匿名函数

TypeScript 极速入门

<h1 style="text-align: center;font-size: 76px;line-height: 1.25;font-weight: 900;letter-spacing: -1.5px;max-width: 960px;margin: 0 auto;border-bottom: 0 !important;padding-bottom: 0 !important">
    <span style="background: -webkit-linear-gradient(315deg,#42d392 25%,#647eff);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;">渐进式</span>
    <br data-v-9e9e3e87="">
    JavaScript 框架 
</h1>
<p style="text-align: center;max-width: 960px;line-height: 1.5;color: var(--vt-c-text-2);transition: color .5s;font-size: 22px;margin: 24px auto 40px;"> 易学易用，性能出色，适用场景丰富的 Web 前端框架。 </p>




## 创建 Vue3 项目

```bash
# 使用vite直接创建项目，配置项较少，可选项目类型
npm create vite
```

```bash
# 使用vue创建项目，提供较多配置项
npm create vue@latest
```

Vue 官方 VS Code 插件：

- [TypeScript Vue Plugin (Volar) - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin)
- [Vue Language Features (Volar) - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=Vue.volar)


`main.ts` 中的 `createApp(App).mount('#app')`，vue的 `createApp()` 方法将根组件 `App` 挂载到 `#app` 的div上

Vue的三个标签（Vue2中不能有多个根标签）：

```vue
<template>
  <div class="app">
    <h1>Hello</h1>
  </div>
</template>

<script lang="ts">
export default {
    name: 'App'
  }
</script>

<style>
.app {
  background-color: #ddd;
  box-shadow: 0 0 10px;
  border-radius: 6px;
  padding: 20px;
}
</style>
```

## Vue2 写法示例

```vue
<template>
  <div class="person">
    <h2>姓名：{{ name }}</h2>
    <h2>年龄：{{ age }}</h2>
    <button @click="changeName">修改姓名</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="showTel">查看联系方式</button>
  </div>
</template>

<script lang="ts">
export default {
  name: 'Person',
  data() {
    return {
      name: '张三',
      age: 18,
      tel: '1888888888'
    }
  },
  methods: {
    changeName() {
      this.name = 'ZhangSan'
    },
    changeAge() {
      this.age += 1
    },
    showTel() {
      alert(this.tel)
    }
  }
}
</script>

<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 6px;
  padding: 20px;
}

button {
  margin: 2px;
}
</style>
```

## 组合式API与选项式API

Vue2：选项式API（*OptionsAPI*）

Vue3：组合式API（*CompositionAPI*）

### Options API

`Options`类型的 `API`，数据、方法、计算属性等，是分散在：`data`、`methods`、`computed`中的，若想新增或者修改一个需求，就需要分别修改：`data`、`methods`、`computed`，不便于维护和复用。

![1.gif](/static/img/001078a431451d7b30fdca5a881da93f.1.gif)

![2.gif](/static/img/081c2afd9fe0daba18cca6af11851425.2.gif)

### Composition API

可以用函数的方式，更加优雅的组织代码，让相关功能的代码更加有序的组织在一起。


![3.gif](/static/img/0be73d361a75497646b2c4e83c140a98.3.gif)

![4.gif](/static/img/eed25f18c3bce508f867bf8ef20f6f68.4.gif)

:::note{title="注"}
动图原创作者：大帅老猿
:::

## setup

### 拉开序幕

`setup` 是 `Vue3` 中的一个新的配置项，其值为一个函数，组件中所用到的：数据、方法、计算属性、监视等，均配置在 `setup` 中

- `setup` 函数返回的对象中的内容，可直接在模板中使用
- `setup` 中访问 `this` 是 `undefined`
- `setup` 在 `beforeCreate` 之前

`setup` 可以和选项式API同时存在，选项式API可以访问到 `setup` 中的属性和方法，反之不可

```vue
<script lang="ts">
export default {
  name: 'Person',
  // setup 中的 this 是undefined
  setup() {
    // 数据 -> 此时数据不是响应式
    let name = '张三'
    let age = 18
    let tel = '188888'

    // 方法
    function changeName() {
      name = 'zhangsan' // name值变化，页面不变
    }
    const changeAge = () => {
      age += 1
    }
    const showTel = () => {
      alert(tel)
	}

    return {name, age, changeName, changeAge, showTel}
  }
}
</script>
```

### setup的返回值

- 对象：渲染到模板的对象和方法等
- 函数：自定义渲染内容，类似于react函数组件用return来指定渲染内容

### setup语法糖

```vue
<script lang="ts">
export default {
  name: 'Person',
}
</script>

<script setup lang="ts">
let name = '张三'
let age = 18
let tel = '188888'

function changeName() {
  name = 'zhangsan'
}
const changeAge = () => {
  age += 1
}
const showTel = () => {
  alert(tel)
}
</script>
```

## 响应式数据

### 基本类型的响应式数据

`Vue3` 中的 `ref` 不同于 `Vue2` 中的 `ref`，`Vue3` 中，`ref` 是一个函数，从 `vue` 中引用，`const age = ref(18)`，返回一个 `RefImpl` 的实例对象，简称 `ref对象` 或 `ref`，`ref` 对象的 `value` **属性是响应式的**

- `JS`中操作数据需要：`xxx.value`，模板中不需要`.value`，直接使用
- 对于`let name = ref('张三')`来说，`name`不是响应式的，`name.value`是响应式的

```vue
<script setup lang="ts">
import { ref } from 'vue'

let name = ref('张三')
const age = ref(18)
let tel = '188888'

// 方法
function changeName() { 
  name.value = 'zhangsan'
}
const changeAge = () => {
  age.value += 1
}
const showTel = () => {
  alert(tel)
}
</script>
```

### 对象类型的响应式数据

`reactive` 定义对象类型的响应式数据，不能用于定义基本类型，但 `ref` 也可用于定义对象类型，其内部也是调用了 `reactive`

`let 响应式对象= reactive(源对象)`，返回一个 `Proxy` 的实例对象（简称：响应式对象），定义的响应式数据是“深层次”的

```vue
<script setup lang="ts">
import { reactive } from 'vue';

let car = reactive({ brand: 'BMW M3 GTR', price: 100 })
let games = reactive([
  {id: 'asjelf1', name: 'Titanfall 2'},
  {id: 'asjelf2', name: 'NFS Heat'},
  {id: 'asjelf3', name: 'Brotato'},
])
console.log('car', car)

const changeCar = () => {
  car.price += 10
  car.brand = 'RSR'
}
const changeGame = () => {
  games[0].name = 'Titanfall 3? 不可能辣'
}
</script>
```

### `ref` 与 `reactive` 对比

宏观角度：

1. `ref`用来定义：**基本类型数据**、**对象类型数据**；
2. `reactive`用来定义：**对象类型数据**。

区别：

1. `ref`创建的变量必须使用`.value`（可以使用`volar`插件自动添加`.value`）
2. `reactive`重新分配一个新对象，会**失去**响应式（可以使用`Object.assign`去整体替换）

推荐使用原则：

1. 若需要一个基本类型的响应式数据，必须使用`ref`
2. 若需要一个响应式对象，层级不深，`ref`、`reactive`都可以
3. 若需要一个响应式对象，且层级较深，推荐使用`reactive`

### `toRefs` 与 `toRef`

`toRefs` 用于在解构 `reactive` 定义的响应式对象时取得 `ref` 响应式数据，即：将 `reactive` 定义的响应式对象变为由 `ref` 响应式数据组成的对象

`toRef` 则是取出其中的某一组key-value

```vue
<script setup lang="ts">
import { reactive, toRefs } from 'vue'

let person = reactive({
  name: '张三',
  age: 18
})

let { name, age } = toRefs(person)
console.log('toRefs(person)', toRefs(person))
    
let 

function changeName() {
  name.value += '~'
}
function changeAge() {
  age.value += 1
}
</script>
```

![image.png](/static/img/3b6d7109b6a79824b8091456c0ec9fac.image.png)

## 计算属性

> **单向绑定**
>
> ```vue
> <input type="text" :value="lastName">
> ```
>
> **双向绑定**
>
> ```vue
> <input type="text" v-model="firstName">
> ```

计算属性有缓存，重复使用时不会重复调用其中的方法

```vue
<template>
  <div class="person">
    姓：<input type="text" v-model="firstName">
    <br>
    名：<input type="text" v-model="lastName">
    <br>
    <button @click="changeFullName">将全名改为lisi</button>
    <br>
    全名：<span>{{fullName}}</span><br>
    全名：<span>{{fullName}}</span><br>
    全名：<span>{{fullName}}</span><br>
  </div>
</template>

<script lang="ts">
export default {
  name: 'Computed',
  // setup 中的 this 是undefined
}
</script>

<script setup lang="ts">
import { ref, computed } from 'vue'
let firstName = ref('zhang')
let lastName = ref('san')

// fullName 是计算属性，且是只读的
// let fullName = computed(() => {
//   return firstName.value.slice(0, 1).toUpperCase() + firstName.value.slice(1) + '-' + lastName.value
// })

// fullName 是计算属性，且是可读可写的
let fullName = computed({
  get() {
    return firstName.value.slice(0, 1).toUpperCase() + firstName.value.slice(1) + '-' + lastName.value
  },
  set(changedValue) {
    const [fN, lN] = changedValue.split('-')
    firstName.value = fN
    lastName.value = lN
  }
})

const changeFullName = () => {
  fullName.value = 'li-si'
}
</script>

<style scoped>
.person {
  background-color: pink;
  box-shadow: 0 0 10px;
  border-radius: 6px;
  padding: 20px;
}

button {
  margin: 2px;
}
</style>
```

![GIF 2024-1-28 22-24-48.gif](/static/img/d43e059d8204686d7aa3a0d6527acfaa.GIF%202024-1-28%2022-24-48.gif)

## 监视

`watch` 监视数据的变化（与 Vue2 中作用一致）

Vue3 中的 `watch` 只能监视以下四种数据：

1. 一个函数，返回一个值
2. 一个` ref`
3. 一个 `reactive` 响应式对象
4. ...或是由以上类型的值组成的数组

### 监视 `ref` 定义的基本类型数据

直接写数据名，监视的是其 `value` 值的改变

```vue
<template>
  <div class="sum">
    <h1>监视 ref 类型数据</h1>
    <h2>当前求和为：{{ sum }}</h2>
    <button @click="add">点击sum+1</button>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';

let sum = ref(0);

const add = () => {
  sum.value += 1;
};

const stopWatch = watch(sum, (newValue, oldValue) => {
  console.log(`sum由${oldValue}变为${newValue}`);
  if (newValue >= 10) {
    // 停止监视
    stopWatch();
  }
})

</script>
```

### 监视 `ref` 定义的对象类型数据

默认情况下不传第三个参数，监视的是对象的地址值，若要监视对象内部属性的变化，需要手动开启深度监视

```vue
<template>
  <div class="sum">
    <h1>监视 ref 对象类型数据</h1>
    <h2>姓名：{{ person.name }}</h2>
    <h2>年龄：{{ person.age }}</h2>
    <button @click="changeName">修改姓名</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changePerson">修改此人</button>
  </div>
</template>

<script lang="ts">
export default {
  name: 'Sum'
}
</script>

<script setup lang="ts">
import { ref, watch } from 'vue';

let person = ref({
  name: '张三',
  age: 18
});

function changeName() {
  person.value.name += '~';
}

function changeAge() {
  person.value.age += 1;
}

function changePerson() {
  person.value = { name: '李四', age: 50 };
}

// 第三个参数为配置项：deep开启深度监视，immediate在初始时立即监视
watch(person, (newValue, oldValue) => {
  console.log('Person变化', newValue, oldValue);
}, { deep: true })

</script>
```


:::warning{title="注意"}
由于 `watch` 监视的是对象的地址值，因此，如果直接修改整个 `ref` 定义的对象，则 `newValue` 为修改后的值，`oldValue` 为修改前的值；而如果仅修改对象中的属性值，对象在内存中的地址没有发生变化，因此 `newValue` 和 `oldValue` 都为修改后的值。
:::

![1.gif](/static/img/17a3f2ef4d58fb1aacfbf0249c3dab37.reactive.gif)

> Vue 3 官方文档：
>
> - **`immediate`**：在侦听器创建时立即触发回调。第一次调用时旧值是 `undefined`。
> - **`deep`**：如果源是对象，强制深度遍历，以便在深层级变更时触发回调。参考[深层侦听器](https://cn.vuejs.org/guide/essentials/watchers.html#deep-watchers)。
> - **`flush`**：调整回调函数的刷新时机。参考[回调的刷新时机](https://cn.vuejs.org/guide/essentials/watchers.html#callback-flush-timing)及 [`watchEffect()`](https://cn.vuejs.org/api/reactivity-core.html#watcheffect)。
> - **`onTrack / onTrigger`**：调试侦听器的依赖。参考[调试侦听器](https://cn.vuejs.org/guide/extras/reactivity-in-depth.html#watcher-debugging)。
> - **`once`**: 回调函数只会运行一次。侦听器将在回调函数首次运行后自动停止。 

### 监视 `reactive` 定义的数据

隐式创建深层监听，`{deep: false}` 不可用

```vue
<script setup lang="ts">
import { reactive, watch } from 'vue';

let person = reactive({
  name: '张三',
  age: 18
});

function changeName() {
  person.name += '~';
}

function changeAge() {
  person.age += 1;
}

function changePerson() {
  // person的地址没有变化，因此 newValue 和 oldValue 仍然相同
  Object.assign(person, { name: '李四', age: 50 });
}

watch(person, (newValue, oldValue) => {
  console.log('Person变化', newValue, oldValue);
})

</script>
```

### 监视 `ref` 或 `reactive` 定义的对象中的<span style="color: skyblue">某个属性</span>

- 若该属性值不是对象类型，需要 `getter` 函数
- 若该属性值是对象类型，建议写函数

```vue
<script setup lang="ts">
import { reactive, watch } from 'vue';

let person = reactive({
  name: '张三',
  age: 18,
  car: {
    brand: '奔驰',
    price: 100
  }
});

function changeName() {
  person.name += '~';
}

function changeAge() {
  person.age += 1;
}

function changePerson() {
  // person的地址没有变化，因此 newValue 和 oldValue 仍然相同
  Object.assign(person, { name: '李四', age: 50 });
}

function changeBrand() {
  person.car.brand = '保时捷'
}
function changePrice() {
  person.car.price = 150
}
function changeCar() {
  person.car = { brand: '宝马', price: 160 }
}

/*watch(() => person.name, (newValue, oldValue) => {
  console.log('Person变化', newValue, oldValue);
}, {deep: true})*/
    
watch(() => person.car, (newValue, oldValue) => {
  console.log('Person变化', newValue, oldValue);
}, {deep: true})

</script>
```

:::note{title="有趣的现象"}
```js
watch(person.car, (newValue, oldValue) => {
  console.log('Person变化', newValue, oldValue);
})
```

修改 `car` 的属性会监视到，而直接修改 `car` 却监视不到

```js
watch(() => person.car, (newValue, oldValue) => {
  console.log('Person变化', newValue, oldValue);
})
```

修改 `car` 的属性不会监视，而直接修改 `car` 能够监视到，此时需要开启 `deep: true` 才能监视到 `car` 属性的变化（无论是否为 `reactive`），因为 `person` 是 `reactive` 定义的对象，而 `person.car` 不是
:::

### 监视上述多个数据

```js
watch([() => person.name, () => person.car.brand], (newValue, oldValue) => {
  console.log('Person变化', newValue, oldValue);
}, {deep: true})
```

### watchEffect

立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行。

- `watch` 要明确指出监视的数据
- `watchEffect` 不需要明确指出监视的数据
- 二者都能监听响应式数据的变化，监听数据变化的方式不同

```vue
<template>
  <div class="sum">
    <h2>需求：当护甲低于40或kd大于5时，打印</h2>
    <h2>当前护甲：{{ armor }}</h2>
    <h2>当前kd：{{ kd }}</h2>
    <button @click="changeArmor">armor</button>
    <button @click="changeKd">kd</button>
  </div>
</template>

<script lang="ts">
export default {
  name: 'Sum'
}
</script>

<script setup lang="ts">
import { ref, watch, watchEffect } from 'vue';

let armor = ref(100);
let kd = ref(0);

function changeArmor() {
  armor.value -= 10;
}

function changeKd() {
  kd.value += 1;
}

// watch 实现
/*watch([armor, kd], (value) => {
  let [newArmor, newKd] = value;
  if (newArmor <= 40 || newKd >= 5) {
    console.log('打印');
  }
})*/

// watchEffect 实现
watchEffect(() => {
  if (armor.value < 40 || kd.value > 5) {
    console.log('打印');
  }
})
</script>
```

## 标签的 ref 属性

用于注册模板引用

`ref` 作用于普通 `html` 标签上，拿到的是 DOM 元素；作用于 `Vue` 组件上，拿到的是该组件实例，若需要拿到某些属性，需要在该组件中的 `setup` 中使用 `defineExpose` 进行暴露

```vue
<template>
  <div class="sum">
    <h1>中国</h1>
    <h2 ref="province">山东</h2>
    <h3>烟台</h3>
    <button @click="showH2">输出h2元素</button>
  </div>
</template>

<script lang="ts">
export default {
  name: 'City'
}
</script>

<script setup lang="ts">
import { ref } from 'vue';

let province = ref();

function showH2() {
  console.log(province.value)
}
</script>
```



## 布局样式

一个 `<style>` 标签可以使用 `scoped` 或 `module` attribute 来帮助封装当前组件的样式。使用了不同封装模式的多个 `<style>` 标签可以被混合入同一个组件。

## props

组件间传递数据

*App.vue*

```vue
<template>
  
  
  
  <Person a="haha" :personList="personList" />
  
</template>

<script setup lang="ts">
import Car from './components/Car.vue';
import City from './components/City.vue';
import Computed from './components/Computed.vue';
import Person from './components/Person.vue';
import Sum from './components/Sum.vue';
import { reactive } from 'vue';
import { type Persons } from '@/types';

let personList = reactive<Persons>([
  {
    id: '3456-7890',
    name: '张三',
    age: 18
  },
  {
    id: '3456-7891',
    name: '李四',
    age: 20
  },
  {
    id: '3456-7892',
    name: '王五',
    age: 22,
    x: 166
  }
]);
</script>

<script lang="ts">

export default {
  name: 'App'
}
</script>
```

*components/Person.vue*

```vue
<template>
  <div class="person">
    <ul>
      
      
      <li v-for="person in personList" :key="person.id">
        <span>{{ person.name }} - {{ person.age }}</span>
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
export default {
  name: 'Person',
}
</script>

<script setup lang="ts">
import type { Persons } from '@/types';

// 直接接收props
// let props = defineProps(['a', 'personList'])

// 接收props并限制类型
// let props = defineProps<{ personList: Persons }>()

// 接收props + 限制类型 + 限制必要性 + 指定默认值
let props = withDefaults(defineProps<{ personList?: Persons }>(), {
  personList: () => [{
    id: '000',
    name: '康师傅',
    age: 30
  }]
})
console.log('props',props)
</script>
```

*types/index.ts*

```typescript
export interface PersonType {
  id: string,
  name: string,
  age: number,
  x?: number
}

export type Persons = PersonType[]
```

Vue学习01：快速上手

## 变量与可变性

### 变量

变量使用 `let` 定义

1. 不可变变量
    当变量不可变时，一旦值被绑定一个名称上，就不能改变这个值
    Rust 鼓励利用**不可变性**

    > Rust 编译器保证，如果声明一个值不会变，它就真的不会变，所以你不必自己跟踪它。这意味着你的代码更易于推导。

2. 可变变量
    在变量名前添加 `mut` 来使其可变





### 常量

常量使用 `const` 定义

1. 不允许对常量使用 `mut`
2. 常量默认不可变且**总不可变**
2. 常量定义时***必须***注明值的类型
2. 常量可以在任何作用域中声明，包括全局作用域
2. 常量只能被设置为常量表达式，而不可以是其他任何只能在运行时计算出的值
2. Rust 对常量的命名约定是在单词之间使用全大写加下划线
2. 编译器能够在编译时计算一组有限的操作，这使我们可以选择以更容易理解和验证的方式写出此值，而不是直接设置为一个数值

```rust
const THREE_HOURS_IN_SECONDS: u32 = 60 * 60 * 3;
```

### 隐藏

```rust
fn main() {
    let x = 5;

    let x = x + 1;

    {
        let x = x * 2;
        println!("The value of x in the inner scope is: {x}");
    }

    println!("The value of x is: {x}");
}
```

当 `let` 一个同名变量时，编译器将看到第二个变量。

实际上，第二个变量“遮蔽”了第一个变量，此时任何使用该变量名的行为中都会视为是在使用第二个变量，直到第二个变量自己也被隐藏或第二个变量的作用域结束。

可以用相同变量名称来隐藏一个变量，以及重复使用 `let` 关键字来多次隐藏。

隐藏和 `mut` 的区别：

1. 当不小心尝试对变量重新赋值时，如果没有使用 `let` 关键字，就会导致编译时错误。通过使用 `let`，我们可以用这个值进行一些计算，不过计算完之后变量仍然是不可变的。

2. 当再次使用 `let` 时，实际上创建了一个新变量，我们可以改变值的类型，并且复用这个名字。例如：

   ```rust
   let spaces = "   ";
   let spaces = spaces.len();
   ```

   若使用 `mut` 修改变量的值，则不能改变变量的类型。



## 数据类型

在 Rust 中，每一个值都属于某一个 **数据类型**（*data type*）。

Rust 是 **静态类型**（*statically typed*）语言，也就是说在编译时就必须知道所有变量的类型。

编译器通常可以推断出我们想要用的类型，但当多种类型均有可能时（比如使用 `parse` 将 `String` 转换为数字时），必须增加类型注解。(有点类似ts)

```rust
let guess: u32 = "42".parse().expect("Not a number!");
// 不加会报错
```

### 标量类型

**标量**（*scalar*）类型代表一个单独的值。Rust 有四种基本的标量类型：整型、浮点型、布尔类型和字符类型。

#### 整型

Rust 数字类型默认是 `i32`，`isize` 或 `usize` 主要作为某些集合的索引。

| 长度    | 有符号  | 无符号  |
| ------- | ------- | ------- |
| 8-bit   | `i8`    | `u8`    |
| 16-bit  | `i16`   | `u16`   |
| 32-bit  | `i32`   | `u32`   |
| 64-bit  | `i64`   | `u64`   |
| 128-bit | `i128`  | `u128`  |
| arch    | `isize` | `usize` |

范围：
$$
有符号：-(2^{n - 1}) 到 2^{n - 1} - 1 \\ 无符号：0 到 2^n - 1
$$
`isize` 和 `usize` 类型依赖运行程序的计算机架构：64 位架构上它们是 64 位的，32 位架构上它们是 32 位的。

| 数字字面值                    | 例子          |
| ----------------------------- | ------------- |
| Decimal (十进制)              | `98_222`      |
| Hex (十六进制)                | `0xff`        |
| Octal (八进制)                | `0o77`        |
| Binary (二进制)               | `0b1111_0000` |
| Byte (单字节字符)(仅限于`u8`) | `b'A'`        |

可以以上表任意一种形式编写数字字面值

可以是多种数字类型的数字字面值允许使用类型后缀，例如 `57u8` 来指定类型，同时也允许使用 `_` 做为分隔符以方便读数，例如`1_000`，它的值与你指定的 `1000` 相同。

> 整型溢出
>
> - `--debug`：Rust检查这类问题并使程序 *panic*
> - `--release`：Rust不会**检测会导致 *panic* 的整型溢出，而是进行二进制补码wrapping（比此类型能容纳最大值还大的值会回绕到最小值，值 `256` 变成 `0`，值 `257` 变成 `1`）
> - 依赖整型溢出 wrapping 的行为被认为是一种错误。
>
> 为了显式地处理溢出的可能性，可以使用这几类标准库提供的原始数字类型方法：
>
> - 所有模式下都可以使用 `wrapping_*` 方法进行 wrapping，如 `wrapping_add`
> - 如果 `checked_*` 方法出现溢出，则返回 `None`值
> - 用 `overflowing_*` 方法返回值和一个布尔值，表示是否出现溢出
> - 用 `saturating_*` 方法在值的最小值或最大值处进行饱和处理

#### 浮点型

Rust 的浮点数类型是 `f32` 和 `f64`，分别占 32 位和 64 位。默认类型是 `f64`。

```rust
fn main() {
    let x = 2.0; // f64

    let y: f32 = 3.0; // f32
}
```

#### 数值运算

加法、减法、乘法、除法和取余

整数除法：向零舍入到最接近的整数（正整数向下取整，负整数向上取整）

```rust
fn main() {
    // addition
    let sum = 5 + 10;

    // subtraction
    let difference = 95.5 - 4.3;

    // multiplication
    let product = 4 * 30;

    // division
    let quotient = 56.7 / 32.2;
    let truncated = -5 / 3; // 结果为 -1

    // remainder
    let remainder = 43 % 5;
}
```

#### 布尔型

使用 `bool` 表示，值为 `true` 或 `false`

#### 字符类型

使用 `char` 表示，用单引号声明，是最原生的字母类型，大小为四个字节。

```rust
let c = 'z';
let z: char = 'ℤ'; // with explicit type annotation
let heart_eyed_cat = '😻';
```

> 在 Rust 中，带变音符号的字母（Accented letters），中文、日文、韩文等字符，emoji（绘文字）以及零长度的空白字符都是有效的 `char` 值。

### 复合类型

**复合类型**（*Compound types*）可以将多个值组合成一个类型。Rust 有两个原生的复合类型：元组（tuple）和数组（array）。

#### 元组类型

元组长度固定，一旦声明，其长度不会增大或缩小。元组中的每一个位置都有一个类型，不必相同。

元组可以用解构或索引取值。

```rust
let tup = (500, 6.4, 1);
// 解构
let (x, y, z) = tup;
println!("{x}, {y}, {z}");

let t: (i32, f64, u8) = (500, 6.4, 1);
let num1 = t.0;
let num2 = t.1;
let num3 = t.2;
println!("num1: {num1}, num2: {num2}, num3: {num3}");
```

不带任何值的元组有个特殊的名称，叫做 **单元（unit）** 元组。这种值以及对应的类型都写作 `()`，表示空值或空的返回类型。如果表达式不返回任何其他值，则会隐式返回单元值。

#### 数组类型

数组中元素类型必须相同，数组在栈 (stack) 上为数据分配空间。

数组的长度是固定的，如果希望伸缩长度，应该使用 `vector` 。

```rust
let months = ["January", "February", "March", "April", "May", "June", "July",
              "August", "September", "October", "November", "December"];
let a: [i32; 5] = [1, 2, 3, 4, 5];

// 数组包含 5 个元素，元素的值为 3
let a = [3; 5];
```

数组的元素访问使用方括号：`a[0]`，如果进行无效的元素访问（例如超出数组长度），Rust会立即退出而不是允许内存访问并继续执行。



## 函数

Rust 代码中的函数和变量名使用 *snake case* 规范风格。在 *snake case* 中，所有字母都是小写并使用下划线分隔单词。

```rust
fn main() {
    println!("Hello, world!");

    another_function();
}

fn another_function() {
    println!("Another function.");
}
```

函数可以定义在任何位置，只要其在可被调用的作用域内即可，像这样也可以：

```rust
pub fn tuples() {
  let tup = (500, 6.4, 1);
  let (x, y, z) = tup;
  println!("{x}, {y}, {z}");

  ab();

  fn ab() {
    println!("hello");
  }
}
```

### 参数

**必须**声明每个参数的类型，参数之间使用逗号分隔。

```rust
fn show_number(num: i32) {
  println!("The number is: {num}");
}
```

### 语句和表达式

**语句**（*Statements*）是执行一些操作但**不返回值**的指令。 **表达式**（*Expressions*）计算并**产生一个值**。

`let y = 6` 是一个语句，其中 `6` 是表达式，表达式可以是语句的一部分。

大部分 Rust 代码都是由表达式组成的，例如数学运算  `5*6` 是一个表达式，函数调用是一个表达式，宏调用是一个表达式，用大括号创建一个新的块作用域也是一个表达式。例如：

```rust
{
    let x = 3;
    x + 1
}
```

这个代码块是一个表达式，值为4。

表达式的结尾**<u>没有分号</u>**。如果在表达式的结尾加上分号，它就变成了语句，而语句不会返回值。

### 具有返回值的函数

具有返回值的函数，应当用 `->` 声明返回值的类型。

```rust
pub fn get_five() -> i32 {
  5
}
```

在 Rust 中，函数的返回值等同于函数体**最后一个表达式**的值。

```rust
fn plus_one(x: i32) -> i32 {
  x + 1
}
```

## 注释

### 单行注释

可以独立一行存在，也可以在代码行的末尾

```rust
// 这是一行注释
```

### 文档注释

文档注释使用三斜杠 `///` 而不是双斜杠以支持 Markdown 注解来格式化文本。文档注释就位于需要文档的项的之前。

```rust
/// Adds one to the number given.
///
/// # Examples
///
/// ```
/// let arg = 5;
/// let answer = my_crate::add_one(arg);
///
/// assert_eq!(6, answer);
/// ```
pub fn add_one(x: i32) -> i32 {
    x + 1
}
```

常见的文档注释标题：

- **Example**：运行示例，文档注释中增加示例代码块可以用来进行 `cargo test`。
- **Panics**：这个函数可能会 `panic!` 的场景。并不希望程序崩溃的函数调用者应该确保他们不会在这些情况下调用此函数。
- **Errors**：如果这个函数返回 `Result`，此部分描述可能会出现何种错误以及什么情况会造成这些错误，这有助于调用者编写代码来采用不同的方式处理不同的错误。
- **Safety**：如果这个函数使用 `unsafe` 代码（这会在第十九章讨论），这一部分应该会涉及到期望函数调用者支持的确保 `unsafe` 块中代码正常工作的不变条件（invariants）。

文档注释风格 `//!` 为包含注释的项，而不是位于注释之后的项增加文档。这通常用于 crate 根文件（通常是 *src/lib.rs*）或模块的根文件为 crate 或模块整体提供文档。

作为一个例子，为了增加描述包含 `add_one` 函数的 `my_crate` crate 目的的文档，可以在 *src/lib.rs* 开头增加以 `//!` 开头的注释。注意 `//!` 的最后一行之后没有任何代码。

```rust
//! # My Crate
//!
//! `my_crate` is a collection of utilities to make performing certain
//! calculations more convenient.

/// Adds one to the number given.
// --snip--
```

## 控制流

> 根据条件是否为真来决定是否执行某些代码，以及根据条件是否为真来重复运行一段代码的能力是大部分编程语言的基本组成部分。

### `if` 表达式

#### 基本使用

`if` 表达式代码中的条件**必须**是 `bool` 值，如果不是，Rust将会抛出错误：Rust 并不会尝试自动地将非布尔值转换为布尔值，必须总是显式地使用布尔值作为 `if` 的条件。

```rust
fn main() {
  let number = 3;

  if number < 5 {
    println!("条件为真");
  } else {
    println!("条件为假");
  }
}
```

#### 使用 `else if` 处理多重条件

```rust
fn main() {
  let number: i32 = 56;

  if number % 4 == 0 {
    println!("number能被4整除");
  } else if number % 3 == 0 {
    println!("number能被3整除");
  } else if number % 2 == 0 {
    println!("number能被2整除");
  } else {
    println!("其他情况")
  }
}
```

使用过多的 `else if` 表达式会使代码显得杂乱无章，所以如果有多于一个 `else if` 表达式，最好重构代码（例如使用 `match`）。

#### 在 `let` 语句中使用 `if`

因为 `if` 是一个表达式，可以在 `let` 语句中，将 `if` 表达式的返回值赋给一个变量，表达式的返回值必须是相同类型

```rust
fn main() {
    let condition = true;
    let number = if condition { 5 } else { 6 };

    println!("符合条件的数字是：{number}");
}
```

:::info{title="注意"}
代码块的值是其最后一个表达式的值，而数字本身就是一个表达式。
:::

### 使用循环重复执行

#### 使用 `loop` 重复执行代码

`loop` 关键字告诉 Rust 一遍又一遍地执行一段代码直到你明确要求停止。

```rust
fn main() {
    loop {
        println!("again")
    }
}
```

`loop` 的一个用例是重试可能会失败的操作，比如检查线程是否完成了任务。然而你可能会需要将操作的结果传递给其它的代码。如果将返回值加入你用来停止循环的 `break` 表达式，它会被停止的循环返回：

```rust
fn cou() {
    let mut counter = 0;

    let result = loop {
        counter += 1;

        if(counter == 10) {
            // 使用break关键字返回值 counter * 2
            break counter * 2;
        }
    };

    println!("结果是：{result}")
}
```

如果存在嵌套循环，这时 `break` 和 `continue` 作用于**最内层循环**，可以为一个循环指定一个**循环标签**，然后将标签与 `break` 或 `continue` 一起使用，使这些关键字作用于打了标签的循环

```rust
fn main() {
    let mut count = 0;

    'counting_up: loop {
        println!("count = {count}");
        let mut remaining = 10;

        loop {
            println!("remaining = {remaining}");
            if(remaining == 9) {
                break;
            }
            if(count == 2) {
                break 'counting_up;
            }
            remaining -= 1;
        }

        count += 1;
    }

    println!("最终count的值是{count}")
}
```

该段代码的执行结果为：

![image.png](/static/img/85170b196120dc1ecf0d7fbac10e6032.image.png)

#### `while` 条件循环

```rust
fn main() {
    let mut number: i32 = 3;

    while number > 0 {
        println!("number: {number}");

        number -= 1;
    }

    println!("循环结束");
}
```

#### 使用 `for` 遍历集合

使用 `while` 也可以通过不断递增索引值来遍历集合，但是如果索引长度或测试条件不正确会导致程序panic（例如更改了数组长度却忘记更新条件）

```rust
fn main() {
    let a: [i32; 5] = [10, 20, 30, 40, 50];

    for element in a {
        println!("{element}");
    }
}
```

#### 在 `for` 中使用 `Range`

```rust
fn main() {
    // rev 方法用来反转 range
    for number in(1..4).rev() {
        println!("{number}");
    }
    println!("循环结束");
}
```

## 尝试

### 相互转换摄氏与华氏温度

```rust
use std::io;

fn main() {
    loop {
        println!("请选择要输入的温度类型：");
        println!("1.摄氏温度");
        println!("2.华氏温度");
        println!("其他数字：退出");

        let mut convert_type: String = String::new();
        let mut temperature: String = String::new();

        io::stdin().read_line(&mut convert_type).expect("读入失败");

        let convert_type: u32 = match convert_type.trim().parse() {
            Ok(num) => num,
            Err(_) => continue,
        };

        if convert_type != 1 && convert_type != 2 {
            break;
        }

        println!("请输入温度：");

        io::stdin().read_line(&mut temperature).expect("读入失败");

        let temperature: f64 = match temperature.trim().parse() {
            Ok(num) => num,
            Err(_) => continue,
        };

        if convert_type == 1 {
            let fahrenheit = 32.0 + temperature * 1.8;
            println!("华氏温度为：{fahrenheit}°F");
        } else if convert_type == 2 {
            let celsius = (temperature - 32.0) / 1.8;
            println!("摄氏温度为：{celsius}°C");
        } else {
            break;
        }
    }
}

```

### 生成第n个斐波那契数

```rust
use std::io;

fn main() {
    let mut n: String = String::new();

    io::stdin().read_line(&mut n).expect("读入失败");

    let mut n: u32 = match n.trim().parse() {
        Ok(num) => num,
        Err(_) => return,
    };

    let mut prev_number: u32 = 1;
    let mut next_number: u32 = 1;

    let mut result: u32 = 0;

    if n == 1 {
        result = prev_number;
    } else if n == 2 {
        result = next_number;
    } else {
        while n > 2 {
            result = prev_number + next_number;
            prev_number = next_number;
            next_number = result;
            n -= 1;
        }
    }

    println!("第{n}个斐波那契数是{result}");
}
```

Rust学习02：编程概念

![image.png](/static/img/e6d2994b5f5997e16a0caf0fe927027d.image.png)




# Learn Rust

## 安装Rust

[安装 - Rust 程序设计语言 简体中文版](https://kaisery.github.io/trpl-zh-cn/ch01-01-installation.html)


## 猜数字游戏

```rust
use std::{cmp::Ordering, io};

use rand::Rng;

fn main() {
    println!("Guess the number!");

    let secret_number = rand::thread_rng().gen_range(1..=100);
    // println!("The secret number is: {secret_number}");

    loop {
        println!("Please input your guess.");

        // rust中，变量默认是不可变的
        // 变量可变：mut
        // let apples = 5; // 不可变
        // let mut bananas = 5; // 可变

        let mut guess = String::new();

        io::stdin()
            .read_line(&mut guess)
            .expect("Failed to read line");
        // read_line 的工作是，无论用户在标准输入中键入什么内容，都将其追加（不会覆盖其原有内容）到一个字符串中，返回一个类型为 Result 的值
        // Result 是一种枚举类型，通常也写作 enum。
        // Result 的成员是 Ok 和 Err，Ok 成员表示操作成功，内部包含成功时产生的值。Err 成员则意味着操作失败，并且包含失败的前因后果。

        let guess: u32 = match guess.trim().parse() {
            Ok(num) => num,
            Err(_) => continue,
        };

        println!("You guessed : {guess}");

        match guess.cmp(&secret_number) {
            Ordering::Less => println!("Too small!"),
            Ordering::Greater => println!("Too Big!"),
            Ordering::Equal => {
                println!("You win!");
                break;
            }
        }
    }
}

```

### 变量

变量默认不可变（？but为什么叫变量），若需要该变量可变，需要加上 `mut` 。

Rust 允许用一个新值来 **隐藏** （*Shadowing*） `guess` 之前的值。这个功能常用在需要转换值类型之类的场景。它允许我们复用 `guess` 变量的名字，而不是被迫创建两个不同变量，诸如 `guess_str` 和 `guess` 之类。

### 引用

`&` 表示这个参数是一个 引用（reference），它允许多处代码访问同一处数据，而无需在内存中多次拷贝。引用是一个复杂的特性，Rust 的一个主要优势就是安全而简单的操纵引用。完成当前程序并不需要了解如此多细节。现在，我们只需知道它像变量一样，默认是不可变的。因此，需要写成 `&mut guess` 来使其可变，而不是 `&guess`

### Result

`Result` 的成员是 `Ok` 和 `Err`，`Ok` 成员表示操作成功，内部包含成功时产生的值。`Err` 成员则意味着操作失败，并且包含失败的前因后果。

[`Result`](https://doc.rust-lang.org/std/result/enum.Result.html) 是一种[*枚举类型*](https://kaisery.github.io/trpl-zh-cn/ch06-00-enums.html)，通常也写作 *enum*。枚举类型变量的值可以是多种可能状态中的一个。我们把每种可能的状态称为一种 *枚举成员（variant）*。

### `match` 语句

一个 `match` 表达式由 **分支（arms）** 构成。一个分支包含一个 **模式**（*pattern*）和表达式开头的值与分支模式相匹配时应该执行的代码。Rust 获取提供给 `match` 的值并挨个检查每个分支的模式。`match` 结构和模式是 Rust 中强大的功能，它体现了代码可能遇到的多种情形，并帮助你确保没有遗漏处理。

类似于 `switch` 语句。

Rust学习01：入门

PostgreSQL 是一个免费的对象-关系数据库服务器(ORDBMS)，在灵活的BSD许可证下发行。

在Rocky 9操作系统中，PostgreSQL的安装却容易出现问题，下面简单总结了一个常见的安装问题。





## 安装 PostgreSQL

由于Rocky的包管理器默认为dnf，可以使用dnf模块化安装：

查看module列表：
```bash
sudo dnf module list
```

![image-1703570726831.png](/static/img/c0aae88bc6bee9b521eac0374e9e3b5a.image-1703570726831.png)


安装PostgreSQL：
```bash
sudo dnf module install postgresql
```

## 启动 PostgreSQL

安装完成后，执行 `sudo systemctl start postgresql` 启动，此时可能报错如下：
![image-1703570837728.png](/static/img/882f98030a89f92fe12aec2edf705f46.image-1703570837728.png)
执行 `sudo systemctl status postgresql` 查看状态，通常会发现 exit code 为1，提示数据库初始化失败。


## 解决问题

### Step 1

首先以PostgreSQL用户身份登录（确保当前用户具有管理员权限）：
```bash
sudo -iu postgres
```

### Step 2

初始化数据库：
```bash
[postgres]$ initdb -D /var/lib/pgsql/data
```

`-D` 用于指定数据库集群的存储位置，可以自定义位置，但需确保存在。

### Step 3

完成 Step 2 后将以系统默认语言编码创建数据库集群，如果不是你所需要的，这一步是对其进行修改。

```bash
[postgres]$ initdb --locale=en_US.UTF-8 -E UTF8 -D /var/lib/pgsql/data
```

TypeScript 极速入门

渐进式 JavaScript 框架

变量与可变性

变量

渐进式
JavaScript 框架