Is it possible to create a TypeScript generic type that transforms a Record into a type by utilizing the `as const` keyword?

Question

Is it possible to create a TypeScript generic type that transforms a Record into a type by utilizing the `as const` keyword?

Imagine this scenario: I define

const foo = { myKey: 'myValue' } as const

Now, when I ask for typeof foo, I get { readonly myKey: 'myValue' }

If I have a type

MyType = Record<string, string>

, and I want to create a modifier (let's call it Modify) that functions like this...

type ModifiedMyType = Modify<MyType>

const foo: ModifiedMyType = { myKey: 'myValue' }

In this instance, I haven't explicitly declared it as const like before. However, I want typeof foo to still be { readonly myKey: 'myValue' }

javascript typescript generics types

Answer 1

Answer №1

One way to implement readonly properties in TypeScript is by using a mapped type in combination with the readonly modifier.

type ReadOnlyProperties<T> = {
  readonly [K in keyof T]: T[K];
};

type ExampleType = Record<string, string>;
type ModifiedExampleType = ReadOnlyProperties<ExampleType>;

const example: ModifiedMyType = { exampleKey: 'exampleValue' };

Answer 2

One way to implement readonly properties in TypeScript is by using a mapped type in combination with the readonly modifier.

type ReadOnlyProperties<T> = {
  readonly [K in keyof T]: T[K];
};

type ExampleType = Record<string, string>;
type ModifiedExampleType = ReadOnlyProperties<ExampleType>;

const example: ModifiedMyType = { exampleKey: 'exampleValue' };

Is it possible to create a TypeScript generic type that transforms a Record into a type by utilizing the `as const` keyword?

Answer №1

Similar questions

Using jQuery, implement a functionality where a line break is added when the Enter key is pressed. Furthermore, the added

Avoiding repetitive rendering of child components in ReactJS

Show session in HTML using ng-click after reloading the page

Ways to organize an array based on various characteristics

Angular2 Window Opener

What is the method to execute a function on the existing page when the browser goes back?

Is there a way to delay the closing of the browser until the server call is finished?

What strategies can be employed to minimize redundant re-rendering of React components while utilizing the useEffect hook?

Node.js script terminated: Process concluded with an exit code 139 due to being interrupted by signal 11 (SIGSEGV)

Developing an editor

Update the contents of a neighbor div within the same parent element using jQuery

Error in Jquery validation caused by incorrect file extension type

Incorporating AngularFire2 in the latest Angular 11.0.5 framework

jQuery effects failing to run properly in Internet Explorer

A method for reversing specific characters within lengthy strings

Experiencing memory issues while attempting to slice an extensive buffer in Node.js

Invoke jQuery within a nested context once more in the jQuery method sequence

What is the method for choosing an Object that includes an Array within its constructor?

The usage of nextTick in Vue.js and its role in updating components

Is there a way to stop the Firebase web client from altering the error message generated by an https.onRequest function?