TS2339: Property X does not exist on type '{}'

Question

I can't seem to resolve this error.

ERROR in App.tsx(9,15) TS2339: Property 'count' does not exist on type '{}'.

App.tsx

import React from "react";

import Test from "./Test";

const App = () => {
  return (
    <div>
      <Test count={1} />
    </div>
  );
}

export default App;

Test.tsx

import React from "react";

interface Props{
  count: number
}
interface State{}

class Test extends React.Component<Props, State>{
  render(){
    return <div>{this.props.count}</div>;
  }
}

export default Test;

My tsconfig is as follows,

{
  "compilerOptions": {
    "allowJs": true,
    "jsx": "react",
    "module": "es6",
    "target": "es5",
    "allowSyntheticDefaultImports": true
  },
  "include": ["src"]
}

I'm also using webpack to build the app. I'm loading the typescript with ts-loader

package.json

  "dependencies": {
    "axios": "^0.18.0",
    "express": "^4.16.3",
    "fetch": "^1.1.0",
    "less": "^3.8.0",
    "mathjax": "^2.7.5",
    "node-html-parser": "^1.1.8",
    "react": "^16.4.2",
    "react-dom": "^16.4.2",
    "webpack": "^4.16.3"
  },
  "devDependencies": {
    "@types/express": "^4.16.0",
    "classnames": "^2.2.6",
    "css-loader": "^1.0.0",
    "less-loader": "^4.1.0",
    "nodemon": "^1.18.3",
    "style-loader": "^0.21.0",
    "ts-loader": "^4.4.2",
    "ts-node": "^7.0.0",
    "typescript": "^3.0.1",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.5"
  }

Thanks!

Do you get the same error if you write `"include": ["./src/**/*"]` instead? — Tholle, Aug 04 '18 at 00:46
That's frustrating. Could you include your entire `App.tsx` and `Test.tsx` files in the question? — Tholle, Aug 04 '18 at 00:53
Thanks. Very odd. [It works for me](https://stackblitz.com/edit/react-ts-yipmlc). — Tholle, Aug 04 '18 at 01:02
@Tholle Huh, could it be a problem with my package.json then? Maybe I've installed something wrong? — Robert Chen, Aug 04 '18 at 01:04
Did you try adding a constructor with `props : Props` param to the `Test` component. like : `constructor(props: Props){ super(props); }` — alegria, Aug 04 '18 at 01:05
I remember somewhere I read that in order for props to work you need to add a constructor with a `super(props)` call. Glad that it worked. — alegria, Aug 04 '18 at 01:07
Did that resolve your error? Very odd. [You should not need a constructor](https://www.typescriptlang.org/docs/handbook/react-&-webpack.html). — Tholle, Aug 04 '18 at 01:09
@Tholle Yeah. Is it because they're using `commonjs` while I'm compiling from `es6`? — Robert Chen, Aug 04 '18 at 01:13
I agree with @Tholle . It's not stated explicitly in the documentation why exactly we need that. It just says you should add that line. — alegria, Aug 04 '18 at 01:14
You should not have to put `constructor(props: Props){ super(props); }` on all your components. That feels incredibly unnecessary. There is something else strange going on. — Tholle, Aug 04 '18 at 01:19
@Tholle Yeah, that seems like a lot of unnecessary boilerplate. Do you need me to provide anything else? — Robert Chen, Aug 04 '18 at 01:22

score 5 · Accepted Answer · answered Aug 04 '18 at 01:22

5

Install the React type definitions:

npm install -D @types/react @types/react-dom

Without the types installed, TS can't properly infer the props needed for JSX elements. Hopefully they'll make the error a little clearer in the future c:

answered Aug 04 '18 at 01:22

kingdaro

11,528
3
34
38

Ah, I see. That makes a lot more sense now! Thanks! – Robert Chen Aug 04 '18 at 01:26

score 0 · Answer 2 · answered Aug 04 '18 at 01:13

Adding the following to the Test component seems to work.

constructor(props: Props){ super(props); }

As to why, here's an explanation to the solution.

Another explanation from another answer :

super allows you to access the constructor method of the parent class. The only reason to include props is to access this.props inside of your constructor.

TS2339: Property X does not exist on type '{}'

2 Answers2