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)

El issue no proporciona ningún archivo del repositorio ni punto de entrada de pruebas; comienza rastreando el diagnóstico TS2352 y sus pruebas existentes. Compara los detalles propuestos sobre el tipo y la ubicación de la declaración, y define el texto esperado del diagnóstico y la cobertura antes de la implementación. Se considera terminado cuando los errores por propiedades ausentes proporcionan contexto útil sobre el tipo o la ubicación sin cambiar el comportamiento en tiempo de ejecución.