Confusing error message (2322), should use (2741) and (2322) error message when this["XXX"] = {...} has a missing (or mispelled) key or an incompatible value.

🔍 Search Terms

Relevant issues:

• https://github.com/microsoft/TypeScript/issues/29049

✅ Viability Checklist

• This wouldn't be a breaking change in existing TypeScript/JavaScript code
• This wouldn't change the runtime behavior of existing JavaScript code
• This could be implemented without emitting different JS based on the types of the expressions
• This isn't a runtime feature (e.g. library functionality, non-ECMAScript syntax with JavaScript output, new syntax sugar for JS, etc.)
• This isn't a request to add a new utility type: https://github.com/microsoft/TypeScript/wiki/No-New-Utility-Types
• This feature would agree with the rest of our Design Goals: https://github.com/Microsoft/TypeScript/wiki/TypeScript-Design-Goals

⭐ Suggestion

When we have a Record this["faa"] to which we affect an object with an incompatible type, e.g.:

• a key is missing (or misspelled).
• one value has the wrong type.

The following error is shown:

Type '{}' is not assignable to type 'this["faa"]'.
'this["faa"]' could be instantiated with an arbitrary type which could be unrelated to '{}'.(2322)
input.tsx(3, 19): 'key' is declared here.

In this context, I'd like the error message to be modified in order to be less confusing, i.e. :

• if a key is missing: "Property 'key' is missing in type '{}' but required in type '{ key: number | null; }'.(2741)"
• if one value has a wrong type: "Type 'string' is not assignable to type 'number'.(2322)".

📃 Motivating Example

Playground Link

class A {
    declare foo: this["faa"];
    declare faa: {key: number|null}

    fuu() {
        // Type '{}' is not assignable to type 'this["faa"]'.
        // 'this["faa"]' could be instantiated with an arbitrary type which could be unrelated to '{}'.(2322)
        // input.tsx(3, 19): 'key' is declared here.
        this.foo = {} 

        // Type '{ key: string; }' is not assignable to type 'this["faa"]'.
        //   'this["faa"]' could be instantiated with an arbitrary type which could be unrelated to '{ key: string; }'.(2322)
        this.foo = {key: "str"}

        this.foo = {key: 42} // ok
    }
}

let foo: {key: number|null};

// Property 'key' is missing in type '{}' but required in type '{ key: number | null; }'.(2741)
// input.tsx(12, 11): 'key' is declared here.
foo = {}

// Type 'string' is not assignable to type 'number'.(2322)
// input.tsx(12, 11): The expected type comes from property 'key' which is declared here on type '{ key: number | null; }'
foo = {key: "str"}

foo = {key: 42} // ok

It is easy to forget a key or to misspell it. Unfortunately, the error message is currently confusing.

When playing with this["faa"] we often encounter this error, and we might look at it too quickly, missing (or misunderstanding) the last line, thinking this is some kind of TS limitation.

💻 Use Cases

1. What do you want to use this for?

Having more explicit error messages.

2. What shortcomings exist with current approaches?

Confusing error message.

3. What workarounds are you using in the meantime?

N/A

Comienza con el Playground enlazado y las asignaciones motivadoras del issue, luego compara sus diagnósticos con los ejemplos independientes de foo y revisa el issue relacionado #29049. Rastrea dónde TypeScript elige el diagnóstico genérico de this["faa"] en lugar de los diagnósticos de propiedad inexistente o de tipo de propiedad; se considera terminado cuando las dos asignaciones incompatibles muestran los mensajes esperados más específicos sin cambiar el código válido ni la salida en tiempo de ejecución.