React-Typescript Hello World

Question

我正在尝试使用 Typescript 进行 Hello World React。我写了下面的代码。此代码在我使用方法 1 时有效，但在方法 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>;

此代码有效（handleClick 函数出现了一些意外行为，我可以稍后解决。）

但是这个方法行不通

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>)
    }
}

方法二报错

[at-loader] ./components/TypeScriptComponent.tsx:43:70 中的错误 TS2339：属性 '_ proto _' 在类型 '() => any' 上不存在。

[at-loader] ./components/TypeScriptComponent.tsx:46:5 中的错误 TS2346：提供的参数与调用目标的任何签名都不匹配。

我不知道这两种方法有什么区别？为什么会出现这些错误？？

Answer 1

您的代码有多个问题。

1. 因为 TypeScript 遵循 ESModule 规范，所以您必须使用 * as React from 'react' 导入 React。 ReactDOM 也一样。
2. 如果我使用你的输入路径为Button，TypeScript 在那里找不到任何东西。
3. 如果我使用了正确的路径，TypeScript 会告诉你 Button 上没有 onclick 属性。只有onClick。
4. 将点击处理程序传递给onClick 的方式没有任何意义。您必须传递函数而不是函数的返回值。

这对我有用：

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
);

我的配置使用ts-loader 而不是at-loader。您是否将 CheckPlugin 添加到您的 webpack 配置中？否则不会出现任何类型错误。

如果您是新手或不熟悉 Webpack/TypeScript/React-combo，我建议您查看 create-react-app 的这个分支：https://github.com/wmonk/create-react-app-typescript :)