如何结合 TypeScript 对象/记录类型、代码完成和 VSCode“转到定义”功能？

Question

我正在结合react native、native base和linear gradients看起来像这样：

<Box
  bg={{
    linearGradient: {
      colors: ['lightBlue.300', 'violet.800'],
      start: [0, 0],
      end: [1, 0],
    },
  }}
/>

Native base 将此类型导出为

ILinearGradientProps

。我的应用程序包含 15 个以上的线性渐变，需要在不同的组件中访问它们。我添加了一个

LinearGradients

对象，它看起来像这样但是填充了实际的道具（颜色，开始，结束）：

import { ILinearGradientProps } from 'native-base';

type LGKey = 'primary' | 'secondary' | 'success' | ...;

export const LinearGradients: Record<LGKey, ILinearGradientProps> = {
  primary: { ...linearGradientProps },
  secondary: { ...linearGradientProps },
  success: { ...linearGradientProps },
  ...

随着上面的打字

Record<LGKey, ILinearGradientProps>

：

• 类型正确
• 定义

  LinearGradients

  属性时有代码补全
• 访问组件上的

  LinearGradients

  属性时也有代码完成，例如。

  <Box bg={LinearGradients.pri

但是，直接在属性

Ctrl/Cmd + Click

上使用

LinearGradients.primary

或 VSCode（可能还有其他代码编辑器）的“转到定义”功能不起作用。如果 VSCode 可以将我定向到

LinearGradients

中的特定属性，那就太好了。

如果我将代码更改为如下所示，则转到定义功能有效，但它看起来不像是好的 TS 代码 IMO：

export const LinearGradients = {
  primary: { ...linearGradientProps } as ILinearGradientProps,
  secondary: { ...linearGradientProps } as ILinearGradientProps,
  success: { ...linearGradientProps } as ILinearGradientProps,
  ...

有谁知道我如何让所有这四个功能一起工作（不用像上面那样用

as

断言每个新属性的类型）来实现：

• 安全/正确打字
• 定义

  LinearGradients

  属性时的代码完成
• 访问

  LinearGradients

  属性时的代码完成
• 转到 VSCode 上的定义功能

或者这只是 TypeScript 的局限性吗？

这已经出现了几次，我在网上找不到太多关于这个的信息，所以非常感谢任何帮助。谢谢

Answer 1

// ts@>=4.9
export const LinearGradients = {
  primary: { ...linearGradientProps },
  secondary: { ...linearGradientProps },
  success: { ...linearGradientProps },
} satisfies Record<LGKey, ILinearGradientProps>

https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-9.html#the-satisfies-operator