plugins.legend.align 是不兼容的 typescript Chartjs 类型

Question

我的选项对象中有类似的东西

const options = {
  plugins: {
    legend: {
      align: 'end',
    }
  }
}

根据 Chartjs documentation，align 接受 3 个值：

• 开始
• 中心
• 结束

对齐工作正常，我得到了想要的结果，但打字稿抱怨对齐的类型应该是“开始”、“中心”或“结束”而不是字符串。

Type 'string' is not assignable to type ' "end" | "start" | "center" | undefined '

深入研究 Chartjs 类型定义，我明白了

export interface LegendOptions<TType extends ChartType> {
  ....
  /**
   * Alignment of the legend.
   * @default 'center'
   */
  align: 'start' | 'center' | 'end';

}

如果我将对齐更改为字符串类型。打字稿错误消失了，但我不应该这样做。

任何想法/意见/建议都非常感谢，谢谢！

Answer 1

尝试添加

as cons

。

align: 'center' as const

在 他们的仓库

中找到了这个解决方案

Answer 2

问题似乎在

react-chartjs-2

库中。

如果您切换到 Chart.js 的准系统版本，则不会遇到此问题：https://codesandbox.io/s/goofy-curie-eyxrr?file=/src/App.tsx

Answer 3

我发现

as const

解决方案对于涉及某个特定领域的问题来说过于狭隘。你必须明白这个

string

与

Align

类型相比是怎么回事。

当您拥有像您定义的对象时，Typescript 认为它“只是”另一个可以更改的

string

。这就是

as const

起作用的原因。你基本上是在对打字稿说，“对于这个值，它不会改变，你可以将它视为

end

而不是

string

。所以类型

Align = "end" | ...

会起作用。

对我来说，

as const

解决方案并不是最优的，因为您解决了一个冲突，并且您必须手动修复所有剩余的冲突。

例如，使用

DoughnutChart

，您会...

    const goodOptions: ChartOptions = {
        plugins: {
            legend: {
                align: "end",
            }
        }
    };
    const _greatChart = (
        <Doughnut
            data={{datasets: []}}
            options={goodOptions}
        />
    )

您的选择将从一开始就得到正确的推断。