如何在TypeScript中爲css顏色定義類型？

我有以下示例代碼片段：如何在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);

Playground

我試圖得到一個生成錯誤如果顏色是無效的，就像這樣：

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但可能使如果這個更難回答可以接受這些。

來源

2017-03-03 styfle

有一個建議a type of string which matches a pattern（正則表達式或其他），但該提案還沒有實現。

因此，你要求的是TypeScript 2.2中不可能的。

來源

2017-03-03 16:50:02

只是爲了一點點：這不是不可能的......它只需要tooooooone和一個一點點的代碼就像'type Color ='＃100000'| '＃200000'| ... | '#FFFFFF'| rgb（1,0,0）| rgb（2，0，0）| ...';） – gaa

是的，這是可能的，並且編寫一個自動化腳本來生成這個似乎不太合理的東西（畢竟，有一個腳本可以從.css生成'.d.ts'文件用於CSS模塊類型的文件）。但我不知道這是OP想要的:)。 –

不能在一般意義上做到這一點還，但如果你有一個良好定義的一組顏色，你可以使用常量和字符串字面類型：

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...

而且我D使用它像：

import {primaryRed} from "./Colors.ts"; 

interface BadgeProps { 
    color: Color; 
    text: string; 
} 

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

來源

2017-03-03 18:33:53 Aaron

如何在TypeScript中爲css顏色定義類型？

回答

相關問題