Typescript Errors while converting a React project

Question

This is specific to a React app I am converting from standard ES2015 to Typescript. In my .tsx files (converted from regular .js files) I am getting a couple of typescript errors I do not know how to solve.

The first is: error TS2339: Property 'propTypes' does not exist on type 'typeof App'.

This applies to:

App.propTypes = {
  actions: PropTypes.object.isRequired,
  fuelSavingsAppState: PropTypes.object.isRequired
};

I tried creating an interface above that code that defined App like:

interface App {
    propTypes?: any;
}

But this had no effect. Clearly I am new to Typescript so what am I missing?

The other error is:

error TS2605: JSX element type 'Element' is not a constructor function for JSX elements.
  Property 'render' is missing in type 'Element'

and this applies to:

{settings.necessaryDataIsProvidedToCalculateSavings ? <FuelSavingsResults savings={settings.savings} /> : null}

The error specifically refers to the bit about <FuelSavingsResults

At a complete loss as to where to even start with that. Any suggestions are most welcome.

in case it helps, the definition for FuelSavingsResults starts like:

let FuelSavingsResults = (props) => {
    let savingsExist = NumberFormatter.scrubFormatting(props.savings.monthly) > 0;
    let savingsClass = savingsExist ? 'savings' : 'loss';
    let resultLabel = savingsExist ? 'Savings' : 'Loss';

and then has a regular React render method that follows, but I don't think that will matter.

basarat · Accepted Answer · 2016-01-14 00:01:29Z

21

error TS2339: Property 'propTypes' does not exist on type 'typeof App'.

Instead of

class App extends React.Component{
}
App.propTypes = {
  actions: PropTypes.object.isRequired,
  fuelSavingsAppState: PropTypes.object.isRequired
};

Use a static property.

class App extends React.Component{
    static propTypes = {
      actions: PropTypes.object.isRequired,
      fuelSavingsAppState: PropTypes.object.isRequired
    };
}

error TS2605: JSX element type 'Element' is not a constructor function for JSX elements. Property 'render' is missing in type 'Element'

This was a bug in the compiler that has since been fixed : https://github.com/Microsoft/TypeScript/issues/6349 Alternative provide type annotations for props. 🌹

answered Jan 14, 2016 at 0:01

basarat

278k60 gold badges475 silver badges528 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

rg88 Over a year ago

That bug was so recently resolved it makes me wonder it Typescript is really ready to be used with React. What do you think? Is it still too "beta" for React?

basarat Over a year ago

@Stuart I'm building this with it : alm.tools Its a lot less beta than React itself 🌹 The bugs are mostly TypeScript providing more help which would otherwise be completely absent and ignored till runtime.

Neo · Accepted Answer · 2016-07-02 04:06:23Z

5

Is propTypes really required? Won't interface check at compile time what propTypes check in runtime?

interface IApp{
  actions:any;
  fuelSavingsAppState: (props:any)=> void;
}

class App extends React.Component<IApp,{}>{
}

or if you are using dumb components

const App = ({actions,  fuelSavingsAppState }:IApp):React.ReactElement<{}> => (
  <div>
   What Ever you want to do with the props 
  </div>
)

Note: If you are using object please create an interface for the same. Like actions as of now given as any which should be ideally an interface.

answered Jul 2, 2016 at 4:06

Neo

4,7906 gold badges39 silver badges55 bronze badges

3 Comments

Adrian Moisa Over a year ago

I am new to React coming from Angular 2. I can say that there are definitely situations when runtime checks are more than necessary, should I say, even vital. Many of the helper methods used in services tend to benefit from runtime checks. I usually check the params to prevent their misuse and thus prevent bugs deeper in the callstack.

Nate Cheng Over a year ago

I tried with defining interface, it won't pop error, even if there's wrong type defined

Guy Over a year ago

TS will provide the type checking at transpile time and the PropTypes at runtime.

Collectives™ on Stack Overflow

Typescript Errors while converting a React project

2 Answers 2

2 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related