TypeScript如何限制SingleLang接口的Type属性为指定LangType枚举值？

最佳实现方案 #

可以通过 TypeScript 泛型构造可复用的工具类型，完全避免重复定义，同时保证类型约束的准确性。

方案1：不改动原有基础定义，新增工具类型实现约束

如果不想修改你已经写好的SingleLang、LangType基础定义，可以直接新增一个指定类型的工具类型：

// 原有定义完全保留
enum LangType {
    FRONTEND,
    BACKEND,
    DATABASE
}

interface SingleLang {
    Name:string;
    Color:string;
    Type: LangType;
}

// 新增工具类型：过滤出Type为指定枚举值的SingleLang类型
type SingleLangWithType<T extends LangType> = SingleLang & { Type: T };

// 新增通用泛型：复用「语言+使用占比」的结构
type LangUsage<T extends LangType> = {
    Lang: SingleLangWithType<T>;
    Percentage: number;
}

// 最终的AllLangs定义，无任何重复代码
interface AllLangs {
    Frontend: LangUsage<LangType.FRONTEND>[];
    Backend: LangUsage<LangType.BACKEND>[] | null;
    Database: SingleLangWithType<LangType.DATABASE> | null;
}

方案2：泛型重构基础结构（适合还在定义初期的场景）

如果可以调整基础定义，直接把SingleLang改为带类型参数的泛型，后续使用更灵活：

enum LangType {
    FRONTEND,
    BACKEND,
    DATABASE
}

// 泛型SingleLang，支持直接指定Type属性的枚举值
type SingleLang<T extends LangType = LangType> = {
    Name: string;
    Color: string;
    Type: T;
}

type LangUsage<T extends LangType> = {
    Lang: SingleLang<T>;
    Percentage: number;
}

interface AllLangs {
    Frontend: LangUsage<LangType.FRONTEND>[];
    Backend: LangUsage<LangType.BACKEND>[] | null;
    Database: SingleLang<LangType.DATABASE> | null;
}

// 原有Pages接口可以直接复用
export interface Pages {
    Name: string;
    Langs: AllLangs;
}

两种方案都完全符合你的约束要求，后续如果要调整SingleLang的属性（比如新增OfficialSite字段），只需要修改一次基础定义即可全局生效，不用逐个修改分类下的重复结构。

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