元素隐式具有“任何”类型，因为“字符串”类型的表达式不能用于索引类型 A

Question

问题中的类型A是指在这个例子中BadgeTypes类型 完全错误是

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type A.No index signature with a parameter of type 'string' was found on type A

沙盒链接： https://codesandbox.io/s/typescript-type-checking-question-hkfmc （注意：但由于某种原因它没有显示错误-_-）

我遇到了问题，请找到适当的解决方案。所有相关的帖子都在我头上。不胜感激，并附上解释

type BadgeTypes = {
  success: string;
  secondary: string;
  alert: string;
  text: string;
};

type Theme = {
  fonts?: object;
  borderRadius?: string;
  primary?: object;
  accent?: object;
  action?: object;
  stories?: object;
  checkbox?: object;
  badge: BadgeTypes;
  button?: object;
  page?: object;
  states?: object;
  modal?: object;
};
interface Props {
  theme: Theme;
  large: boolean;
  type: keyof BadgeTypes;
}
const StyledBadge = styled.span<Props>`
  display: inline-block;
  border-radius: ${(props: Props) => props.theme.borderRadius};
  text-align: center;
  color: ${(props: Props) => props.theme.badge.text};
  font-size: ${(props: Props) => (props.large ? `1.4rem` : `1rem`)};
  padding: ${(props: Props) =>
    props.large ? `0 .8rem` : `0.2rem 0.6rem 0.3rem 0.6rem`};

  // error happens here
  background: ${(props: Props) => props.theme.badge[`${props.type}`]};
`;

Answer 1

问题是使用template string 来索引badge。

基本上：

// this is a string
let x = `${props.type}`;

// this is "success" | "secondary" | "alert" | "text"
let y = props.type;

如果你写props.theme.badge[props.type]，类型检查器应该很高兴。