Typescript映射型別-列舉值作為鍵，介面對應的值作為值

我有一組首選項，定義為字串列舉：

export enum PreferenceTypes {
    language = "language",
    unit = "unit",
}

然后我可以創建一個介面來定義預期物件的形狀。鍵將是列舉的值：

export type UnitTypes = "μg/m3" | "ppm" | "ppb";
export type LanguageTypes = "English" | "Spanish";

export interface PreferenceOptions {
    [PreferenceTypes.language]: {
        name: string;
        value: LanguageTypes;
    }[];
    [PreferenceTypes.unit]: {
        name: string;
        value: UnitTypes;
    }[];
}

現在我想創建一個基于用戶語言環境的默認首選項物件。我希望這個新物件的鍵是本地的，我希望值是物件。每個物件都應該有 typePreferenceTypes的鍵，并且值必須是value對應于PreferenceTypein的型別PreferenceOptions。我正在嘗試構建這樣的型別約束，但我很難：

PreferenceByLocale: {
    [key: string]: { [key in PreferenceTypes]?: string };
} = {
    /** Defaults for UK users */
    en: {
        language: "English",
        unit: "μg/m3",
    },
    /** Defaults for Spain users */
    es: {
        language: "Spanish",
        unit: "μg/m3",
    },
    /** Defaults for US users */
    us: {
        language: "English",
        unit: "ppm",
    },
};

我不知道該怎么說這些物件中的每一個的價值都應該是{ [T extends key in PreferenceTypes]?: PreferenceOptions[T]['value'] }——這給了我 TS 錯誤。我不確定我正在嘗試做的事情是否可行，或者我是否在想我的打字。例如，如果我寫了這樣的東西，我應該能夠得到一個錯誤：

PreferenceByLocale: {
    [key: string]: { [key in PreferenceTypes]?: string };
} = {
    /** Defaults for mars users */
    mrs: {
        // I want this to error, as "Martian" does not exist on LanguageTypes
        language: "Martian", 
        unit: "μg/m3",
    },
}

這樣的事情可能嗎？

uj5u.com熱心網友回復：

好的，我想我更了解您現在想要做什么。我做了這樣的修改。

export enum PreferenceTypes {
language = "language",
unit = "unit",
}

export type UnitTypes = "μg/m3" | "ppm" | "ppb";
export type LanguageTypes = "English" | "Spanish";

export interface PreferenceOptions {
[PreferenceTypes.language]: LanguageTypes;
[PreferenceTypes.unit]: UnitTypes;
}

export interface PreferenceByLocale {
[key : string]: PreferenceOptions;
}

const PreferenceByLocale: PreferenceByLocale = {
/** Defaults for UK users */
en: {
    language: "English",
    unit: "μg/m3",
},
/** Defaults for Spain users */
es: {
    language: "Spanish",
    unit: "μg/m3",
},
/** Defaults for US users */
us: {
    language: "English",
    unit: "ppm",
},
mrs: {
    language: "Unkown",
    unit: "sxsx"
  }
 };

 console.log(PreferenceByLocale);

現在它為夫人提供了以下錯誤：

我想這就是你想做的。如果那是您想要做的并且代碼難以理解，我可以解釋。

uj5u.com熱心網友回復：

你的錯誤是：在定義 PreferenceOptions 時，每個屬性的值都是一個陣列。仔細檢查下面的代碼：

export interface PreferenceOptions {
[PreferenceTypes.language]: {
    name: string;
    value: LanguageTypes;
}[];
[PreferenceTypes.unit]: {
    name: string;
    value: UnitTypes;
}[];
}

您需要知道，在 TypeScript 中，如果您添加[]到值的末尾，它會將其定義為陣列。所以以下兩段代碼給出了相同的結果：

let names : Array<string> = [];
let names : string[] = [];

所以你所要做的就是改變 PreferenceOptions 如下：

export interface PreferenceOptions {
[PreferenceTypes.language]: {
    name: string;
    value: LanguageTypes;
};
[PreferenceTypes.unit]: {
    name: string;
    value: UnitTypes;
};
}

現在試試這個：

const PreferenceByLocale: {
[key: string]: { [key in PreferenceTypes]?: string };
} = {
/** Defaults for UK users */
en: {
    language: "English",
    unit: "μg/m3",
},
/** Defaults for Spain users */
es: {
    language: "Spanish",
    unit: "μg/m3",
},
/** Defaults for US users */
us: {
    language: "English",
    unit: "ppm",
},
};
console.log(PreferenceByLocale)

將給出以下結果：

{
   en: { language: 'English', unit: 'μg/m3' },
   es: { language: 'Spanish', unit: 'μg/m3' },
   us: { language: 'English', unit: 'ppm' }
}

標籤：打字稿 打字稿泛型 类型约束 映射类型

上一篇：型別“...”上不存在條件泛型型別屬性“...”

下一篇：如何從MUIv5匯入CSSProperties？