Replacing property of a typescript type

Question

I have a type:

type first = {
    one: number;
    two: string;
    three: {
        four: string,
        five: number,
    }
}

It is applicable to one instance of a variable that I declare in one part of my application, but not exactly applicable to another (second) instance of a variable.

The type that would be suitable for second instance of a variable would look like this:

type second = {
    one: number;
    two: string;
    three: {
        four: string,
        five: number[], //difference
    }
}

I don't want to declare a new type from scratch for a small difference and would like to assimilate the existing type first by replacing the type of property three.

I tried to do it this way:

type second = Pick<first, Exclude<keyof first, 'three'>> & { 
    three: {
        four: string,
        five: number[], //difference
    } 
}

But it gives me an error and I get this type definition on hover:

type second = {
    one: number;
    two: string;
    three: {
        four: string,
        five: number,
    };
    three: {
        four: string,
        five: number,
    };
}

Notice 2 properties three.

What am I doing wrong?

Answer 1

You solution should work, I just have two observations:

1. You can use the same approach one level down using type queries, no need to rewrite the inner object

2. Careful with intersection types, the assumption that they behave exactly the same as hand crafted type is not always true. See this question. We can get around such issues flattening the type using an additional mapped type.

With these in mind this is what I would do:

type first = {
    one: number;
    two: string;
    three: {
        four: string,
        five: number,
    }
}

type Identity<T> = { [P in keyof T]: T[P] }
type Replace<T, K extends keyof T, TReplace> = Identity<Pick<T, Exclude<keyof T, K>> & {
    [P in K] : TReplace
}>

type second = Replace<first, 'three', Replace<first['three'], 'five', number[]>>
let d: second = {
    one: 1,
    two: "",
    three : {
        four: "",
        five: [0]
    }
}

Playground link

Answer 2

You could just try to replace a part of the type definition, by using a union. The following is an oversimplification:

type SecondType = FirstType & {
   three: {
        four: string,
        five: number[],
    }
  };

The solution mentioned above will get you in trouble. A simple union doesn't really replace property "three", it actually creates 2 conflicting definitions for properties "three" and "five". Your IDE will give you warnings whenever you try to access them.

A solution, is to remove the property and then merge it back in:

type SecondType = 
   Omit<FirstType, 'three'> & 
   { three: {
        four: string,
        five: number[]
   }};

Answer 3

Building on Titian's answer.

If stacking multiple Overrides becomes too confusing/impractical, you may use this tweaked version:

/**
 * Merge keys of U into T, overriding value types with those in U.
 */
type Override<T, U extends Partial<Record<keyof T, unknown>>> = FinalType<Omit<T, keyof U> & U>

FinalType is a type utility that improves the readability of the final resulting type prodived by your lsp (as shown in your editor). Instead of seeing a bunch of utility types wrapping your initial type, you get the final type as if you had written it yourself.

Here is a definition (taken from this answer):

/**
 * Make a type assembled from several types/utilities more readable.
 * (e.g. the type will be shown as the final resulting type instead of as a bunch of type utils wrapping the initial type).
 */
type FinalType<T> = T extends infer U ? { [K in keyof U]: U[K] } : never

So, reusing the original question's example:

type InitialType = {
    one: number;
    two: string;
    three: {
        four: string,
        five: number,
    }
}

You may use Override this way:

type Transformed = Override<InitialType, {
    three: {
        four: string
        five: number[]
    }
}>

I tested all this in this typescript playground

Answer 4

I was using the same method previously by doing an Omit first and then merging with &, so I made a utility type Replace:

type Replace<
  TypeToBeChecked,
  KeyToBeReplaced extends keyof TypeToBeChecked,
  NewValueToUse
> = Omit<TypeToBeChecked, KeyToBeReplaced> & {
  [P in KeyToBeReplaced]: NewValueToUse
}

We can use it like this:

type NewType = Replace<OldType, KeyInOldType, NewValueForTheSameKey>

Answer 5

Here is an override(deep) version:

type Override<T, TypeToReplace, TypeToReplaceWith> = {
  [K in keyof T]: T[K] extends Record<string, unknown> ? Override<T[K], TypeToReplace, TypeToReplaceWith> : T[K] extends TypeToReplace ? TypeToReplaceWith : T[K]
}