如何在键名中使用动态元素在 Typescript 界面中定义属性? [英] How to define properties in a Typescript interface with dynamic elements in the key name?
问题描述
我有一个对象,它可以有 n
个属性,每个属性都相同,但名称中带有 n
值.
I have an object that can have an n
number of properties, each one the same but with their n
value in the name.
示例:
const obj = {
'data-element-0': 'something',
'data-element-1': 'something else',
'data-element-2': 'something as well',
'data-element-3': 'something to feel included',
};
有没有什么方法可以比仅仅使用更具体地定义这个接口
Is there any way to define this interface with more specificity than just using
interface Obj {
[key: string]: string;
}
推荐答案
你可以这样做:
type Key = `data-element-${1|2|3|4|5|6|7|8|9|0}`
const obj:Record<Key, string> = {
'data-element-0': 'something',
'data-element-1': 'something else',
'data-element-2': 'something as well',
'data-element-3': 'something to feel included',
'data-element-yu': 'something to feel included', // error
};
更新我还制作了双数的助手,从:0-99:
UPDATE I have also make helpers fot double numbers, from: 0-99:
type NonZeroDigit = '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9'
type NumberHelper = {
[P in NonZeroDigit]: {
[Z in NonZeroDigit]: `${P}${Z}`
}
}
type NestedValues<T extends Record<string, Record<string, string>>> = {
[P in keyof T]: P extends string ? Values<T[P]> : never
}
type Values<T> = T[keyof T]
type RemoveTrailingZero<T extends string> = T extends `${infer Fst}${infer Snd}` ? Fst extends `0` ? `${Snd}` : `${Fst}${Snd}` : never;
type Numbers_99 = RemoveTrailingZero<Values<NestedValues<NumberHelper>>>
更新
这里有一个用于生成从 0 到 99999 的数字范围的实用程序
Here you have an util for generating number range from 0 to 99999
type Values<T> = T[keyof T]
type LiteralDigits = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9
type NumberString<T extends number> = `${T}`
type AppendDigit<T extends number | string> = `${T}${LiteralDigits}`
type MakeSet<T extends number> = {
[P in T]: AppendDigit<P>
}
type RemoveTrailingZero<T extends string> = T extends `${infer Fst}${infer Rest}` ? Fst extends `0` ? RemoveTrailingZero<`${Rest}`> : `${Fst}${Rest}` : never;
type From_1_to_999 = RemoveTrailingZero<Values<{
[P in Values<MakeSet<LiteralDigits>>]: AppendDigit<P>
}>>
type By<V extends NumberString<number>> = RemoveTrailingZero<Values<{
[P in V]: AppendDigit<P>
}>>
type From_1_to_99999 =
| From_1_to_999
| By<From_1_to_999>
| By<From_1_to_999
| By<From_1_to_999>>
更新 3
如果你还想生成文字数字,而不是字符串数字,你可以使用这段代码,这个代码已经从这里
If you still want to generate literal numbers, not string numbers, you can use this code, which has been shamelessly stolen from here
type PrependNextNum<A extends Array<unknown>> = A['length'] extends infer T ? ((t: T, ...a: A) => void) extends ((...x: infer X) => void) ? X : never : never;
type EnumerateInternal<A extends Array<unknown>, N extends number> = { 0: A, 1: EnumerateInternal<PrependNextNum<A>, N> }[N extends A['length'] ? 0 : 1];
type Enumerate<N extends number> = EnumerateInternal<[], N> extends (infer E)[] ? E : never;
type Result = Enumerate<43> // 0 | 1 | 2 | ... | 42
*2021 年 9 月 8 日更新
从 TS 4.5 开始,参见 尾递归 PR,可以生成很多更长的号码范围.
Since TS 4.5, see Tail recursion PR, it is possible to generate much longer number range.
参见示例:
type MAXIMUM_ALLOWED_BOUNDARY = 495
type ComputeRange<
N extends number,
Result extends Array<unknown> = [],
> =
(Result['length'] extends N
? Result
: ComputeRange<N, [...Result, Result['length']]>
)
const ComputeRange = (N: number, Result: number[] = []): number[] => {
if (Result.length === N) {
return Result
}
return ComputeRange(N, [...Result, Result.length])
}
// 0 , 1, 2 ... 494
type NumberRange = ComputeRange<MAXIMUM_ALLOWED_BOUNDARY>[number]
这篇关于如何在键名中使用动态元素在 Typescript 界面中定义属性?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!