如何在TypeScript中为css颜色定义类型？

Question

我有以下示例代码段:

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可以接受那些,可能会使这更难回答.

Answer 1

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

Answer 2

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

因此,从TypeScript 2.2开始,遗憾的是你所要求的.

Answer 3

我的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

Answer 4

从一般意义上说,你不能这样做,但如果你有一套明确定义的颜色,你可以使用常量和字符串文字类型:

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'
});

Answer 5

看起来您在示例中使用了 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 字符串。

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