类型 'RgbaObject[]' 不可分配给类型 'string[]'答案

【问题标题】：Type 'RgbaObject[]' is not assignable to type 'string[]'类型 'RgbaObject[]' 不可分配给类型 'string[]'
【发布时间】：2021-04-28 07:42:17
【问题描述】：

我有一个十六进制值数组：

const presetColors = [
    '#E91E63',
    '#FF8A65',
    '#F8E71C',
    '#697689',
    '#37D67A',
    '#D9E3F0',
    '#BD10E0',
    '#9013FE',
    '#4A90E2',
    '#50E3C2',
    '#000000',
    '#4A4A4A',
    '#FFFFFF',
]

我正在使用库 https://github.com/sindresorhus/hex-rgb 将十六进制转换为 rgb。

我有一个接受presetColors 的SwatchesPicker 函数：

type SwatchesPickerProps = {
    color: string
    onChange: (newColor: string) => void
    presetColors: Array<string>
}

const SwatchesPicker = ({ color, onChange, presetColors }: SwatchesPickerProps) => {
    return null;
}

<SwatchesPicker
  color={color}
  onChange={setColor}
  presetColors={presetColors.map((color) => hexRgb(color))}
/>

现在我在presetColors 上收到一条错误消息：

类型“RgbaObject[]”不可分配给类型“string[]”。类型 'RgbaObject' 不可分配给类型 'string'.ts(2322)

原因是hexRgb(color) 返回RgbaObject[] & presetColors 接受string[]。

那么如何将RgbaObject[] 转换为string[]？

【问题讨论】：

带 rgb 的字符串应该是什么样子的？您是否尝试将选项 {format: 'css'} 传递给 hexRgb？
如果你有一个对象 {red: 205, green: 34, blue: 34, alpha: 0.8} 并且你希望将它表示为字符串，你需要确定这个字符串应该是什么样子

标签： typescript typeerror

【解决方案1】：

我创建了一个简单的hex2rgb 函数，因为hex-rgb 返回{ red: number, green: number, blue: number, alpha: number}。

我用于颜色选择器的库react-colorful 需要{ r: number, g: number, b: number, a: number} 作为输入，所以下面的函数就是这样做的。

import hexRgb from 'hex-rgb'

export const hex2rgb = (color: string) => {
    const { red: r, green: g, blue: b, alpha: a } = hexRgb(color)
    return { r, g, b, a }
}

然后我将所有string 转换为Rgba：

type Rgba = {
    r: number
    g: number
    b: number
    a: number
}

type SwatchesPickerProps = {
    color: Rgba
    onChange: (newColor: Rgba) => void
    presetColors: Array<Rgba>
}

<SwatchesPicker color={color} onChange={setColor} presetColors={presetColors.map(hex2rgb)} />

这成功了:)

【讨论】：