如何在VS Code中无需查看类型文件获取Prop完整联合类型列表？

• 直接展开VS Code悬停提示：当鼠标悬停在目标类型上看到“还有X个”的提示时，点击该提示文字，VS Code会展开显示全部联合类型成员，此时可直接复制完整列表。

• 通过TypeScript声明文件提取：

  1. 创建临时TS文件（比如extract-type.ts），写入以下代码（替换为你实际用到的类型名）：

     import type { TargetChakraType } from "@chakra-ui/react";
     export type FullUnionType = TargetChakraType;
     

  2. 在终端执行命令生成声明文件：

     tsc extract-type.ts --declaration --emitDeclarationOnly
     

  3. 打开生成的extract-type.d.ts文件，里面会完整列出该联合类型的所有成员。

• 利用类型约束生成运行时数组：
  如果需要得到可直接使用的字符串数组，可通过类型约束强制补全所有成员：

  import type { TargetChakraType } from "@chakra-ui/react";
  
  // 函数会在数组未包含所有联合类型成员时触发编译报错
  function collectAllMembers<T extends string>(members: T[]): T[] {
    return members;
  }
  
  // 编写时VS Code会自动提示补全所有成员，最终得到完整数组
  const fullMemberList = collectAllMembers<TargetChakraType>([]);
  

  补全完成后，fullMemberList数组就包含了所有联合类型的字符串成员。

内容的提问来源于stack exchange，提问作者Enyak Stew