Why can't I assign to a variable-specified key of a `Partial`?

Question

In this TypeScript code, also repeated below, there is a function which builds up a partial object in the application's type system from component parts. However, it doesn't work with the noted error that all the result's properties are undefined in a way that prevents assigning anything else to them. (They're not undefined in the hover test shown, however.)

I tried using the KeyForValue strategy noted here but that failed with an issue that the original has when using an interface instead of a type. Removing the dependence on the Record utility type removed that error but left one about how that KeyForValue type was more strict than the 'one' string picked from a constant array.

I also tried using this strategy with a variadic tuple type which also didn’t work because (readonly [...K])[0] cannot be used to index the type that K is a keyof.

Is there another workaround for the design limitation listed in that issue, to get rid of this error but still be able to dynamically build up an object with keys and corresponding values passed in as separate parameters?

---

The code at the Playground link is:

interface HornPlayer {instrumentName: 'saxophone' | 'clarinet' | 'trumpet';}
interface ChordPlayer {instrumentName: 'piano' | 'organ' | 'vibraphone';}
interface BassPlayer {instrumentName: 'double bass' | 'tuba' | 'bass guitar';}
interface DrumPlayer {kitItemCount: number;}
type Instrumentalist = HornPlayer | ChordPlayer | BassPlayer | DrumPlayer;
interface JazzQuartet {
    horn: HornPlayer,
    chords: ChordPlayer,
    bass: BassPlayer,
    drums: DrumPlayer
}
const demoFn = function (
    instrumentalists : [HornPlayer, ChordPlayer, BassPlayer, DrumPlayer],
) : Partial<JazzQuartet> {
    //This array is hard-coded only to make the example simpler:
    const roleNamesInSameOrder = ['horn', 'chords', 'bass', 'drums'] as (keyof JazzQuartet)[];
    let result : Partial<JazzQuartet> = {};
    const roleNameOutsideLoop = roleNamesInSameOrder[0]; // 'horn'
    //Error ts(2322): Type 'HornPlayer' is not assignable to type 'undefined':
    result[roleNameOutsideLoop] = instrumentalists[0];
    result['horn'] = instrumentalists[0]; //this works fine though
    for (let index in roleNamesInSameOrder) {
        const roleName = roleNamesInSameOrder[index];
        const instrumentalist = instrumentalists[index] as (JazzQuartet[typeof roleName]);
        let test = result['horn']; //HornPlayer | undefined as expected
        let test2 = result[roleName]; //HornPlayer | ChordPlayer | BassPlayer | DrumPlayer | undefined as expected
        //Error ts(2322): Type 'HornPlayer' is not assignable to type 'undefined':
        result[roleName] = instrumentalist;
    }
    return result;
}

Answer 1

This type:

const roleNamesInSameOrder = ['horn', 'chords', 'bass', 'drums'] as (keyof JazzQuartet)[];

Is not safe, because you can repeat drums twice or even three times:

const roleNamesInSameOrder = ['drums', 'drums', 'drums'] as (keyof JazzQuartet)[];

You will see that there are no TS errors. Please also keep in mind, that:

    const roleNameOutsideLoop = roleNamesInSameOrder[0]; // 'horn'

roleNameOutsideLoop is infered as a keyof JazzQuartet and not as a horn.

To make this line safer, you need to use TupleUnion utility type. Here you can find more examples in my article.

interface HornPlayer { instrumentName: 'saxophone' | 'clarinet' | 'trumpet'; }
interface ChordPlayer { instrumentName: 'piano' | 'organ' | 'vibraphone'; }
interface BassPlayer { instrumentName: 'double bass' | 'tuba' | 'bass guitar'; }
interface DrumPlayer { kitItemCount: number; }
type Instrumentalist = HornPlayer | ChordPlayer | BassPlayer | DrumPlayer;
interface JazzQuartet {
    horn: HornPlayer,
    chords: ChordPlayer,
    bass: BassPlayer,
    drums: DrumPlayer
}

// stolen from here https://github.com/microsoft/TypeScript/issues/13298#issuecomment-692864087
type TupleUnion<U extends string, R extends any[] = []> = {
    [S in U]: Exclude<U, S> extends never ? [...R, S] : TupleUnion<Exclude<U, S>, [...R, S]>;
}[U];

const demoFn = function (
    instrumentalists: [HornPlayer, ChordPlayer, BassPlayer, DrumPlayer],
): Partial<JazzQuartet> {

    //This array is hard-coded only to make the example simpler:
    const roleNamesInSameOrder: TupleUnion<keyof JazzQuartet> = ['horn', 'chords', 'bass', 'drums'];
    let result: Partial<JazzQuartet> = {};

    const roleNameOutsideLoop = roleNamesInSameOrder[0]; // 'horn'

    result[roleNameOutsideLoop] = instrumentalists[0]; // ok

    result['horn'] = instrumentalists[0]; // ok

    for (let index in roleNamesInSameOrder) {
        const roleName = roleNamesInSameOrder[index];
        const instrumentalist = instrumentalists[index] as (JazzQuartet[typeof roleName]);
        let test = result['horn'];
        let test2 = result[roleName];

        result[roleName] = instrumentalist; // error
    }
    return result;
}

However, we still have an error here result[roleName] = instrumentalist. I understand that you are a bit confused, because, this code works as expected:

result[roleNameOutsideLoop] = instrumentalists[0]; // ok

This works without an error, because TS is able to infer roleNameOutsideLoop which is horn and instrumentalists[0] which is HornPlayer.

However, here:

result[roleName] = instrumentalist; // error

roleName is a union of "horn" | "chords" | "bass" | "drums" and instrumentalist is a union of HornPlayer | ChordPlayer | BassPlayer | DrumPlayer.

It means that from type perspective next case can have a place:

// pseudo code
result['horn'] = BassPlayer

TS is not able to track index in a for..in loop. TS is not smart enough to figure out that there is a relation between index, roleNamesInSameOrder and instrumentalists. I mean, each time when you are using roleNamesInSameOrder[index] you get a union instead of some only one type.

Please see related question and my article.

SUMMARY

Usually, in TypeScript, when you have such issue, you need to use Array.prototype.reduce:

interface HornPlayer { instrumentName: 'saxophone' | 'clarinet' | 'trumpet'; }
interface ChordPlayer { instrumentName: 'piano' | 'organ' | 'vibraphone'; }
interface BassPlayer { instrumentName: 'double bass' | 'tuba' | 'bass guitar'; }
interface DrumPlayer { kitItemCount: number; }
type Instrumentalist = HornPlayer | ChordPlayer | BassPlayer | DrumPlayer;
interface JazzQuartet {
    horn: HornPlayer,
    chords: ChordPlayer,
    bass: BassPlayer,
    drums: DrumPlayer
}

// stolen from here https://github.com/microsoft/TypeScript/issues/13298#issuecomment-692864087
type TupleUnion<U extends string, R extends any[] = []> = {
    [S in U]: Exclude<U, S> extends never ? [...R, S] : TupleUnion<Exclude<U, S>, [...R, S]>;
}[U];

const ROLE_NAMES: TupleUnion<keyof JazzQuartet> = ['horn', 'chords', 'bass', 'drums'];


const fn = (
    instrumentalists: [HornPlayer, ChordPlayer, BassPlayer, DrumPlayer],
): Partial<JazzQuartet> =>
    ROLE_NAMES.reduce((acc, elem, index) => ({
        ...acc,
        [elem]: instrumentalists[index]
    }), {} as Partial<JazzQuartet>)

Playground

P.S. TypeScript does not like mutations