不確定這是否可能，但很好奇，因此提出了這個問題。我正在構建一個包含方形影像的組件，該影像采用 size 道具。我想強制尺寸始終是 5 的倍數，以便影像保持清晰。
我對這個主題的了解很少，導致我這樣做，但并沒有真正按照我預期的方式作業。
type Props = {
size: (x) => (x % 5 === 0)
};
歸根結底，我只想能夠在使用道具時輸入檢查道具。例如：
// TS should throw an error
<Logo size={32} />
// TS should allow it
<Logo size={40} />
使用 TypeScript 可以實作這樣的事情嗎？
uj5u.com熱心網友回復：
非常非常有趣的問題和 TS 在這里大放異彩 :)) 從 4.1 開始，你可以有這個例子。
由于 5 的所有乘數都以 0 或 5 結尾，因此您可以像這樣解決它
type EndsWithZeroOrFive = '0' | '5'
type OtherDigits = `${number}` | ''
type MultiplierOfFive = `${OtherDigits}${EndsWithZeroOrFive}`
const n1 : MultiplierOfFive = '10'
const n2 : MultiplierOfFive = '25'
// no issue
const n3 : MultiplierOfFive = '12'
// Type '"12"' is not assignable to type 'EndsWithZeroOrFive | `${number}0` | `${number}5`'.
uj5u.com熱心網友回復：
可以驗證一個數字：
type ZeroOrFive = '0' | '5'
type IsValid<N extends number> = `${N}` extends '5' | `${number}${ZeroOrFive}` ? N : never
type Result = IsValid<5> // 5
const fn = <Num extends number>(num: IsValid<Num>) => num
fn(10) // ok
fn(5) // ok
fn(125) // ok
fn(11) // Error
fn(0) // Error
fn(NaN) // Error
fn(Infinity) // Error
fn(05) // Error
fn('05') // Error
const higherOrder = (num: number) => fn(num); // error with higher order function
操場
訣竅在于使用帶有泛型引數的條件型別。
如果您對泛型引數的驗證感興趣，可以在此處和此處查看我的文章
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/407289.html
標籤：