# TypeScript

> React 颜色选择器自带 TypeScript 类型：ColorChangeResult、处理函数的类型标注，以及导出的 props 类型。

Source: https://chroma-panel.jscrate.dev/zh/react/handbook/typescript
Last updated: 2026-09-21

chroma-panel 同时为 ESM 和 CommonJS 提供了类型声明。组件 props、颜色对象和变更结果的类型都从同一个包中导入。

## 常用类型

```ts
import type {
  ColorChangeResult,
  ColorFormat,
  Hsva,
  Rgba,
  ColorPalette,
  ModeId,
  PickerMode,
} from "chroma-panel";
```

`ModeId` 是五个内置模式 id 的联合类型。`PickerMode` 是 `registerMode` 接收的参数结构，详见[自定义模式](https://chroma-panel.jscrate.dev/zh/react/modes/custom)。

## ColorChangeResult

所有变更处理函数收到的都是它。无论你把 `format` 设成什么，每个字段都始终存在，所以 `hex` 和 `rgba` 随时都能读取。

```ts
type ColorChangeResult = {
  hex: string;
  hexa: string;
  rgb: Rgb;
  rgba: Rgba;
  hsl: Hsl;
  hsla: Hsla;
  hsva: Hsva;
  css: string;
};
```

`css` 是按你所选 `format` 生成的字符串，也是[表单](https://chroma-panel.jscrate.dev/zh/react/handbook/forms)提交的值。所有格式见[序列化](https://chroma-panel.jscrate.dev/zh/react/utils/serializing)。

## 为处理函数标注类型

```tsx
import { ColorInput, type ColorChangeResult } from "chroma-panel";

function handleChange(result: ColorChangeResult): void {
  console.log(result.hex, result.hsva);
}

<ColorInput onChange={handleChange} />;
```

## Prop 类型

两个组件的 props 接口都已导出，你可以在此基础上扩展：

```ts
import type { ChromaPanelProps, ColorInputProps } from "chroma-panel";

type BrandPickerProps = ColorInputProps & { label: string };
```

`ColorInputProps` 继承自 `ChromaPanelProps`，所以面板接受的 prop，输入框也都接受。两者的每个 prop 都在 [ColorInput](https://chroma-panel.jscrate.dev/zh/react/components/color-input) 和 [ChromaPanel](https://chroma-panel.jscrate.dev/zh/react/components/chroma-panel) 中有详细说明。