Typescript:在接口中将可映射的可索引类型和属性组合为相同的值类型

时间:2018-11-07 15:06:07

标签: typescript

我想知道是否有一种干净的方法可以将可映射的可索引类型与接口中具有相同值类型的属性相结合。

这是一个有用的示例。

export type SupportedLanguagesUnion = 'fr' | 'es';

export interface Translation {
    [word: string]: {
        default: string;
        [language in SupportedLanguagesUnion]?: string;
    }
}

import { Translation } from './example';

const translationDictionary: Translation = {
    hello: {
        default: 'hello',
        fr: 'bonjour',
        es: 'hola'
    }
};

此界面将确保没有不支持的语言,但始终是默认值。

很遗憾,此代码不是有效的打字稿。我猜问题出在默认值和语言都具有相同值类型之间。

目前,我必须用不太安全的接口替换

export interface Translation {
    [word: string]: {
        default: string;
        [language: string]: string;
    }
}

将接受以下代码

const translationDictionary: Translation = {
    hello: {
        default: "hello",
        foo: 'bar'
    }
};

我也可以在'default'中将SupportedLanguagesUnion添加为值,但是它将变为可选。

有没有一种方法可以编写此接口以同时保留两个检查?

1 个答案:

答案 0 :(得分:1)

您可以在交集(SupportedLanguagesUnion)中使用映射类型(针对&中的语言),并将其与具有所需额外属性的类型一起使用:

export type SupportedLanguagesUnion = 'fr' | 'es';

export interface Translation {
    [word: string]: {
        default: string;
    } & {
        [language in SupportedLanguagesUnion]?: string;
    }
}

const translationDictionary: Translation = {
    hello: {
        default: 'hello',
        fr: 'bonjour',
        es: 'hola'
    }
};