@ deckgl-fiber-landers/ 类型

自动包含 @ deckgl-fiber-resters/dom (英语)。 。 。 . 无需单独安装.

TypeScript定义了甲板.gl JSX元素. 提供类型安全地层创建,带有通用类型参数和IntelliSense.

安装

pnpm add @deckgl-fiber-renderer/types

自动安装 @deckgl-fiber-renderer/dom。只有在使用调和器独立时才直接安装.

How-to: 类型安全存取器函数

问题: Accessor 函数参数为 any - 没有自动完成,没有类型安全.

<layer
  layer={
    new ScatterplotLayer({
      id: "points",
      data: myData,
      getPosition: (d) => d.coordinates, // d is 'any'
      getRadius: (d) => d.value, // d is 'any'
    })
  }
/>

解决方案 : 通过数据类型作为通用参数.

type DataPoint = {
  coordinates: [number, number];
  value: number;
  color: [number, number, number];
};

<layer
  layer={
    new ScatterplotLayer<DataPoint>({
      id: "points",
      data: myData,
      getPosition: (d) => d.coordinates, // d is DataPoint ✅
      getRadius: (d) => d.value, // Full autocomplete ✅
      getFillColor: (d) => d.color, // Type errors on typos ✅
    })
  }
/>;

福利:

• IntelliSense 显示可用的属性
• TypeScript 捕获打字和类型不匹配
• 重命名连接器函数之间的重构工作
• 类型作为内部文件

How-to: 自定义层类型(可选)

自定义层工作 <layer> 没有类型的声明。 扩展 IntrinsicElements 如果你想要一个专门的JSX元素.

建议的办法(无声明):

import { CompositeLayer } from "@deck.gl/core";

class CustomLayer extends CompositeLayer<{ customRadius: number }> {
  renderLayers() {
    return new ScatterplotLayer({
      id: `${this.props.id}-scatter`,
      data: this.props.data,
      getRadius: this.props.customRadius,
    });
  }
}

// Just works
<layer layer={new CustomLayer({ id: "custom", data, customRadius: 200 })} />;

替代办法(海关要素):

type CustomLayerProps = {
  id: string;
  data: unknown[];
  customRadius: number;
};

declare global {
  namespace React.JSX {
    interface IntrinsicElements {
      customLayer: CustomLayerProps;
    }
  }
}

// Now type-checked (but <layer> is recommended)
<customLayer id="custom" data={data} customRadius={200} />;

参考:JSX元素类型

<layer> 元素

通用地层元素接受任意甲板.gl地层实例.

import { ScatterplotLayer, PathLayer } from "@deck.gl/layers";

<layer layer={new ScatterplotLayer({ id: "points", data })} />;
<layer layer={new PathLayer({ id: "paths", data })} />;

类型定义 :

interface IntrinsicElements {
  layer: {
    layer: Layer;
    key?: string;
    ref?: React.Ref<Layer>;
  };
}

<view> 元素

通用视图元素接受任何 deck.gl View 实例 .

import { MapView, OrthographicView } from "@deck.gl/core";

<view view={new MapView({ id: "main" })} />;
<view view={new OrthographicView({ id: "minimap" })} />;

类型定义 :

interface IntrinsicElements {
  view: {
    view: View;
    key?: string;
    ref?: React.Ref<View>;
  };
}

折旧层元素

层特有元素(v1 语法)仍然被打入但被标记 @deprecated数字 :

interface IntrinsicElements {
  /** @deprecated Use <layer layer={new ScatterplotLayer(...)} /> instead */
  scatterplotLayer: ScatterplotLayerProps;

  /** @deprecated Use <layer layer={new PathLayer(...)} /> instead */
  pathLayer: PathLayerProps;

  // ... other deprecated elements
}

TypeScript 使用这些元素时显示折旧警告.

类型脚本配置

需要的编译器选项

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "moduleResolution": "bundler",
    "types": ["@deckgl-fiber-renderer/types"]
  }
}

建议选项

最佳经验:

{
  "compilerOptions": {
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "exactOptionalPropertyTypes": true
  }
}

这些抓取更多的类型错误并改进访问器函数类型.

相关软件包

• @ deckgl-fiber-resters/dom (英语) - 主包(包括本包)
• @ deckgl-fiber-resters/ reconcil - 核对器执行