问题描述
限时送ChatGPT账号..我的组件接受一个 overlay
属性,它应该是一个有效的 CSS 颜色.
My component accepts an overlay
prop that is supposed to be a valid CSS color.
当我在样式对象中的 color
属性上 CTRL + Click
时,类型定义来自 node_modules 中的 csstype
文件夹.CSS 颜色属性的类型定义定义为 Property.Color
.我将该类型导入到我的组件中并将其用作我的 overlay
道具的类型,但是当我尝试使用该组件时它最终成为 any
.
When I CTRL + Click
on a color
property in style object, the type definition comes from a csstype
folder inside node_modules. The type definition for CSS color property is defined as Property.Color
. I imported that type into my component and used it as my overlay
prop's type but it ends up being any
when I try to use that component.
我的组件的类型定义:
import { Property } from "../node_modules/csstype/index";
export interface BlurredComponentProps {
overlay?: Property.Color;
}
这是我使用组件时的样子:
Here is how it looks when I use the component:
所以我的问题是,如何正确键入一个应该只采用有效 CSS 颜色的道具,如果给出非颜色值,则给出错误?
So my question is, how to properly type a prop that is supposed to take only valid CSS colors and give error if non-color value is given?
谢谢
推荐答案
这个在 TypeScript 的类型系统中很难编码.我相信成熟的解析器可以在速度和准确性方面做得更好.
This one is pretty hard to encode in TypeScript's type system. I believe a full fledged parser can do a better job in both speed and accuracy.
无论如何,如果您真的想从打字稿中对 color
值进行一些类型检查,那么让我们从 w3c 颜色属性开始描述:
Anyway, if you really want to get some typecheking for your color
values from typescript then let's start with w3c color property description:
Values: <color value> | <color keyword> | currentColor | transparent | inherit
playground 链接,适用于不需要解释和直接查看代码的内容.
playground link for those who don't need explanations and what to look right into the code.
好吧,color keyword
、currentColor
、transparent
和 inherit
非常简单:
Well, color keyword
, currentColor
, transparent
and inherit
are pretty straightforward:
type Color = ColorValue | ColorKeyword | 'currentColor' | 'transparent' | 'inherit'
type ColorKeyword =
| "black"
| "silver"
| "gray"
...
| "rebeccapurple"
棘手的部分是<颜色值>
:
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).
16 进制 RGB 值
还是可以的:
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
.否则为扁平"联合类型:
We have to introduce type variable T
. Otherwise 'flat' union type:
type RGBColor = `#${Hex3}` | `#${Hex3}${Hex3}`
将由 16^3 + 16^6
个成分组成,远远超出联合类型的 100000
打字稿限制.
is going to consist of 16^3 + 16^6
constituents that's far beyound 100000
typescript limit for union types.
让我们介绍一些处理数字的辅助类型.我们必须检查百分比不大于 100%
并以 %
字符结尾.
Let's introduce some helper types to work with numbers. We have to check the percents are not greater than 100%
and end with %
character.
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
:
Also color values must be integers and not greater than 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]
范围内的整数或百分比:
so, any color value can be encoded as an integer number in [0..255]
range or a percent:
type IsColorValue<T extends string> = IsPercent<T> | Color255<T>
添加实用程序 Trim
类型以修剪两端的多余空格:
Adding utility Trim
type to trim extra spaces on both ends:
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
,我们需要不透明度.这里我们只要求输入任何有效数字或百分比:
For rgba
/hsla
we'll need opacity. Here we just ask for any valid number or a percent:
type Opacity<T extends string> = IsDecNumber<T> | IsPercent<T>
现在我们可以检查 rgba
值:
Now we can check rgba
values:
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
添加学位检查器:
Adding degree checker for 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
最后我们可以讨论最后一种情况:
and finally we can cover the last cases:
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
所以我们的最终类型看起来像这样:
So our final type will look like that:
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'
游乐场链接
这篇关于如何输入颜色道具?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
更多推荐
[db:关键词]
发布评论