Creating a new interface object in Typescript by utilizing the keyof operator to reference another interface, while also modifying the key name through string concatenation

Question

Creating a new interface object in Typescript by utilizing the keyof operator to reference another interface, while also modifying the key name through string concatenation

Scenario: I am dealing with multiple select boxes filled with various select options.

Here are the different types that I am working with:

type Option<T = any> = {
    value: T
    // reserved for option
    [prop: string]: any
}

export type OptionType<T = any> = Option<T>

interface SelectBox {
    affiliate_id: number
    campaign_id: string
    username: number | string | undefined
}

interface SelectBoxOptions {
    affiliate_id_options: OptionType<number>[]
    campaign_id_options: OptionType<string>[]
    username_options: OptionType<number | string | undefined>[]
}

Is there a way to automate the creation of the SelectBoxOptions type, considering it follows a consistent pattern?

I attempted the following approach:

export type SelectBoxOptions<T> = {
    [K in keyof T as `${K}_options`]: OptionType<T[K]>[]
}

An example use case is demonstrated below:

//
//     interface NumberFilter {
//         affiliate_id: number
//         campaign_id: string
//     }
//
//     SelectBoxOptions<NumberFilter> == {
//         affiliate_id_options: OptionType<number>[]
//         campaign_id_options: OptionType<string>[]
//     }
//

However, I encountered this error from tsc:

https://i.sstatic.net/IrHRv.png


app/javascript/app/services/FilterService.ts:51:25 - error TS2322: Type 'K' is not assignable to type 'string | number | bigint | boolean'.
  Type 'keyof T' is not assignable to type 'string | number | bigint | boolean'.
    Type 'string | number | symbol' is not assignable to type 'string | number | bigint | boolean'.
      Type 'symbol' is not assignable to type 'string | number | bigint | boolean'.

51     [K in keyof T as `${K}_options`]: OptionType<T[K]>[]

I am puzzled about why this generic type is causing an error. It appears correctly on hover in VSCode when I employ it...

If anyone knows how to prevent the error on "K" in ${K}_options, please share!

typescript

Answer 1

Answer №1

Symbols cannot be converted to strings, which means they cannot be used in template literal types.

To filter out other types like numbers and symbols, intersect keyof T with string:

type Option<T = any> = {
  value: T;
  // reserved for option
  [prop: string]: any;
};

export type OptionType<T = any> = Option<T>;

interface SelectBox {
  affiliate_id: number;
  campaign_id: string;
  username: number | string | undefined;
}

export type SelectBoxOptions<T> = {
  [K in keyof T & string as `${K}_options`]: OptionType<T[K]>[];
};

interface NumberFilter {
  affiliate_id: number;
  campaign_id: string;
}

type X = SelectBoxOptions<NumberFilter>;

Playground

When T is a tuple, keys are automatically given as strings like "0", "1", "2", etc. Therefore, intersecting with only string is adequate.

Answer 2

Symbols cannot be converted to strings, which means they cannot be used in template literal types.

To filter out other types like numbers and symbols, intersect keyof T with string:

type Option<T = any> = {
  value: T;
  // reserved for option
  [prop: string]: any;
};

export type OptionType<T = any> = Option<T>;

interface SelectBox {
  affiliate_id: number;
  campaign_id: string;
  username: number | string | undefined;
}

export type SelectBoxOptions<T> = {
  [K in keyof T & string as `${K}_options`]: OptionType<T[K]>[];
};

interface NumberFilter {
  affiliate_id: number;
  campaign_id: string;
}

type X = SelectBoxOptions<NumberFilter>;

Playground

When T is a tuple, keys are automatically given as strings like "0", "1", "2", etc. Therefore, intersecting with only string is adequate.

Creating a new interface object in Typescript by utilizing the keyof operator to reference another interface, while also modifying the key name through string concatenation

Answer №1

Similar questions

Encountering ng build --prod errors following Angular2 to Angular4 upgrade

Choose a Superclass or Interface for your Subclass

The assignment of `accessToken` is restricted in Mapbox-gl's typing

Here is a unique spin on the topic: "Strategies for dynamically updating the error

Is it possible to access the generic type that a different generic type inherits in TypeScript?

Encountering an Eslint issue: "Function missing return type" while adding a styled component to _document.tsx in Next.js

Using Angular, Typescript, and ngxs to manage state observables, one may wonder what exactly a variable ending with an exclamation mark (!) signifies. An example of this can be seen in the following code snippet:

TypeScript encountered an error with code TS2305, stating that the module "constants" does not have any exported members

How to trigger a component programmatically in Angular 6

What is the reason behind facing TS errors locally after pulling a PR and not on CI builds?

Using TypeScript to type styled-system props

Associate a fresh entity with an Angular form rather than individual attributes

Angular Material: Enable Window Dragging Across Multiple Monitors

Using Typescript to override an abstract method that has a void return type

Troubleshooting: When attempting to integrate a Flask Backend with a NextJS frontend, encountering issues with files not being received properly

Issues with eventEmitter functionality in Angular 2

Differences Between Angular 2 Reactive Forms and Template Forms

Retrieve the specific type of property from a generic data structure

Why is it that retrieving the same class data from two separate TypeScript files yields varying results in TypeScript? What steps can be taken to resolve this issue

The function does not throw a compiler error when a parameter is missing