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)

L’issue non fornisce alcun file del repository né un punto di ingresso per i test; inizia tracciando la diagnostica TS2352 e i test esistenti. Confronta i dettagli proposti sul tipo e sulla posizione della dichiarazione, quindi definisci il testo previsto della diagnostica e la copertura prima dell’implementazione. Il lavoro è completo quando gli errori relativi a proprietà mancanti forniscono un contesto utile sul tipo o sulla posizione senza modificare il comportamento a runtime.