Material-ui: Add propTypes guidance to TypeScript Guide

[awhitford]

I am using React with TypeScript.
I converted the Dashboard Page Layout example to TypeScript, following the TypeScript guide very carefully.
I managed to get everything working, except the following fragment:

Dashboard.propTypes = {
  classes: PropTypes.object.isRequired,
};

TypeScript complains that:

[ts] Property 'propTypes' does not exist on type 'typeof Dashboard'. [2339]

So far, I have just commented this out, but it would be best to have guidance added to the _TypeScript Guide_ for how one is supposed to deal with propTypes. (Obviously, commenting this out means that there is no runtime enforcement for the required property. In this one case, that may not be too critical, but I can see this as being a general issue.)

I am using:

• @material-ui/core 3.9.0
• react 16.7.0
• typescript 3.2.2
• NodeJS 10.15.0

[rfbotto]

@awhitford You dont really need to use propTypes if you are using Typescript in react. propTypes existe to enforce types on the properties of your component when using react + javascript. When using typescript, you have access to a fully typed language, that allows you to define the types of everything you create in the application, including things like props and state. So there's no need to use propTypes. By defining an interface for the props that the component accepts you are already speciyfing the typing contract for the component.

So in case of the Dashboard component, if you are using withStyles to customize it, you need to be aware that this injects classes into your component that you can then use, so for that to work on a type level, you need to specify on the Dashboard props that it also takes a property classes of type Classes.

[eps1lon]

Just want to address the main issue: I don't have a very good answer to that since propTypes are typed very strict. We only use them to get the right "primitive" (in a loose sense). So string, objects or maybe a set of strings. But we don't verify shapes of objects with propTypes.

This is however not a specifc problem of material-ui. This is a general issue for react with TypeScript so I would encourage you to use stackoverflow or other ressources. Part of this might be addressed by #13229.

Personal opinion: I encountered those issues myself and the only typesafe way was to move from function declarations to function expressions e.g. const Component: React.FunctionComponent = () => {}. This adds typechecking for propTypes but I'm not a fan of the syntax. It will also not allow you to use generics. So most of the time I'm somewhat ok with just using @ts-ignore or any. propTypes and static types are in the same file anyway which makes it quite obvious when I have to adjust on or the other

So there's no need to use propTypes.

This is just not true. propTypes and TypeScript target two different issues. propTypes is for type checking at run-time while TypeScript only works at compile-time. There are also multiple defeat devices in TypeScript that will lower the degree of confidence in your code.

So for most apps adding TypeScript will already help alot with a host of different issue. However adding propTypes can improve DX even more for parts of your code that have bad type coverage. Especially for library authors it's still important to add both propTypes and statics types since not every user is using TypeScript.

[eps1lon]

I would refer you to https://github.com/sw-yx/react-typescript-cheatsheet/blob/master/README.md#section-2-getting-started and "What's the difference?". The cheatsheet itself is a great starting point to learn react + ts patterns.

I'll close this since it's not specific to material-ui.

[monokrome]

There are libraries & tools that use propTypes to get more information about components, and abandoning them to pretend like TS is better at their job kind of avoids the point of an interface that React suggests. Instead, TypeScript should be providing ways to infer the types from React's propTypes.

[eps1lon]

TypeScript should be providing ways to infer the types from React's propTypes.

The typings for react already check propTypes against the Props interface which works great most of the time. Though it is a bit inconvenient if you have deeper shapes.

This isn't specific to Material-UI though. If there is anything specific to Material-UI, Typescript and propTypes please let me now. For general concerns I would appreciate it if we could move the discussion to react-typescript-cheatsheet.