如何更简洁规范地实现TypeScript字符串类型选项的IDE自动补全？

优化实现方案 #

你可以直接通过TypeScript自带的类型推导能力简化代码，去掉不必要的辅助函数和手动类型维护，简化后写法更符合业界通用规范：

import React from "react";
import { Text, View } from "react-native";

type ButtonColor = {
  borderColor: string;
  fillColor: string;
};

// 直接定义颜色配置对象
const ButtonColors = {
  red: {
    borderColor: "darkred",
    fillColor: "red",
  },
  blue: {
    borderColor: "darkblue",
    fillColor: "blue",
  },
  green: {
    borderColor: "darkgreen",
    fillColor: "green",
  },
} satisfies Record<string, ButtonColor>;

// 自动从配置对象推导颜色可选值类型，无需手动编写联合类型
export type ButtonColorOption = keyof typeof ButtonColors;

export default function BasicButton(props: { color: ButtonColorOption }) {
  return (
    <View
      style={{
        height: "100px",
        width: "500px",
        justifyContent: "center",
        alignItems: "center",
        borderWidth: 10,
        borderColor: ButtonColors[props.color].borderColor,
        backgroundColor: ButtonColors[props.color].fillColor,
      }}
    >
      <Text>Hello, world!</Text>
    </View>
  );
}

使用方式和自动补全效果和你原来的实现完全一致：

<BasicButton color="green" />

优化说明 #

• 移除了不必要的Dict泛型定义与buttonDict辅助函数，直接定义配置对象即可完成类型推导
• 用TypeScript 4.9+支持的satisfies关键字校验配置结构，既保证每个颜色配置都符合ButtonColor类型定义，又不会丢失配置键的字面量类型
• 颜色可选值类型ButtonColorOption通过keyof typeof ButtonColors自动生成，后续新增颜色只需要在ButtonColors对象中新增属性即可，类型会自动同步，完全避免了手动维护联合类型容易出现的配置与类型不一致问题
• 该写法是前端组件库实现枚举值自动补全的通用规范模式，维护成本更低，扩展性更好

如果你的项目TypeScript版本低于4.9，不支持satisfies语法，可以替换为如下写法实现相同效果：

const ButtonColors = {
  red: { borderColor: "darkred", fillColor: "red" },
  blue: { borderColor: "darkblue", fillColor: "blue" },
  green: { borderColor: "darkgreen", fillColor: "green" },
} as const;

内容的提问来源于stack exchange，提问作者Austin Brown