定义一个Typescript接口，其中属性是现有对象的属性

Question

定义接口的最佳方法是，其中属性之一可以是现有对象上的任何属性。 在这种情况下，我有一个名为fruits的对象，在这里我只是存储了许多字符串常量，并且我想定义一个接口（杂货），以便属性（fruit）之一可以是fruits对象中的任何字符串常量。

type Fruits = 'APPLE' | 'BANANA' | 'ORANGE';

const fruits = {
    APPLE: 'APPLE',
    BANANA: 'BANANA',
    ORANGE: 'ORANGE'
}

interface IGroceries {
    fruit: Fruits,
    vegetables: string[]
}

const initialGroceriesState: IGroceries = {
    fruit: fruits.APPLE,
    vegetables: []
}

这是我的最佳尝试，但这会引发错误：

Type '{ fruit: string; vegetables: never[]; }' is not assignable to type 'IGroceries'.
  Types of property 'fruit' are incompatible.
    Type 'string' is not assignable to type 'Fruits'.

Answer 1

选项之一是切换到字符串枚举 ：

enum Fruits {
    APPLE = 'APPLE',
    BANANA = 'BANANA',
    ORANGE = 'ORANGE'
}

interface IGroceries {
    fruit: Fruits,
    vegetables: string[]
}

const initialGroceriesState: IGroceries = {
    fruit: Fruits.APPLE,
    vegetables: []
}

另一个选择是更正现有对象的类型：

type Fruits = 'APPLE' | 'BANANA' | 'ORANGE';

const fruits: { [key: string]: Fruits } = {
    APPLE: 'APPLE',
    BANANA: 'BANANA',
    ORANGE: 'ORANGE'
}

interface IGroceries {
    fruit: Fruits,
    vegetables: string[]
}

const initialGroceriesState: IGroceries = {
    fruit: fruits.APPLE,
    vegetables: []
}

Answer 2

fruits键值被推断为字符串。 这会导致错误，因为Fruits可分配给字符串类型，反之亦然。

为了避免这种情况，应显式指定fruits类型：

const fruits: { [K in Fruits]: K } = {
    APPLE: 'APPLE',
    BANANA: 'BANANA',
    ORANGE: 'ORANGE'
};

另一种答案是，使用另一种方法是使用字符串枚举。 视情况而定，这可能是理想的，也可能是不理想的。