I am working with an object that can have multiple properties, each one unique with a numerical value in its name.
For example:
const obj = {
'data-element-0': 'something',
'data-element-1': 'something else',
'data-element-2': 'something as well',
'data-element-3': 'something to feel included',
};
I'm wondering if there is a more specific way to define the interface for this object, rather than just using:
interface Obj {
[key: string]: string;
}
If you want to achieve something similar, you can follow this approach:
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
};
UPDATE I have also created helpers for 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>>>
UPDATE
Here's a utility function for generating number ranges 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>>
UPDATE 3
If you prefer generating literal numbers instead of strings, you can use the following code snippet borrowed 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
*UPDATE 8 September 2021
With TS 4.5, utilizing the Tail recursion PR, longer number ranges can be generated.
Here is an example:
type MAXIMUM_ALLOWED_BOUNDARY = 999
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 ... 998
type NumberRange = ComputeRange<MAXIMUM_ALLOWED_BOUNDARY>[number]
Related question
According to the documentation provided by TypeOrm Framework, the Repository.save function is supposed to save/insert new values and ignore/update existing ones. However, I am currently experiencing an issue where it is throwing a duplication error for an ...
Is there a way to include all my posts in this array so I can use them for conditional styling in the header component? Currently, the header is white on most pages, but dark on the homepage, 404 page, and project pages. However, I am experiencing issues ...
Recently, I made the decision to expand my iOS application to also function as a web app. Although the implementation seems to be working, I am unsure if it is done correctly. I would appreciate it if someone could confirm if the implementation is correct. ...
I'm in the process of developing a straightforward application that involves a one-to-many relationship between data entities. Specifically, I am working with feathers js and sequelize (utilizing sqlite) to create a system where each site can have mul ...
As someone new to TypeScript, I was under the impression that I could import my TS files without specifying their file type. Currently, I have to write: import {sealed} from "./decorators/decorators.ts"; Instead of what I believe should be the correct w ...
I am currently facing an issue while trying to customize the styling of a Material UI component using CSS. Here is the code snippet: <IconButton className="my-class"> <Close /> </IconButton> CSS: .my-class { float: right ...
if (window?.sessionStorage?.getItem('accessToken')?.length > 0) { this.navigateToApplication(); } Encountering the following error: Object is possibly 'undefined'.ts(2532) Any suggestions on how to resolve this issue? I am attem ...
I need help creating a timer that starts counting from 0. Unfortunately, when I click the button to start the timer, it doesn't count properly. Can anyone assist me in figuring out why? How can I format this timer to display hours:minutes:seconds li ...
I am currently looking for a solution to transform the name of an enum into a string format. Suppose I have the following Response enum, how can I obtain or convert 'Response' into a string? One of my functions accepts any enum as input and requi ...
Too long; didn't read: How can I ensure that Angular uses the standard implementation of HttpClient in lower level modules instead of injecting a custom one with interceptors? I have developed an Angular 6 library using Angular CLI. This library expo ...
I have been working on implementing Right-to-Left (RTL) support for scrolling using the ngx-scrollbar package in my Angular project. Unfortunately, I am facing an issue where the scrollbar does not seem to function correctly when in RTL mode. To add ngx-s ...
When I retrieve data from an API, everything works smoothly except when I try to bind my JSON option number value into the [value] tag. Here's an example: SUCCESSFUL (data retrieved from API is selected in the option) <select [(ngModel)]="data.fr ...
Currently, I am working on a project that combines Angular 2/Ionic 2 with JEE 7. In this particular scenario: I have created an httpClient layer to handle all backend calls, and within this layer, there is a const variable called REST_BASE_PATH. During de ...
Within my TypeScript code, I have the following interface: export interface Defined { 4475355962119: number[]; 4475355962674: number[]; } I am trying to create objects based on this interface Defined: let defined = new Defined(); defined['447 ...
Creating a component that is deeply nested raises the issue of importing shared .scss files with long paths: @import '../../../app.shared.scss'; This hassle doesn't exist when it comes to .ts files, thanks to the configuration in tsconfig. ...
Take a look at this piece of code: class A<T> { t?: T; } interface B {} class C implements A<B> {} function f<T1 extends A<T2>, T2>(a: T1): T2 | undefined { return a.t; } const result = f(new C()); const result2 = f(new A<B> ...
Hey guys, I'm working with an array of keys here Example 1: let keyArray = ['x', 'y', 'z'] I'm trying to find a way to use these keys as parameters without repeating them multiple times. Do you have any suggestions ...
In my project, I have implemented p-calendar for selecting dates and times. I have set [minDate]="dateTime" so that it considers the current date and time if I click on Today button. However, I would like the default time to be 00:00 when I click ...
Having trouble deploying my Next.js website through Vercel. It seems to be stuck at this stage. Can someone assist me, please? I've attempted deleting the node_modules folder and package-lock.json, then running npm install again, but unfortunately it ...
After relocating the EmptyTable.tsx file from its original directory at views/forms-tables/tables/react-table/EmptyTable to a new location at components/Tables/EmptyTable, I encountered a persistent issue. Despite updating the import path in my code to mat ...