How do I use React 15.5 with TypeScript?

Question

What's the proper way to use TypeScript and React together, now that they have extracted the PropTypes in a separate project with version 15.5?

Everything runs fine after upgrading from 15.4 to 15.5, except that now I get a this warning in the console: "Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead." How do I make it disappear?

I have tried doing the following steps, but it doesn't remove the console warning.

Add the prop-types and @types/prop-types packages.
Import PropTypes everywhere that I import React, import * as PropTypes from "proptypes". Also tried with require("prop-types").
Turn off noUnusedLocals, to avoid that the compiler complains about PropTypes not being used.

But. Since I'm using TypeScript, the compiler is verifying the PropTypes at compile time, so I don't need to do the same at run time, and thus I shouldn't get the warning at all, right? I am hoping that maybe I can add or change a setting somewhere in the build configuration, that would make React compile without PropTypes.

@SebastianSebald: All I have right now is the full repository: github.com/janaagaard75/film-filter/tree/master/website. :-/ — Jan Aagaard
I don't have a firebase account, so I couldn't run you app. But since there is absolutely no use of PropTypes in your code, I guess that one of your dependencies (maybe mobx?) still uses them and this is why you get that warning. — Sebastian Sebald
I use a very similar set of dependencies (ts/webpack/react/mobx/mobx-react), I don't use prop-types at all, and on react 15.5 I don't get any such warning at runtime. It may be prudent to setup a project with the same set of core dependencies, but not dependent on things like firebase to help identify where your problem is — Alex
@Alex: Thanks a lot for the info! At least now I know that it is possible to get my setup to work as intended. Do you have a link to your project? — Jan Aagaard

mixel mixel · Accepted Answer · 2017-05-09T19:30:51

I had the same issue because I was importing React as:

import * as React from 'react'

After I changed it to:

 import React from 'react'

everywhere in my project the warning disappeared.

There is no need for prop-types package.

P.S. I use babel and have "allowSyntheticDefaultImports": true in tsconfig.json.

How do I use React 15.5 with TypeScript?

2 Answers