How to override type properties in TypeScript

Question

For example, I have

type Line = {
  start: Point;
  end: Point;
  color: string; //'cyan'/'aquablue'/...
}

But now I want to create new line type on the base of Line, so that it stores color as number:

type HexColorLine = Point & {
  color: number;
}

Now I expect the HexColorPoint type be equal to

{
  start: Point;
  end: Point;
  color: number;
}

But it equals to

{
  start: Point;
  end: Point;
  color: string | number;
}

Is there a way to override but not extend the prop type with some short syntax? Do i really have to define entirely new type for this?

I'm fairly sure you can't override like you are trying to do. You could instead declare a `SimpleLine` without the color property, and then declare `Line` and `HexColorLine` as extending the `SimpleLine`? Is there some reason I'm missing that you can't do this? — Gerrit0, Mar 28 '17 at 22:02
See also: [Overriding interface property type defined in Typescript d.ts file](https://stackoverflow.com/questions/41285211/overriding-interface-property-type-defined-in-typescript-d-ts-file) and [Exclude property from type](https://stackoverflow.com/questions/48215950/exclude-property-from-type) — MarcusOtter, Aug 11 '22 at 01:58

score 65 · Accepted Answer · edited Mar 18 '20 at 03:31

65

Create a helper type:

type Overwrite<T, U> = Pick<T, Exclude<keyof T, keyof U>> & U;

Usage:

type HexColorLine = Overwrite<Line, { color: number }>

edited Mar 18 '20 at 03:31

Maxim Mazurok

3,856
2
22
37

answered Mar 04 '19 at 00:44

Karol Majewski

23,596
8
44
53

Is this still valid for TypeScript v3.9? – Fernando Montoya Jul 15 '20 at 11:22
9

This can be written today as `type Overwrite = Omit & U;` – MarcusOtter Aug 10 '22 at 21:47
1

I have a problem with that solution: it lets me add arbitrary properties. I want to have an error of I'm overwriting a property name that doesn't exist... – Adam Nov 08 '22 at 14:58

score 17 · Answer 2 · answered Nov 23 '20 at 12:56

17

A simple one off solution as of TypeScript 3.5 could be:

type HexColorLine = Omit<Line, 'color'> & {
  color: number;
}

answered Nov 23 '20 at 12:56

Pablo R. Dinella

650
6
7

score 11 · Answer 3 · answered Aug 11 '22 at 01:41

11

In TypeScript 3.5 or later you can use Omit<Type, Keys>.

For types:

type HexColorPoint = Omit<Line, "color"> & {
    color: number;
}

For interfaces:

interface HexColorPoint extends Omit<Line, "color"> {
    color: number;
}

answered Aug 11 '22 at 01:41

MarcusOtter

1,095
10
19

score 7 · Answer 4 · answered Apr 25 '22 at 08:42

To expand on Pablo's answer which uses Omit, you can do the following to make a more generic utility type.

type Overwrite<Base, Overrides> = Omit<Base, keyof Overrides> & Overrides


type HexColorLine = Overwrite<Line, { color: number }>

This omits all of the keys in the provided Overrides type from the Base type, then combines that with the provided Overrides.

score 5 · Answer 5 · answered Mar 29 '17 at 02:14

5

This is not supported at the moment. TypeScript would need a concept of subtraction types. Proposals exist https://github.com/Microsoft/TypeScript/issues/12215 and https://github.com/Microsoft/TypeScript/issues/4183

Fix

Create a base type :

type LineBase = {
  start: Point;
  end: Point;
}
type LineBase = LineBase & {
  color: string; //'cyan'/'aquablue'/...
}

answered Mar 29 '17 at 02:14

basarat

261,912
58
460
511

Thanks, this helped! I had type where I needed to narrow the type on a property and this works. – Robula Jul 11 '18 at 09:20

score 4 · Answer 6 · answered Mar 03 '19 at 21:23

TL;DR:

type Omit<T, K> = Pick<T, Exclude<keyof T, K>>
type Override<T, U> = Omit<T, keyof U> & U

type ColorNumber =  {
  color: number;
}

type HexColorPoint = Override<
  Line,
  ColorNumber
> // --> {start: Point; end: Point; color: number}

I assume you wanted to do

type HexColorLine = Line & {
  color: number;
}

instead of

type HexColorLine = Point /* <-- typo? */ & {
  color: number;
}

With Typescript >2.8 i was able to override like this:

From https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-8.html :

We did not include the Omit type because it is trivially written as Pick<T, Exclude<keyof T, K>>.

// So we define Omit -.-
type Omit<T, K> = Pick<T, Exclude<keyof T, K>>

// Sidenote: 
// keyof is just getting all the keys for a given type separeted by |
// keyof Line --> 'start' | 'end' | 'color'

// And we define Override which unions the type without unwanted keys and the 
// type defining the new keys
type Override<T, U> = Omit<T, keyof U> & U

// just define which properties you want to redefine 
// and remove "Point &" as it will be done in the Override type
type HexColorLine =  {
  color: number;
}
type HexColorPoint = Override<
  Line,
  HexColorLine
> // --> {start: Point; end: Point; color: number}

score 2 · Answer 7 · answered May 03 '21 at 08:48

2

You can try Override from the utility-types package https://github.com/piotrwitek/utility-types#overwritet-u. So in the future maybe you would like to use other cool helpers from there.

answered May 03 '21 at 08:48

How to override type properties in TypeScript

7 Answers7

Fix

Linked