Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can I add a prefix or suffix to the keys of a TypeScript interface/type which is programmatically generated?

I am wondering, if it is possible to to add a prefix or suffix to a TypeScript type which uses an array of strings as its keys.

type First = {
  one: string
  two: string
}

type Second = keyof First 

type Third = {
  [S in Second]: any
}

With this approach Third accepts the attributes one & two with any type. Which is amazing, as I only need to change the first type in order to have the others also updated.

Now I want a fourth type which is exactly the same as Third but I want to add a prefix to the keys. Like a dollar sign or something.

Desired result:

type Fourth = {
  $one: any
  $two: any
}

I could just hard code it but than I would have to adjust the Fourth type if the First type has been changed.

Thank you.

like image 894
denizkberlin Avatar asked Jan 20 '21 15:01

denizkberlin


People also ask

What does Keyof do in TypeScript?

keyof is a keyword in TypeScript which is used to extract the key type from an object type.

What Is A TypeScript interface?

In TypeScript, an interface is an abstract type that tells the compiler which property names a given object can have. TypeScript creates implicit interfaces when you define an object with properties. It starts by looking at the object's property name and data type using TypeScript's type inference abilities.

What is mapped type in TypeScript?

A mapped type is a generic type which uses a union of PropertyKey s (frequently created via a keyof ) to iterate through keys to create a type: type OptionsFlags < Type > = { [ Property in keyof Type ]: boolean; };

Can we use the “i” prefix for interfaces but not types?

Thus we had the “I” prefix for interfaces but not for types. But in the end, the “type” and the “interface” really can be used the same way and the differentiation is completely wasted.

How do I add prefixes and suffixes to multiple file names?

Many files are in a folder, and you must add a prefix or suffix to all file names. Going through them one by one in File Explorer and adding a prefix or suffix is time-consuming. An excellent way to add prefixes and suffixes to multiple file names is with PowerShell.

Do you need the prefix “i” in your code?

Now, at the end of the day, once you understand that you don’t need “I” as a prefix and why you don’t need it, if it is in your coding standards and you have lots of existing code or others think about “I” all day, it’s okay to roll with it.

What is the difference between a type and an interface?

But in the end, the “type” and the “interface” really can be used the same way and the differentiation is completely wasted. The point is that in your code, you don’t care if it is an Interface or not, what you care about is that it is a type (not the keyword “type” but just the generic concept, “type”).


1 Answers

TS 4.1 has support for easy key remapping using template literal types:

type First = {
  one: string
  two: string
}

type Fourth = {
    [K in keyof First as `$${K}`]: any
}

If you wanted to use the original type associated with each key instead of any (if you're using TS, you should want to avoid any when possible, after all!), replace

: any

with

: First[K]
like image 148
CertainPerformance Avatar answered Nov 06 '22 04:11

CertainPerformance