如何在 Typescript 中将字符串转换为复杂的嵌套接口？

Question

我正在 Javascript 迁移到 Typescript。

我有以下来自 this npm pacakage 的代码。

我想将 spec（作为字符串）转换为类型 VisualizationSpec，以便 <VegaLite spec={spec} data={barData} />, 有效。

我尝试了转换，但它不起作用。这个接口嵌套复杂，所以我失败了。

如何在 Typescript 中将字符串转换为复杂的嵌套接口？

import React from 'react'
import ReactDOM from 'react-dom'
import { VegaLite } from 'react-vega'

const spec = {
  width: 400,
  height: 200,
  mark: 'bar',
  encoding: {
    x: { field: 'a', type: 'ordinal' },
    y: { field: 'b', type: 'quantitative' },
  },
  data: { name: 'table' }, // note: vega-lite data attribute is a plain object instead of an array
}

const barData = {
  table: [
    { a: 'A', b: 28 },
    { a: 'B', b: 55 },
    { a: 'C', b: 43 },
    { a: 'D', b: 91 },
    { a: 'E', b: 81 },
    { a: 'F', b: 53 },
    { a: 'G', b: 19 },
    { a: 'H', b: 87 },
    { a: 'I', b: 52 },
  ],
}

ReactDOM.render(
  <VegaLite spec={spec} data={barData} />,
  document.getElementById('bar-container')
);

Answer 1

VisualizationSpec 类型确实有复杂的定义，很少有像 mark 、 encoding.x.type 这样的属性需要特定的值。

// vega-lite\src\type.d.ts
export declare type StandardType = 'quantitative' | 'ordinal' | 'temporal' | 'nominal';

// vega-lite\src\mark.ts
export const Mark = {
  arc: 'arc',
  area: 'area',
  bar: 'bar',
  image: 'image',
  line: 'line',
  point: 'point',
  rect: 'rect',
  rule: 'rule',
  text: 'text',
  tick: 'tick',
  trail: 'trail',
  circle: 'circle',
  square: 'square',
  geoshape: 'geoshape'
} as const;

我复制了你的代码，安装了必要的 npm 包，然后看到 typescript 抱怨提到的 2 件事。

有很多解决方法。对特定属性、整个对象的 const 断言，您甚至可以明确指定 spec 是 VisualizationSpec 类型，它仍然没问题。

您还可以导入子类型并使用它们。喜欢Mark.bar'ordinal' as StandardType

const spec = {
  width: 400,
  height: 200,
  mark: "bar" as const,
  encoding: {
    x: { field: 'a', type: 'ordinal' as const },
    y: { field: 'b', type: 'quantitative' as const },
  },
  data: { name: 'table' },
}

const spec: VisualizationSpec = {
  width: 400,
  height: 200,
  mark: "bar",
  encoding: {
    x: { field: 'a', type: 'ordinal'},
    y: { field: 'b', type: 'quantitative'},
  },

如何在 Typescript 中将字符串转换为复杂的嵌套接口？

How to cast string to complex and nested interface in Typescript?

javascript

typescript

vega

vega-lite