vue3之泛型脚本: 在 <script setup lang="ts" generic="T"> 中，generic="T" 的作用是告诉 TypeScript 这个 <script setup> 脚本是泛型的，可以接受一个类型参数 T。这是 Vue 3.3+ 中引入的一种语法糖，用于在 <script setup> 中声明泛型类型。

通常情况下，泛型用于使组件或函数更通用和可复用，能够处理不同的类型。以下是具体的解释和用法：

1. 作用

generic="T" 声明了 <script setup> 是一个泛型脚本，T 是其泛型类型参数。这允许你在组件中定义依赖于某种类型的逻辑，并在使用该组件时动态传递具体的类型。

2. 用法示例

基本示例

<script setup lang="ts" generic="T">
defineProps<{ items: T[] }>();

const firstItem = computed(() => props.items[0]);
</script>

<template>
  <div>{{ firstItem }}</div>
</template>

当你使用这个组件时，可以指定 T 的具体类型，例如：

<MyComponent :items="[1, 2, 3]" />
<!-- 在这个例子中，T 自动推导为 number -->

<MyComponent :items="['a', 'b', 'c']" />
<!-- 在这个例子中，T 自动推导为 string -->

搭配类型推导

泛型还可以通过函数返回值或参数的类型来推导：

<script setup lang="ts" generic="T">
defineProps<{ value: T }>();

const double = (input: T): T => {
  return input; // 示例逻辑
};
</script>

<template>
  <div>{{ double(props.value) }}</div>
</template>

更复杂的用例

当组件需要根据不同的类型呈现不同的内容时：

<script setup lang="ts" generic="T">
defineProps<{ data: T }>();

const renderData = (data: T) => {
  if (typeof data === 'string') {
    return `String: ${data}`;
  } else if (typeof data === 'number') {
    return `Number: ${data}`;
  }
  return 'Unknown type';
};
</script>

<template>
  <div>{{ renderData(props.data) }}</div>
</template>

3. 关键点

• generic="T" 等价于在普通 TypeScript 文件中通过 <T> 声明泛型。
• 泛型使组件更灵活，支持不同类型的数据结构。
• 需要 TypeScript 支持（通过 lang="ts"）。
• 这是 Vue 3.3+ 的功能，确保使用的 Vue 版本支持这一特性。

4. 对比传统写法

传统写法中，泛型需要通过函数或类显式定义，例如：

function useData<T>(data: T): T {
  return data;
}

而 <script setup> 的 generic 属性简化了这一过程，直接将泛型融入到组件的逻辑中，避免了复杂的定义和导入。

关于typescript的 generic(泛型) 的其它用法:
https://www.freecodecamp.org/news/how-typescript-generics-work/
其它文档:
https://wangdoc.com/typescript/generics