I am trying to Hello World React with Typescript. I wrote the code below. This code works when I use method 1, but throws error on method 2

Method 1 - TypeScriptComponent.tsx

import React from 'react'
import ReactDOM from 'react-dom'
import Button from 'react-bootstrap/lib/Button'

interface TypeScriptComponentProps {

}

function handleClick() {
  console.log("Hello World")
}

export const TypeScriptComponent = (props: TypeScriptComponentProps) => <Button onclick={handleClick()} bsClass="glyphicon glyphicon-new-window"></Button>;

This code works (with a bit unexpected behaviour with handleClick function, which I can resolve later.)

But this method wont work

Method 2 - TypeScriptComponent.tsx

import React from 'react'
import ReactDOM from 'react-dom'
import Button from 'react-bootstrap/lib/Button'

interface TypeScriptComponentProps {

}

function handleClick() {
  console.log("Hello World")
}

export default class TypeScriptComponent extends React.Component<TypeScriptComponentProps, {}> {
    render() {
        return (<Button onclick={handleClick()} bsClass="glyphicon glyphicon-new-window"></Button>)
    }
}

Method 2 throws error

ERROR in [at-loader] ./ponents/TypeScriptComponent.tsx:43:70 TS2339: Property '_ proto _' does not exist on type '() => any'.

ERROR in [at-loader] ./ponents/TypeScriptComponent.tsx:46:5 TS2346: Supplied parameters do not match any signature of call target.

I am not able to figure out what is the difference between the two methods? Why those errors??

I am trying to Hello World React with Typescript. I wrote the code below. This code works when I use method 1, but throws error on method 2

Method 1 - TypeScriptComponent.tsx

import React from 'react'
import ReactDOM from 'react-dom'
import Button from 'react-bootstrap/lib/Button'

interface TypeScriptComponentProps {

}

function handleClick() {
  console.log("Hello World")
}

export const TypeScriptComponent = (props: TypeScriptComponentProps) => <Button onclick={handleClick()} bsClass="glyphicon glyphicon-new-window"></Button>;

This code works (with a bit unexpected behaviour with handleClick function, which I can resolve later.)

But this method wont work

Method 2 - TypeScriptComponent.tsx

import React from 'react'
import ReactDOM from 'react-dom'
import Button from 'react-bootstrap/lib/Button'

interface TypeScriptComponentProps {

}

function handleClick() {
  console.log("Hello World")
}

export default class TypeScriptComponent extends React.Component<TypeScriptComponentProps, {}> {
    render() {
        return (<Button onclick={handleClick()} bsClass="glyphicon glyphicon-new-window"></Button>)
    }
}

Method 2 throws error

ERROR in [at-loader] ./ponents/TypeScriptComponent.tsx:43:70 TS2339: Property '_ proto _' does not exist on type '() => any'.

ERROR in [at-loader] ./ponents/TypeScriptComponent.tsx:46:5 TS2346: Supplied parameters do not match any signature of call target.

I am not able to figure out what is the difference between the two methods? Why those errors??

• javascript
• reactjs
• typescript
• webpack

Share Improve this question Follow asked Apr 4, 2017 at 9:03 iamsakshamiamsaksham 2,94944 gold badges3030 silver badges5252 bronze badges 2

• Can you tell use which lines are 43 and 46 please. This would help to identify your problem. – Sebastian Sebald Commented Apr 4, 2017 at 9:18
• Thats an issue as well @SebastianSebald , I'm using Typescript with webpack, so it messes with line numbers. My file TypeScriptComponent.tsx looks exactly same as I posted. There are no 43/46 lines – iamsaksham Commented Apr 4, 2017 at 9:22

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

Your code has multiple issues.

1. Because TypeScript adheres the ESModule specification you have to import React with * as React from 'react'. Same for ReactDOM.
2. If I am using your input path for the Button TypeScript can not find anything there.
3. If I am using the correct path, TypeScript will tell you that there is no onclick prop on Button. Only an onClick.
4. The way you're passing the click handler to onClick doesn't make any sense. You have to pass the function not the return value of the function.

Here is what works for me:

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Button } from 'react-bootstrap';

interface TypeScriptComponentProps {

}

function handleClick() {
  console.log('Hello World');
}

class App extends React.Component<TypeScriptComponentProps, {}> {
    render() {
        return (<Button onClick={handleClick} bsClass="glyphicon glyphicon-new-window">Click Me!</Button>)
    }
}


ReactDOM.render(
  <App />,
  document.getElementById('root') as HTMLElement
);

My config is using ts-loader not at-loader. Did you add the CheckPlugin to your webpack config? Otherwhise you will not get any type errors.

If you're new or unfamiliar with Webpack/TypeScript/React-bo, I would suggest checking out this fork of create-react-app: https://github./wmonk/create-react-app-typescript :)