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 ne fournit aucun fichier du dépôt ni point d’entrée de test ; commencez par retracer le diagnostic TS2352 et ses tests existants. Comparez les détails proposés concernant le type et l’emplacement de la déclaration, puis définissez la formulation attendue du diagnostic et la couverture avant l’implémentation. Le travail est considéré comme terminé lorsque les erreurs liées à des propriétés manquantes fournissent un contexte utile sur le type ou l’emplacement sans modifier le comportement à l’exécution.