typescript: overwrite a field from an extended interface

Question

I've got an interface which extends 2 other interfaces.

The new interface is identical except for one thing: the field '_id' should be a string instead of an ObjectId (for easier server side operations).

Is it possible to overwrite the type of a field in the new interface? When I do it, tslint tells the new interface doesn't extend properly the previous ones.

Also I'd like to avoid union type such as: _id : ObjectId | string

export interface AchievementDb {
    _id: ObjectID; 
    title: string;
    description: string;
    // more stuff
}

export interface AchievementUserProgress {
    _id: ObjectID;
    progress: number;
    status: UserAchievementStatus;
    // more stuff
}

export interface AchievementFull extends AchievementDb, AchievementUserProgress {
    _id: string;
}

What you want to achieve will not be possible because all types should be better strictly defined. That's why the interface is defined to help you and others to not violate some contract rules. And you are violating the "Interface segregation principle" from SOLID principles. — LkPark
– LkPark, Commented Jul 30, 2018 at 10:29

Romain · Accepted Answer · 2018-07-30 10:32:17Z

7

I would see two options:

Base interfaces

interface WithID {
    _id: ObjectID;
}

interface AchievementDbBase {
    title: string;
    description: string;
    // more stuff
}

interface AchievementDb extends AchievementDbBase, WithID {

}

interface AchievementUserProgressBase {
    progress: number;
    // more stuff
}

interface AchievementUserProgress extends AchievementUserProgressBase, WithID {

}

interface AchievementFull extends AchievementDbBase, AchievementUserProgressBase {
    _id: string;
}

Use Omit

Have a look at Exclude Types (https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-8.html) permitting this kind of mappings for types : http://ideasintosoftware.com/typescript-advanced-tricks/

in your case:

interface AchievementFull extends Omit<AchievementDb, '_id'>, Omit<AchievementUserProgress, '_id'>  {
    _id: string;
}

answered Jul 30, 2018 at 10:32

Romain

8106 silver badges8 bronze badges

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

2 Comments

olawalejuwonm Over a year ago

How do i omit more than one field from the same type

GoncaloNGT Over a year ago

@olawalejuwonm Old post, but you do it with a union type, like this: Omit<Interface, 'prop1' | 'prop2' | ...>

Titian Cernicova-Dragomir · Accepted Answer · 2018-07-30 10:34:41Z

There are several options.

We could use a generic type parameter on the interfaces to specify the type of id. We can specify a default type parameter to be able to keep using the interface without type parameters if necessary:

export interface AchievementDb<T = ObjectID> {
  _id: T; 
  title: string;
  description: string;
  // more stuff
}
export interface AchievementUserProgress<T = ObjectID> {
  _id: T;
  progress: number;
  status: UserAchievementStatus;
  // more stuff
}

export interface AchievementFull extends AchievementDb<string>, AchievementUserProgress<string> {
}

Another option is to use Pick and Exclude to remove the field from the interfaces so we can override it as we wish (you will find a similar type defined as Omit by others)

type ExcludeId<T> = Pick<T, Exclude<keyof T, '_id'>>
export interface AchievementFull extends ExcludeId<AchievementDb>, ExcludeId<AchievementUserProgress> {
  _id: string;
}

jcubic · Accepted Answer · 2019-01-14 17:19:35Z

2

Based on few other answers, I think this is cleaner (types based on my real code):

type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;

interface HTMLEvent<T> extends Omit<Event, 'target'> {
    target: T;
}

I'm using this type for Angular events so I don't need to cast type of target like in docs:

onKey(event: KeyboardEvent) { // with type info
    this.values += (<HTMLInputElement>event.target).value + ' | ';
}

and use this:

onInput(event: HTMLEvent<HTMLInputElement>) {
   this.value = event.target.value;
}

answered Jan 14, 2019 at 17:19

jcubic

67.1k58 gold badges252 silver badges466 bronze badges

Comments

codeepic · Accepted Answer · 2018-07-30 10:27:43Z

1

The fact that you are trying to overwrite the field type in AchievementFull interface is a sign of a code smell and defeats the purpose of extending the other interfaces. You can't change _id type from ObjectID to string in a child interface. Maybe you should consider organising your interfaces differently.

TypeScript doesn't allow you to overwrite parent interface property in a child interface.

answered Jul 30, 2018 at 10:27

codeepic

4,1628 gold badges39 silver badges60 bronze badges

2 Comments

Titian Cernicova-Dragomir Over a year ago

While I don't agree you can't do it you are right about it being a code smell :)

codeepic Over a year ago

You're right, your solution with generic type param is actually quite readable.

Collectives™ on Stack Overflow

typescript: overwrite a field from an extended interface

4 Answers 4

Base interfaces

Use Omit

2 Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Base interfaces

Use Omit

2 Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related