基于TypeScript类型字段限制对象属性的合法赋值

你的问题出在GenericSetting包含了所有type的联合，导致TypeScript无法正确对联合类型进行类型窄化，没法强制执行各类型的专属规则。下面是修正后的实现方式：

修正方案 #

拆分公共属性和各类型的专属属性，确保每个类型分支的type是唯一的判别式，让TypeScript能根据type自动校验对应属性：

// 定义所有Setting的公共属性，不包含type
type BaseSetting = {
    text: string;
    displayName: string;
    description?: string;
};

// 单独定义每个类型的Setting
type InfoSetting = BaseSetting & {
    type: "info";
};

type ToggleSetting = BaseSetting & {
    type: "toggle";
    value: boolean;
    dependsOnParent: boolean;
};

type DropdownSetting = BaseSetting & {
    type: "dropdown";
    value: string | boolean;
    options: { text: string; value: string | boolean }[];
};

// 联合成最终的Setting类型
type Setting = InfoSetting | ToggleSetting | DropdownSetting;

验证约束效果 #

现在你的示例代码会触发预期的类型错误：

• toggle类型错误：value赋值为字符串时，TypeScript会提示类型不匹配（要求boolean）
• dropdown类型错误：缺少必填的options属性时，会直接报错
• info类型正确：仅需满足公共属性即可

// ❌ 错误：类型""不能赋值给boolean，且缺少dependsOnParent属性
const toggle: Setting = {
    type: "toggle",
    value: "",
    text: "",
    displayName: "",
};

// ❌ 错误：缺少必填属性options
const dropdown: Setting = {
    type: "dropdown",
    displayName: "",
    text: "",
    value: "",
};

// ✅ 正确
const info: Setting = {
    type: "info",
    displayName: "",
    text: "",
};

原写法失效原因 #

原来的GenericSetting中type是SettingType的联合，导致TypeScript无法区分一个type: "toggle"的对象到底属于GenericSetting还是ToggleSetting。因为GenericSetting不要求value的类型，也不要求dependsOnParent，宽松的类型检查会绕过你期望的约束。拆分后每个类型分支的type是唯一字面量，TypeScript能精准匹配对应的属性规则。

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