Typescript:如何在React中定义条件Typescript道具来访问对象?

Question

我试图使用React props作为访问对象的关键。根据道具type是否为"固体";或"大纲"，将决定我使用什么数据。嵌套的"实体"中的对象键。和";outline"对象不一样，所以Typescript会抱怨，因为它可能无法访问那个键。怎样才能让打字稿满意呢?

代码可以正常工作，但不确定如何消除错误。

const icons = {
outline: {
default: "x1",
icon1: "icon1"
},
solid: {
default: "x2",
icon2: "icon2"
}
} as const;
// If type is solid, you can only choose a solid iconName
// If type is outline, you can only choose an outlined iconName
type ConditionalProps =
| { type: "solid"; iconName: keyof typeof icons.solid }
| { type: "outline"; iconName: keyof typeof icons.outline };
const App = ({type = "outline", iconName = "default"}: ConditionalProps) => {
// Typescript doesn't complain here
const text1 = icons[type];
// TSERROR: Typescript complains here
const text2 = icons[type][iconName];
return (
<div>
<h1>The chosen icon is...</h1>
<h2>{Object.keys(text1)}</h2>
<h2>{text2}</h2>
</div>
);
}
export default App;

打字错误是:

// TSERROR
Element implicitly has an 'any' type because expression of type
'"icon2" | "icon1" | "default"' can't be used to index type 
'{ readonly default: "defaultOutline"; readonly icon2: "icon2"; } 
| { readonly default: "defaultSolid"; readonly icon1: "icon1"; }'. 
Property 'icon2' does not exist on type 
'{ readonly default: "defaultOutline"; readonly icon2: "icon2"; } 
| { readonly default: "defaultSolid"; readonly icon1: "icon1"; }'.ts(7053)

Codesandbox联系

Answer 1

简短的回答:你不能。至少，安全。嗯,有点。

如果想要某种类型安全，首先需要缩小每种情况的联合范围，如下所示:

function matchIcon(props: ConditionalProps) {
if (props.type === "outline") {
return icons[props.type][props.iconName];
}
if (props.type === "solid") {
return icons[props.type][props.iconName];
}
}

这有点多余，但是很安全。

另一种选择是抑制错误，但使代码不那么安全:

const text2 =
icons[props.type][
props.iconName as keyof typeof icons.solid & keyof typeof icons.outline
];

因为icons[props.type]可以同时是两个图标。轮廓和图标。实际上，我们需要传递一个同时满足这两种情况的iconName值。keyof typeof icons.solid & keyof typeof icons.outline只是可能值的一个子集，如果为outline或solid提供，仍然可以工作。我们大多是在对编译器撒谎。