Describe the type of missing property in error message

Search Terms

• describe missing property
• missing property type

Suggestion

In short: When describing a missing type, also describe the shape of the type that is expected, and/or where the interface/type can be located.

It can be difficult to manually find the type, especially with deep interface nesting and union types. An example of this being difficult is below.

Use Cases

Basically any time you interact with complicated enough typings, libraries tend to use a lot of inheritance and union types. The better the error messages, the more seamless the developer experience is.

Examples

Real life example of an error message (some interfaces have been abbreviated).

src/components/cvr-lookup-field.tsx(24,26): error TS2352: Type 'Props & { children?: ReactNode; }' cannot be converted to type 'TextFieldProps'.
  Property 'style' is missing in type 'Props & { children?: ReactNode; }'.

So I need style - not sure what it is. Let's dig into TextFieldProps

export interface TextFieldProps extends FieldProps, Omit<MuiTextFieldProps, 'error' | 'name' | 'onChange' | 'value'> {
}

Alright, so two interfaces, one with some properties omitted. FieldProp is reasonably simple, and I can tell style isn't defined there. Let's dig into MuiTextFieldProps

export interface StandardTextFieldProps extends BaseTextFieldProps {
  variant?: 'standard';
}
export interface OutlinedTextFieldProps extends BaseTextFieldProps {
  variant: 'outlined';
}
export type MuiTextFieldProps = StandardTextFieldProps | OutlinedTextFieldProps;

Let's go deeper..

export interface BaseTextFieldProps
  extends StandardProps<FormControlProps, TextFieldClassKey, 'onChange' | 'defaultValue'> {
//...
}

And at some point you give up, because these hierarchies can get very deep. I wanted to find style to prove a point for this issue, but I was unable to.

This to me demonstrates how problematic this is - even spending a pretty long time searching for this attribute to file an issue, I was unable to find it.

Error Message Suggestions

Change the error message from:

src/components/cvr-lookup-field.tsx(24,26): error TS2352: Type 'Props & { children?: ReactNode; }' cannot be converted to type 'TextFieldProps'.
  Property 'style' is missing in type 'Props & { children?: ReactNode; }'.

To this (describing the type)

src/components/cvr-lookup-field.tsx(24,26): error TS2352: Type 'Props & { children?: ReactNode; }' cannot be converted to type 'TextFieldProps'.
  Property 'style' of type '"red" | "blue" | "green"'  is missing in type 'Props & { children?: ReactNode; }'.

Or this (describing where to find it):

src/components/cvr-lookup-field.tsx(24,26): error TS2352: Type 'Props & { children?: ReactNode; }' cannot be converted to type 'TextFieldProps'.
  Property 'style' declared in interface "FooBar" is missing in type 'Props & { children?: ReactNode; }'.

Checklist

My suggestion meets these guidelines:

• 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. new expression-level syntax)

Das Issue enthält keine Repository-Datei und keinen Test-Einstiegspunkt; beginne damit, die Diagnose TS2352 und ihre bestehenden Tests nachzuverfolgen. Vergleiche die vorgeschlagenen Details zu Typ und Deklarationsort und lege dann die erwartete Formulierung der Diagnose und den Abdeckungsumfang vor der Implementierung fest. Als abgeschlossen gilt die Aufgabe, wenn Fehler aufgrund fehlender Eigenschaften nützlichen Kontext zum Typ oder Ort liefern, ohne das Laufzeitverhalten zu ändern.