Use one property of a Typescript interface in an other interface

Question

Suppose I have a Typescript Interface as follows

export interface IMyObj {
    id: string;
    type: 'AA' | 'AZ' | 'XY';
    ...
}

Now I need an other interface which also has that type field

export interface IMyOtherObj {
    ...
    type: 'AA' | 'AZ' | 'XY';
    ...
}

As you can see I have duplicated the values of type. So my question is, how can I reuse IMyObj.type in my IMyOtherObj interface? I tried this

export interface IMyOtherObj {
    ...
    type: IMyObj.type; // -> error
    ...
}

I think I'm close but so far no luck, any suggestions?

is it not possible to just extract those as a type?

toskv
– toskv

2020-03-24 14:02:53 +00:00
Commented Mar 24, 2020 at 14:02 — toskv
– toskv, Commented Mar 24, 2020 at 14:02

Maciej Sikora · Accepted Answer · 2020-03-24 15:58:17Z

9

Your issue is that TS type system has no . property access but indexed property type, change one thing in your type definition:

type: IMyObj['type']

answered Mar 24, 2020 at 15:58

Maciej Sikora

20.3k4 gold badges52 silver badges50 bronze badges

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

1 Comment

Akshay Kumar Over a year ago

What if I need something like X and the interface has a property which is X[]? Is extracting the type of X still possible? As this method would then return X[].

DaggeJ · Accepted Answer · 2020-03-24 14:06:14Z

2

Define an enumeration for your property type, such as

enum MyEnum {
    Aa = "AA",
    Az = "AZ",
    Xy = "XY"
}

and use it like this;

export interface IMyObj {
    id: string;
    type: MyEnum;
}

answered Mar 24, 2020 at 14:06

DaggeJ

2,2091 gold badge14 silver badges25 bronze badges

Comments

Chris Pickford · Accepted Answer · 2020-03-24 14:04:17Z

1

You could create a new interface that contains only the type property definition, then extend from that in your others:

export interface ITypedObj {
    type: 'AA' | 'AZ' | 'XY';
}

export interface IMyObj extends ITypedObj {
    id: string;
}

TS Handbook: Extending Interfaces

answered Mar 24, 2020 at 14:04

Chris Pickford

9,0606 gold badges51 silver badges76 bronze badges

Comments

toskv · Accepted Answer · 2020-03-24 14:08:40Z

1

You have 2 options.

1 extract the type of the field type as it's own type and use it in both places.

type ObjectType = 'AA' | 'AZ' | 'XY'
interface A {
  type: ObjectType;

}
interface B {
  type: ObjectType
}

Or if you can not modify the first interface, you can make the second interface extend a subtype of the first one.

interface A {
  type: 'AA' | 'AZ' | 'XY';

}

interface B extends Pick<A, 'type'> {

}

answered Mar 24, 2020 at 14:08

toskv

31.8k7 gold badges77 silver badges77 bronze badges

Comments

Richard Price · Accepted Answer · 2020-03-24 14:02:49Z

0

you can use the extends functionality

so you would have

export interface IMyObj {
    id: string;
    type: 'AA' | 'AZ' | 'XY';
    ...
}

and then

export interface IMyOtherObj extends IMyObj{
    ...
    otherthings: string;
    ...
}

answered Mar 24, 2020 at 14:02

Richard Price

4904 silver badges13 bronze badges

Collectives™ on Stack Overflow

Use one property of a Typescript interface in an other interface

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related