如何輸入顏色道具？

Question

我的組件接受一個應該是有效 CSS 顏色的overlay道具。

當我CTRL + Click樣式對象中的color屬性時，類型定義來自csstype文件夾。 CSS 顏色屬性的類型定義定義為Property.Color 。 我將該類型導入到我的組件中並將其用作我的overlay道具的類型，但是當我嘗試使用該組件時它最終是any類型。

我的組件的類型定義：

import { Property } from "../node_modules/csstype/index";


export interface BlurredComponentProps {
  overlay?: Property.Color;
}

這是我使用組件時的樣子：

所以我的問題是，如何正確鍵入一個應該只采用有效 CSS 顏色的道具，如果給出了非顏色值，則給出錯誤？

謝謝

Answer 1

這個很難在 TypeScript 的類型系統中編碼。 我相信一個成熟的解析器可以在速度和准確性方面做得更好。

---

無論如何，如果你真的想從打字稿中對你的color值進行一些類型檢查，那么讓我們從 w3c 顏色屬性描述開始：

Values: <color value> | <color keyword> | currentColor | transparent | inherit

為那些不需要解釋和直接查看代碼的人提供的操場鏈接。

---

好吧， color keyword 、 currentColor 、 transparent和inherit非常簡單：

type Color = ColorValue | ColorKeyword | 'currentColor' | 'transparent' | 'inherit'

type ColorKeyword =
    | "black"
    | "silver"
    | "gray"
    ...
    | "rebeccapurple"    

棘手的部分是<color value> ：

The color can be specified as

* a hexadecimal RGB value: #faf or #ffaaff
* a RGB value: rgb(255, 160, 255) or rgb(100%, 62.5%, 100%)
      Each value is from 0 to 255, or from 0% to 100%.
* a RGBA value: rgba(255, 160, 255, 1) or rgba(100%, 62.5%, 100%, 1)
      This variant includes an “alpha” component to allow 
      specification of the opacity of a color. Values are 
      in the range 0.0 (fully transparent) to 1.0 (fully opaque).
* a HSL value: hsl(0, 100%, 50%)
      A triple (hue, saturation, lightness). hue is an 
      angle in degrees. saturation and lightness are 
      percentages (0-100%).
* a HSLA value: hsla(0, 100%, 50%, 1)
      This variant includes an “alpha” component to allow 
      specification of the opacity of a color. Values are 
      in the range 0.0 (fully transparent) to 1.0 (fully opaque).

hexadecimal RGB value仍然可以：

type HexDigit = '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | 'a' | 'b' | 'c' | 'd' | 'e' | 'f'

type Hex3 = `${HexDigit}${HexDigit}${HexDigit}`

type RGBColor<T extends string> = 
  Lowercase<T> extends `#${Hex3}`
      ? T
      : Lowercase<T> extends `#${Hex3}${infer Rest}`
        ? Rest extends Hex3
            ? T
            : never
        : never

我們必須引入類型變量T 。 否則為“扁平”聯合類型：

type RGBColor = `#${Hex3}` | `#${Hex3}${Hex3}`

將由16^3 + 16^6成分組成，遠遠超過聯合類型的100000打字稿限制。

讓我們介紹一些輔助類型來處理數字。 我們必須檢查百分比不大於100%並以%字符結尾。

type DecDigit = '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9'
type Digits0to4 = '0' | '1' | '2' | '3' | '4'

type OnlyDecDigits<T extends string> = 
    T extends `${DecDigit}${infer Rest}`
        ? Rest extends ''
            ? 1
            : OnlyDecDigits<Rest>
        : never

type IsDecNumber<T extends string> =
    T extends `${infer Integer}.${infer Fractional}`
        ? Integer extends ''
            ? OnlyDecDigits<Fractional>
            : Fractional extends ''
                ? OnlyDecDigits<Integer>
                : OnlyDecDigits<Integer> & OnlyDecDigits<Fractional>
        : OnlyDecDigits<T>

type IntegerPart<T extends string> =
    T extends `${infer I}.${infer F}`
        ? I
        : T

type IsInteger<T extends string> = 
    1 extends IsDecNumber<T>
        ? T extends IntegerPart<T> 
            ? 1 
            : never
        : never

type Less100<T extends string> = 
    IsDecNumber<T> extends 1
        ? IntegerPart<T> extends `${DecDigit}` | `${DecDigit}${DecDigit}` | '100'
            ? 1
            : never
        : never

type IsPercent<T extends string> =
    '0' extends T
        ? 1
        : T extends `${infer P}%` 
            ? Less100<P> 
            : never

此外顏色值必須是整數且不大於255 ：

type Color255<T extends string> =
    1 extends IsInteger<T>
        ? T extends `${DecDigit}` 
                  | `${DecDigit}${DecDigit}` 
                  | `1${DecDigit}${DecDigit}` 
                  | `2${Digits0to4}${DecDigit}`
                  | `25${Digits0to4 | '5'}`
            ? 1
            : never
        : never

因此，任何顏色值都可以編碼為[0..255]范圍內的整數或百分比：

type IsColorValue<T extends string> = IsPercent<T> | Color255<T>

添加實用程序Trim類型以修剪兩端的額外空間：

type WhiteSpace = ' '
type Trim<T> = T extends `${WhiteSpace}${infer U}` 
    ? Trim<U> 
    : T extends `${infer U}${WhiteSpace}` 
        ? Trim<U> 
        : T;

這對於rgb足夠了：

type RGB<T extends string> = 
    T extends `rgb(${infer R},${infer G},${infer B})` 
        ? '111' extends `${IsColorValue<Trim<R>>}${IsColorValue<Trim<G>>}${IsColorValue<Trim<B>>}`
            ? T
            : never
        : never

對於rgba / hsla我們需要不透明度。 在這里，我們只要求輸入任何有效數字或百分比：

type Opacity<T extends string> = IsDecNumber<T> | IsPercent<T>

現在我們可以檢查rgba值：

type RGBA<T extends string> =
    T extends `rgba(${infer R},${infer G},${infer B},${infer O})`
        ? '1111' extends `${IsColorValue<Trim<R>>}${IsColorValue<Trim<G>>}${IsColorValue<Trim<B>>}${Opacity<Trim<O>>}`
            ? T
            : never
        : never

為hsl / hsla添加學位檢查器：

type Degree<T extends string> =
    1 extends IsInteger<T>
        ? T extends `${DecDigit}`
                  | `${DecDigit}${DecDigit}`
                  | `${'1' | '2'}${DecDigit}${DecDigit}`
                  | `3${Digits0to4 | '5'}${DecDigit}`
                  | '360'
            ? 1
            : never
        : never

最后我們可以涵蓋最后一種情況：

type HSL<T extends string> =
    T extends `hsl(${infer H},${infer S},${infer L})`
        ? `111` extends `${Degree<Trim<H>>}${IsPercent<Trim<S>>}${IsPercent<Trim<L>>}`
            ? T
            : never
        :never

type HSLA<T extends string> =
    T extends `hsla(${infer H},${infer S},${infer L},${infer O})`
        ? `1111` extends `${Degree<Trim<H>>}${IsPercent<Trim<S>>}${IsPercent<Trim<L>>}${Opacity<Trim<O>>}`
            ? T
            : never
        :never

所以我們的最終類型看起來像這樣：

type ColorValue<T extends string> = HexColor<T> | RGB<T> | RGBA<T> | HSL<T> | HSLA<T>

type Color<T extends string> = ColorValue<T> | ColorKeyword | 'currentColor' | 'transparent' | 'inherit'

游樂場鏈接