Material-ui: Typescript definitions for TableCell

[agustin107]

@material-ui/core/TableCell/TableCell.d.ts (13,64): Type '"align"' does not satisfy the constraint '"color" | "hidden" | "dir" | "slot" | "style" | "title" | "children" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | ... 240 more ... | "scope"'.

• [x] This is not a v0.x issue.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

Current Behavior 😯

Steps to Reproduce 🕹

Link:

1.
2.
3.
4.

Context 🔦

Your Environment 🌎

| Tech | Version |
|--------------|---------|
| Material-UI | v3.8.3 |
| React | 16.4.14 |
| Browser | Chrome |
| TypeScript | 3.2.1 |
| etc. | |

[eps1lon]

How do you use TableCell?

[agustin107]

This warning doesn't throw on my code, this throw when run app with yarn start, with react-scripts-ts

[eps1lon]

I need to know what app you are referring to. Please provide a minimal reproducible example.

[LorenzHenk]

This seems similar to #14014

[kirbdee]

Recently updated as well and I'm also getting this simply from an VSCode IDE as an error

see:

File is: node_modules/@material-ui/core/TableCell/TableCell.d.ts

I currently removed all usage of TableCell but this still appears

Update: It seems what @LorenzHenk was referring to is there might have been an addition not intended

simply removing the excess from my screenshot to what was added in #14014 seems to work, though not sure if this is the right fix

[eps1lon]

Could you please provide the output of yarn list --pattern "@types/react"?

[kirbdee]

@eps1lon I'm not using yarn, what's the npm alternative for this?

EDIT:

npm ls @types/react output

├─┬ @material-ui/[email protected]
│ └─┬ @types/[email protected]
│   └── @types/[email protected]  deduped
├── @types/[email protected]
├─┬ @types/[email protected]
│ └── @types/[email protected]  deduped
├─┬ @types/[email protected]
│ ├── @types/[email protected]  deduped
│ └─┬ @types/[email protected]
│   └── @types/[email protected]  deduped
└─┬ @types/[email protected]
  └── @types/[email protected]  deduped

[eps1lon]

You need to upgrade @types/react.
If this is not possible you can add skipLibCheck: true to your tsconfig. This might disable some type checks in your code base though so I would be careful. Upgrade @types/react is recommend although it might cause other issues in your codebase.

[kirbdee]

@eps1lon I went ahead and tried that when i did the ls and compared it the the material-ui dependencies. looks like it fixed this.

I'm kinda new to the typescript world, any recommendations to mitigate this type of discrepancies?

Is it generally best practice to simply just upgrade relevant type dependencies when upgrading various libs? (in this case material-ui)

[eps1lon]

If it is possible try to pin all your @types/* packages. It would be IMO way better if no one would bundle their types since semver can't be applied to type declarations because TS itself doesn't follow semver and type declarations are usually behind their actual implementation which means even minor changes can cause breakage.

However it's way easier for us to maintain our types if we have full control over them. Moving them to the DefinitelyTyped monorepo would slow everything related to material-ui down. We try to not rely on new features in @types/react and usually breakage shouldn't happen to often.

I can't really give you a satisfying answer to this issue. If this happens again just look at the @types/* versions we have in yarn.lock and try to reconcile them with your types.