TypeScript 无法从类型化的字符串变量中正确推断类型

Question

我正在尝试使用“自由”创建的string作为 object 的键。

interface CatState {
    name: string,
    selected: boolean,
    color: string,
    height: number
}

interface DogState{
    name: string,
    selected: boolean,
    race: string,
    age: number,
    eyeColor: string
}

export interface Animals {
    animals: {
        cat: {
            cats: CatState[],
            allSelected: boolean,
        },
        dog: {
            dogs: DogState[],
            allSelected: boolean,
        },
    }
};

const selectAnimal = (allAnimals: Animals, animal: keyof Animals['animals'], index:number) => {
    const animalPlural = `${animal}s` as keyof Animals['animals'][typeof animal]
    allAnimals.animals[animal][animalPlural][index].selected= true
}

这会突出显示带有消息的.selected

类型“boolean”上不存在属性“selected”。

这是一个游乐场。 是否有解决方法，或者这根本不可能？

Answer 1

您应该在FooState.animals[type]中使用类似的变量名称（例如states ），而不是cats和dogs 。 如果dogs这样做，TypeScript 会将cats视为两个不相关的对象。

看到这个TypeScript 游乐场。 请注意，我已经删除了PayloadAction类型，因为 OP 没有提供它并向 object 解构添加了一个类型。

FooState也可以从常规类型转换为接口。 另请注意，我添加了一个FooStateAnimalEntry接口。 添加此接口可为您提供更有条理的代码并提高可读性。

您可能想要更改FooStateAnimalEntry.more的类型，这可能需要使用generics来完成。

Answer 2

为了让它工作，你需要使selectAnimal通用。

您可能认为它应该能够处理联合类型的animal输入，但编译器无法正确地对使用依赖于同一联合类型的多个表达式的单个代码块进行类型检查。 它忘记了`${animal}s`和allAnimals.animals[animal]之间的相关性。 前者是"cats" | "dogs" "cats" | "dogs" ，后者的类型类似于{cats: CatState[]} | {dogs: DogState[]} {cats: CatState[]} | {dogs: DogState[]} ，你通常不能用前者索引后者，因为“如果你有{cats: CatState[]}并且你用"dogs"索引怎么办？” 这不可能发生，但编译器无法看到它。 TypeScript 不能这样直接处理相关联合。 这是microsoft/TypeScript#30581的主题。

如果您希望单个代码块适用于多种情况，则需要重构类型以改为使用 generics，如microsoft/TypeScript#47109中所述。 以下是您的示例的外观：

interface AnimalStateMap {
    cat: CatState,
    dog: DogState
}

type AnimalData<K extends keyof AnimalStateMap> =
    { [P in `${K}s`]: AnimalStateMap[K][] & { allSelected: boolean } }

export interface Animals {
    animals: { [K in keyof AnimalStateMap]: AnimalData<K> };
};
    

const selectAnimal = <K extends keyof AnimalStateMap>(
    allAnimals: Animals, animal: K, index: number) => {
    const animalPlural = `${animal}s` as const;
    // const animalPlural: `${K}s`
    const animalData: AnimalData<K> = allAnimals.animals[animal]
    animalData[animalPlural][index].selected = true;
}

AnimalStateMap是一种基本的键值类型，表示数据结构中的底层关系。 然后AnimalData<K>是一个映射类型，它将s与键类型的串联编码为模板文字类型（给出诸如gooses和fishs ♂️ 之类的复数），并且值类型是预期的动物数组。 并且有一个allSelected属性。

然后，您的Animals类型显式写为keyof AnimalStateMap上的映射类型，这将帮助编译器在我们对其进行索引时查看相关性。

最后， selectAnimal在K extends keyof AnimalStateMap中是通用的，并且主体类型检查，因为animalPlural是正确的通用类型`${K}s` ，已知它是animalData的键，即AnimalData<K> 。

游乐场代码链接