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)

Issue không cung cấp tệp nào trong repository cũng như entry point của test; hãy bắt đầu bằng cách lần theo chẩn đoán TS2352 và các test hiện có của nó. So sánh các chi tiết được đề xuất về kiểu và vị trí khai báo, sau đó xác định cách diễn đạt chẩn đoán mong đợi và phạm vi coverage trước khi triển khai. Được xem là hoàn tất khi các lỗi thiếu thuộc tính cung cấp ngữ cảnh hữu ích về kiểu hoặc vị trí mà không thay đổi hành vi runtime.