泛型（Generics）泛型就是“类型的参数”：把类型当成变量传进去，让同一段代码能处理不同类型，同时还能保持类型信息不

泛型就是“类型的参数”：把类型当成变量传进去，让同一段代码能处理不同类型，同时还能保持类型信息不丢失。'=

一句话：让函数/类/类型在复用时仍然保持“精确类型”。

最直观的例子：不使用泛型 vs 使用泛型

不使用泛型（类型会丢）：

function wrap(value: any) {
  return value
}
const x = wrap(123) // x: any（你失去 number 信息）

使用泛型（类型保留）：

function wrap<T>(value: T): T {
  return value
}
const x = wrap(123)   // x: number
const y = wrap('hi')  // y: string

泛型在 Vue 项目里最常用的场景

请求封装：request<T>() 返回 Promise<T>，页面拿到的是精确的接口类型

工具函数：比如 pick<T, K extends keyof T>(obj, keys) 这类

组件/props：一些高级组件会用泛型让 props 更精确（进阶）

记住关键点：

<T>：声明一个“类型变量”

T 会根据你传入的值自动推导（大多数时候不用手写）

补充： const 的规则：不能重新赋值

const x = wrap(123)
x = 456 // ❌ 不允许（const 不能重新赋值）

但如果 x 是对象/数组，可以改内部内容：

const arr = [1, 2]
arr.push(3) // ✅ 可以（改的是内部）

“在页面上怎么用”：看你是普通变量还是响应式变量

在 Vue 的 <script setup> 里：

普通 const 变量：只用于逻辑计算/常量配置，改了不会自动更新页面

<script setup lang="ts">
const title = 'Dashboard' // 常量
</script>

<template>
  <h1>{{ title }}</h1>
</template>

要让页面跟着变化：用 ref / reactive

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

const count = ref(0)

function inc() {
  count.value++ // ✅ 改这里，页面会更新
}
</script>

<template>
  <div>{{ count }}</div>
  <button @click="inc">+1</button>
</template>

不会变的东西：const（常量、配置、函数、组件引用）

会变并且要渲染到页面：ref(...) / reactive(...)