如何在 TypeScript 中定义 css 颜色的类型?

我有以下示例代码片段：

type Color = string;
interface Props {
color: Color;
text: string;
}
function Badge(props: Props) {
return `<div style="color:${props.color}">${props.text}</div>`;
}
var badge = Badge({
color: '#F00',
text: 'Danger'
});
console.log(badge);

操场

如果颜色无效，我正在尝试出现构建错误，如下所示：

var badge = Badge({
color: 'rgba(100, 100, 100)',
text: 'Danger'
});

有没有办法定义Color以便它只允许与以下模式之一匹配的字符串？

#FFF
#FFFFFF
rgb(5, 5, 5)
rgba(5, 5, 5, 1)
hsa(5, 5, 5)

我意识到有像red和white这样的颜色，但如果Color可以接受这些颜色，这可能会使这个问题更难回答。

type RGB = `rgb(${number}, ${number}, ${number})`;
type RGBA = `rgba(${number}, ${number}, ${number}, ${number})`;
type HEX = `#${string}`;
type Color = RGB | RGBA | HEX;

'${...}' 表示法在新的 (^4.1) TS 版本上可用。

https://www.typescriptlang.org/docs/handbook/2/template-literal-types.html

有一个与模式(正则表达式或其他东西)匹配的字符串类型的建议，但该提议尚未实现。

因此，不幸的是，从TypeScript 2.2开始，您所要求的是不可能的。

您还不能在一般意义上执行此操作，但是如果您有一组定义良好的颜色，则可以使用常量和字符串文本类型：

type Color = "#FFFFFF" | "#FF0000" | "#0000FF";
const WHITE: Color = "#FFFFFF";
const RED: Color = "#FF0000";
const BLUE: Color = "#0000FF";

显然，如果你想允许任何颜色，这是不切实际的，但实际上你可能确实希望拥有可重用的颜色变量。

在我的项目中，我使用脚本从我的colors.css文件生成一个类似的文件，该文件定义了一堆CSS属性：

:root {
--primary-red: #ff0000;
--secondary-red: #993333;
/* etc */
}

转换为：

export const primaryRed: Color = "#ff0000";
export const secondaryRed: Color = "#993333";
// etc
export type Color = "#ff0000" | "#993333" // | etc...

我会像这样使用它：

import {primaryRed} from "./Colors.ts";
interface BadgeProps {
color: Color;
text: string;
}  
var badge = Badge({
color: primaryRed,
text: 'Danger'
});

我的 2 美分：

type RGB = `rgb(${string})`
type RGBA = `rgba(${string})`
type HEX = `#${string}`
type HSL = `hsl(${string})`
type HSLA = `hsla(${string})`
type VAR = `var(${string})`
type CssGlobals = 'inherit' | 'initial' | 'revert' | 'unset'
export type CssColor =
| 'currentColor'
| 'transparent'
| RGB
| RGBA
| HEX
| HSL
| HSLA
| VAR
| CssGlobals

运行时检查颜色有效性if (process.env.NODE_ENV === 'development')将是目前最合适的解决方案，因为 TypeScript(从 4.8.4 开始)无法处理这种复杂的类型。

我尝试制作一个十六进制颜色类型，如果你只是以人类的身份阅读代码，它似乎应该可以工作，但实际上它失败了，比短格式 CSS 十六进制颜色(如 #fff

)：

type HexLetter = 'a' | 'b' | 'c' | 'd' | 'e' | 'f';
type HexDigit = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
type HexPart = HexLetter | HexDigit;
type HexEncodedNumber = `${HexPart}${HexPart}`;
const hexEncodedNumberTestForSuccess: HexEncodedNumber = '0f';
const hexEncodedNumberTestForError: HexEncodedNumber = 'r3'; //* Type '"r3"' is not assignable to type 'HexEncodedNumber'.
// A single HexEncodedNumber works!
// This means we can have type safety defining a number from 0 to 255 in HEX format.
/** Length: 3 */
type HexCodeShort = `${HexPart}${HexPart}${HexPart}`;
/** Length: 6 */
type HexCodeClassic = `${HexEncodedNumber}${HexEncodedNumber}${HexEncodedNumber}`; //! Expression produces a union type that is too complex to represent. ts(2590)
// HexCodeClassic evaluates to 'any' type.
/** Length: 8 */
type HexCodeWithAlpha = `${HexCodeClassic}${HexEncodedNumber}`; // So this is `${any}aa` | `${any}ab` etc.
/** Length: 3 (short) | 6 (classic) | 8 (alpha) */
type HexCodeModern = HexCodeShort | HexCodeClassic | HexCodeWithAlpha; // Just 'any'.
type HexCodeCss = `#${HexCodeModern}`;
const hexCodeCssTestForEmergedAny: HexCodeCss = '#ICanSetAnythingHereWithNoTrouble'; // `#${any}`.
// Full CSS HEX code does not work.

因此，您只能确保 CSS 颜色的 3 个字符的完整类型安全性，甚至不考虑大写字母。

作为一种解决方法，您可以构造一个接受r, g, b, a所有类型的 HexEncodedNumber 的函数，TypeScript 将对参数进行类型检查，但该函数的ReturnType<>将只是string，或者如果您尝试在 return 语句中添加as const甚至"作为 '#${string}'"，则该函数的将any。

