Typescript interface from array type

Question

I need to force an array to have a specific set of values that should be then the keys of my interface. I can force the array with

type SomeProperties = ['prop1', 'prop2', 'prop3'];

but I don't know how to force an interface to have those properties. I tried something like

type MyInterface = {
  [key in keyof SomeProperties]: string;
}

but obviously the keys of an array are just numbers so my interface become

interface MyInterface {
  0: string;
  1: string;
  2: string;
}

instead of the wanted interface

interface MyInterface {
  prop1: string;
  prop2: string;
  prop3: string;
}

Do you know if there is a way to achieve this in Typescript?

It would be useful because I need to iterate on some properties to "clone" an object and I also need to access to those properties easily. Repeating the properties in both type and interface is a bit fragile for me.

Try changing keyof SomeProperties to SomeProperties[number]. — jcalz
– jcalz, Commented Aug 10, 2017 at 13:04
@jcalz It was a good idea but unfortunately it doesn't work, the IDE is hinting me properties like length, at, charAt and so on but not prop1, prop2 or prop3 :( — Julo
– Julo, Commented Aug 11, 2017 at 8:25
Not keyof SomeProperties[number]; just SomeProperties[number]. — jcalz
– jcalz, Commented Aug 11, 2017 at 13:17
@jcalz that works thank you! If you create the answer I can accept it as the best answer — Julo
– Julo, Commented Sep 21, 2017 at 7:34

jcalz · Accepted Answer · 2023-08-08 21:57:14Z

7

As you note, the strings you're trying to access aren't the keys of SomeProperties, but the elements of SomeProperties.

You can use the indexed access operator here: if K is a key (or a union of keys) of T, then T[K] is the property type (or union of property types) corresponding to accessing the K key(s) of T.

Tuples and arrays accept number as a key type, so you want to use SomeProperties[number] to give you the union "prop1"|"prop2"|"prop3":

type SomeProperties = ['prop1', 'prop2', 'prop3'];

type MyInterface = {
  [K in SomeProperties[number]]: string;
}

const myInterface: MyInterface = {
  prop1: 'this',
  prop2: 'works',
  prop3: 'now'
}

Playground link to code

edited Aug 8, 2023 at 21:57

answered Sep 21, 2017 at 12:40

jcalz

339k29 gold badges452 silver badges449 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Madara's Ghost · Accepted Answer · 2019-04-08 07:44:36Z

6

~~Worth noting: You can't iterate an tuple type in TypeScript~~

Actually, you can! Since TypeScript 3.1 you can safely use tuple types in mapped types like objects.

These sorts of operations can only be applied to types, not interfaces.

type SomeProperties = 'prop1' | 'prop2' | 'prop3';

type MyType = Record<SomeProperties, string>;

// equivalent to
// type MyType = {
//   [key in SomeProperties]: string
// }

Types and interface are the same from the perspective of the consumer (when you ask for a MyType, you don't care if it's an interface or a type, they're the same at that point)

edited Apr 8, 2019 at 7:44

answered Aug 10, 2017 at 8:01

Madara's Ghost

176k52 gold badges274 silver badges314 bronze badges

3 Comments

Julo Over a year ago

I will change my question using type, sorry. So do you think it's impossible to achieve what I'm asking?

dropbeardan Over a year ago

I think this is a better option unless you are working on an array, e.g. for the generic: const ATTACK = "attack"; const CARRY = "carry"; const CLAIM = "claim"; const WORK = "work"; type EnumDictionary<Enum extends string, TValue> = { [K in Enum]: TValue }; const CREEP_BODY_PART_COST: EnumDictionary< ATTACK | CARRY | CLAIM, number > = { attack: 80, // OK carry: 50, // OK claim: 600, // OK work: 100 // FAIL };

Madara's Ghost Over a year ago

@DropBearDan Screeps FTW!

Roman Rokon · Accepted Answer · 2022-11-21 18:18:51Z

0

Update to Madara's answer for future readers.

These sorts of operations can only be applied to types, not interfaces.

I don't know since when, but nowadays you can do this with interfaces too.

type SomeProperties = 'prop1' | 'prop2' | 'prop3';

interface MyType extends Record<SomeProperties, string> {
   // other properties
}

It is equivalent to the following:

type SomeProperties = 'prop1' | 'prop2' | 'prop3';

type MyType = Record<SomeProperties, string>;

answered Nov 21, 2022 at 18:18

Roman Rokon

3313 silver badges7 bronze badges

Collectives™ on Stack Overflow

Typescript interface from array type

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related