# @deckgl-fiber-renderer/types 中文文档

规范地址：https://npmcn.com/package/%40deckgl-fiber-renderer/types/

版本：2\.0\.1
npm 元数据更新时间：2026-05-26T13:56:00.258Z
中文译文更新时间：2026-11-11T19:19:35.988Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40deckgl-fiber-renderer/types
原文对照：https://npmcn.com/package/%40deckgl-fiber-renderer/types/?lang=original
项目主页：https://github.com/deckgl-fiber-renderer/fiber.gl#readme
源码仓库：https://github.com/deckgl-fiber-renderer/fiber.gl

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：14.2 kB，6 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：@deck\.gl/core \>=9\.1，@deck\.gl/geo-layers \>=9\.1，@deck\.gl/layers \>=9\.1，@deck\.gl/mapbox \>=9\.1，@deck\.gl/mesh-layers \>=9\.1，@types/react ^19，@types/react-dom ^19
- 首次发布：2025-03-14T04:20:14.505Z
- 最新版本发布：2026-05-26T13:56:00.097Z
- 近 30 天下载量：36067（2026-10-12 至 2026-11-10，npm 官方下载统计）
- 已发布版本数：8（近 12 个月 2 个）

## 中文简介

> **自动包含 [@ deckgl-fiber-resters/dom (英语)](https://npmcn.com/package/%40deckgl-fiber-renderer/dom)。 。 。 .** 无需单独安装.

## 安装

```sh
npm install @deckgl-fiber-renderer/types
```

也可以使用：`pnpm add @deckgl-fiber-renderer/types`、`yarn add @deckgl-fiber-renderer/types`、`bun add @deckgl-fiber-renderer/types`

## README

# @ deckgl-fiber-landers/ 类型

> **自动包含 [@ deckgl-fiber-resters/dom (英语)](https://npmcn.com/package/%40deckgl-fiber-renderer/dom)。 。 。 .** 无需单独安装.

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

## 安装

```bash
pnpm add @deckgl-fiber-renderer/types
```

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

* * *

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

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

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

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

```tsx
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元素.

**建议的办法(无声明):**

```tsx
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 })} />;
```

**替代办法(海关要素):**

```tsx
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地层实例.

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

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

**类型定义 :**

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

### `<view>` 元素

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

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

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

**类型定义 :**

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

### 折旧层元素

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

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

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

  // ... other deprecated elements
}
```

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

* * *

## 类型脚本配置

### 需要的编译器选项

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

### 建议选项

最佳经验:

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

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

* * *

## 相关软件包

-   **[@ deckgl-fiber-resters/dom (英语)](https://npmcn.com/package/%40deckgl-fiber-renderer/dom)** - 主包(包括本包)
-   **[@ deckgl-fiber-resters/ reconcil](https://npmcn.com/package/%40deckgl-fiber-renderer/reconciler)** - 核对器执行

## 常见问题

### @deckgl-fiber-renderer/types 是什么？

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

### 如何安装 @deckgl-fiber-renderer/types？

在项目目录运行 npm install @deckgl-fiber-renderer/types，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@deck\.gl/core（\>=9\.1）、@deck\.gl/geo-layers（\>=9\.1）、@deck\.gl/layers（\>=9\.1）、@deck\.gl/mapbox（\>=9\.1）、@deck\.gl/mesh-layers（\>=9\.1）、@types/react（^19）、@types/react-dom（^19）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @deckgl-fiber-renderer/types 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @deckgl-fiber-renderer/types 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @deckgl-fiber-renderer/types 可以商用吗？

@deckgl-fiber-renderer/types 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @deckgl-fiber-renderer/types 的下载量有多少？

根据 npm 官方下载统计，@deckgl-fiber-renderer/types 在 2026/10/12 – 2026/11/10 这 30 天内被下载 36,067 次，日均约 1,202 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @deckgl-fiber-renderer/types 还在维护吗？

最新版本 2\.0\.1 发布于 2026/05/26（5 个月前）；至今共发布 8 个版本，其中过去 12 个月发布了 2 个；首次发布于 2025/03/14。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。