RGB 情况应该大致相同，因为它是相同数量的组合。

从理论上讲，联合类型是可能的，但是如果你只做十六进制代码，你就有超过 16,000,000 种可能的组合，而打字稿(至少 4.6.3)不喜欢这个想法。

它已经被 MS 搁置了一年多了 https://github.com/microsoft/TypeScript/issues/42790

看起来你在示例中使用了 React。一个简单的选项可能是导入CSSProperties并访问color属性。

import { CSSProperties } from "react";
const Entry = ({color}: {color: CSSProperties["color"]}) => {
return (
<div style={{color: color}}>
This text will be colored.
</div>
);
};

这样做的好处是可以很容易地提供任何形式的颜色：命名颜色，如yellow、aliceblue或powderblue、十六进制值、RGB、HSL 或任何有效的 CSS 字符串。

这在功能上与使用string相同，但用法更具表现力。如果需要使用类型保护，请使用此处的第一个和可接受的答案。

这不是一个答案(见上文)，但这里有一些你可能会发现有用的东西：

type CssColorNames =
| 'AliceBlue'
| 'AntiqueWhite'
| 'Aqua'
| 'Aquamarine'
| 'Azure'
| 'Beige'
| 'Bisque'
| 'Black'
| 'BlanchedAlmond'
| 'Blue'
| 'BlueViolet'
| 'Brown'
| 'BurlyWood'
| 'CadetBlue'
| 'Chartreuse'
| 'Chocolate'
| 'Coral'
| 'CornflowerBlue'
| 'Cornsilk'
| 'Crimson'
| 'Cyan'
| 'DarkBlue'
| 'DarkCyan'
| 'DarkGoldenRod'
| 'DarkGray'
| 'DarkGrey'
| 'DarkGreen'
| 'DarkKhaki'
| 'DarkMagenta'
| 'DarkOliveGreen'
| 'DarkOrange'
| 'DarkOrchid'
| 'DarkRed'
| 'DarkSalmon'
| 'DarkSeaGreen'
| 'DarkSlateBlue'
| 'DarkSlateGray'
| 'DarkSlateGrey'
| 'DarkTurquoise'
| 'DarkViolet'
| 'DeepPink'
| 'DeepSkyBlue'
| 'DimGray'
| 'DimGrey'
| 'DodgerBlue'
| 'FireBrick'
| 'FloralWhite'
| 'ForestGreen'
| 'Fuchsia'
| 'Gainsboro'
| 'GhostWhite'
| 'Gold'
| 'GoldenRod'
| 'Gray'
| 'Grey'
| 'Green'
| 'GreenYellow'
| 'HoneyDew'
| 'HotPink'
| 'IndianRed'
| 'Indigo'
| 'Ivory'
| 'Khaki'
| 'Lavender'
| 'LavenderBlush'
| 'LawnGreen'
| 'LemonChiffon'
| 'LightBlue'
| 'LightCoral'
| 'LightCyan'
| 'LightGoldenRodYellow'
| 'LightGray'
| 'LightGrey'
| 'LightGreen'
| 'LightPink'
| 'LightSalmon'
| 'LightSeaGreen'
| 'LightSkyBlue'
| 'LightSlateGray'
| 'LightSlateGrey'
| 'LightSteelBlue'
| 'LightYellow'
| 'Lime'
| 'LimeGreen'
| 'Linen'
| 'Magenta'
| 'Maroon'
| 'MediumAquaMarine'
| 'MediumBlue'
| 'MediumOrchid'
| 'MediumPurple'
| 'MediumSeaGreen'
| 'MediumSlateBlue'
| 'MediumSpringGreen'
| 'MediumTurquoise'
| 'MediumVioletRed'
| 'MidnightBlue'
| 'MintCream'
| 'MistyRose'
| 'Moccasin'
| 'NavajoWhite'
| 'Navy'
| 'OldLace'
| 'Olive'
| 'OliveDrab'
| 'Orange'
| 'OrangeRed'
| 'Orchid'
| 'PaleGoldenRod'
| 'PaleGreen'
| 'PaleTurquoise'
| 'PaleVioletRed'
| 'PapayaWhip'
| 'PeachPuff'
| 'Peru'
| 'Pink'
| 'Plum'
| 'PowderBlue'
| 'Purple'
| 'RebeccaPurple'
| 'Red'
| 'RosyBrown'
| 'RoyalBlue'
| 'SaddleBrown'
| 'Salmon'
| 'SandyBrown'
| 'SeaGreen'
| 'SeaShell'
| 'Sienna'
| 'Silver'
| 'SkyBlue'
| 'SlateBlue'
| 'SlateGray'
| 'SlateGrey'
| 'Snow'
| 'SpringGreen'
| 'SteelBlue'
| 'Tan'
| 'Teal'
| 'Thistle'
| 'Tomato'
| 'Turquoise'
| 'Violet'
| 'Wheat'
| 'White'
| 'WhiteSmoke'
| 'Yellow'
| 'YellowGreen';

相关内容

最新更新

热门标签：