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

Bắt đầu với Playground được liên kết và các phép gán làm cơ sở cho issue, sau đó so sánh các chẩn đoán của chúng với các ví dụ foo độc lập và xem xét issue liên quan #29049. Truy tìm nơi TypeScript chọn chẩn đoán this["faa"] tổng quát thay vì chẩn đoán thiếu thuộc tính hoặc kiểu thuộc tính; được xem là hoàn tất khi hai phép gán không tương thích báo các thông báo cụ thể hơn như mong đợi mà không thay đổi mã hợp lệ hoặc đầu ra khi chạy.