Typescript 为 object 定义类型将丢失 static object 键建议（property key）

Question

这是代码：

interface ButtonProps {
  [key: string]: any
}

export const button: ButtonProps = {
  primary: {
    background: theme.background.primary,
    color: theme.color.base,
  },
  base: {
    background: theme.background.base,
    color: theme.color.primary,
  },
}

// button.pr.. 
// 👆 When I press primary, the vscode static suggestion won't show `primary` or `base` keys, because [key: string] could be any string.

不期望：截图

预期：屏幕截图 - 预期

预期行为：

建议或 static 类型检查定义类型的任何属性也手动添加键。

喜欢：

interface ButtonProps {
 primary: ...,
 [key: string]: ...
}
const button: ButtonProps = {
 secondary: ...
}

button.primary // ✅
button.secondary // ✅
button.third // Okay, but no suggestion.

Answer 1

实际上，我最近自己也遇到了类似的情况。 问题是您希望获得您定义的 object 的窄类型，同时确保它扩展更广泛的类型。 要解决此问题，您可以创建一个 function，它只返回其输入但推断其类型。

interface ButtonProps {
  primary: {background:string, color:string};
  [key: string]: any;
}

const createButtonProps = <T extends ButtonProps>(props: T) => props;

export const button = createButtonProps({
  primary: {                               // primary is required
    background: theme.background.primary,
    color: theme.color.base,
  },
  base: {
    background: theme.background.base,
    color: theme.color.primary,
  },
});

// You'll now see intellisense for button.primary & button.base

作为奖励，如果您也需要在 object 中获取确切的值类型，我就是这种情况，您可以将as const添加到您传递给 ZC1C425268E68385D14AB5074C17A 的 object 的末尾。