What is the best way to transform typescript defined string types into an array of strings?

Question

What is the best way to transform typescript defined string types into an array of strings?

I'm attempting to extract all defined types from a variable in a constructor.

export interface TestType {
  resultType?: 'NUMBER' | 'STRING' | 'DATE' | 'ENUM' | 'AMOUNT' ;
}

My expectation is to achieve something like this.

const types: string[] = ['NUMBER', 'STRING', 'DATE', 'ENUM', 'AMOUNT'];

Is there a way or function to accomplish this without changing the constructor?

I am trying to automate the process of extracting all types so that I can select them easily.

Here is an example showing it may not be possible.

Any thoughts on similar solutions?

Currently, I am using Typescript version 4.0.5

Thank you.

angular typescript

Answer 1

Answer №1

If you're looking to iterate through possible values of a variable in a similar way, it's important to reference types in a static final manner in TypeScript.

export class ExampleClass{
    options = ['A', 'B', 'C', 'D', 'E'] as const;
    selection: ExampleClass["options"][number];
}

In the example above, the valid values for selection come from the options Array. This ensures type validation will occur.

Answer 2

If you're looking to iterate through possible values of a variable in a similar way, it's important to reference types in a static final manner in TypeScript.

export class ExampleClass{
    options = ['A', 'B', 'C', 'D', 'E'] as const;
    selection: ExampleClass["options"][number];
}

In the example above, the valid values for selection come from the options Array. This ensures type validation will occur.

Answer 3

Answer №2

Since these types do not actually exist during runtime, you cannot directly generate the strings. One workaround is to create a helper function that ensures only the correct keys are used.

type Types = 'foo'|'bar'|'baz';

type TypeHolder<T extends string> = { [Key in T]: number; }

function getKeys<T extends string>(types: TypeHolder<T>) {
    return Object.keys(types);
}

console.log(getKeys<Types>({ foo: 1, bar: 1, baz: 1 }));  // ['foo', 'bar', 'baz']

Alternatively, it might be simpler to approach it from a different angle:

const types = ['foo', 'bar', 'baz'] as const;
type Types = typeof types[number];   // 'foo'|'bar'|'baz'

Answer 4

Since these types do not actually exist during runtime, you cannot directly generate the strings. One workaround is to create a helper function that ensures only the correct keys are used.

type Types = 'foo'|'bar'|'baz';

type TypeHolder<T extends string> = { [Key in T]: number; }

function getKeys<T extends string>(types: TypeHolder<T>) {
    return Object.keys(types);
}

console.log(getKeys<Types>({ foo: 1, bar: 1, baz: 1 }));  // ['foo', 'bar', 'baz']

Alternatively, it might be simpler to approach it from a different angle:

const types = ['foo', 'bar', 'baz'] as const;
type Types = typeof types[number];   // 'foo'|'bar'|'baz'

What is the best way to transform typescript defined string types into an array of strings?

Answer №1

Answer №2

Similar questions

The provided argument, which is of type 'RefObject<HTMLDivElement>', cannot be assigned to the parameter of type 'IDivPosition'

Looking to update properties for elements within the Angular Material 16 mat-menu across the board?

Employing a general-purpose function in a recursive manner

A guide to setting a file size limit for image uploads (e.g. limiting to 2MB) using Angular

How can a div be displayed next to another div when it is clicked using angular2?

The object's key values were unexpectedly empty despite containing data

Older versions of javascript offered the assurance of a promise

Invoke a general function with corresponding generic parameters

When there are multiple tabs open in the browser, I notice a difference in the time displayed. This occurs in an Angular 2 environment

Schematic tool for updating ViewChild in Angular 8 upgrade

Error message: "Function call failed in Angular model getter"

A method for expanding the menu upwards to make room for newly added items

Angular 6 and Bootstrap 4 Collaborate for a Dynamic Multi-Level NavBar

What is the best way to show specific links in the navigation bar only when the user is signed in using Angular?

Protractor end-to-end tests fail to run properly when the `--spec` flag is utilized

Angular: The CORS issue continues despite configuring proxy.conf.json

Upgrading Angular from Version 9 to Version 10

Tips for updating the date separator in Angular 2

Delivering emails with attachments using Angular 8

Creating a personalized state object containing unresolved promises in React Native utilizing axios inside a custom React Hook