React-Typescript 你好世界

Question

我正在尝试使用 Typescript 来响应 Hello World。我写了下面的代码。这段代码在我使用方法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>)
    }
}

方法2抛出错误

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

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

我无法弄清楚这两种方法有什么区别？为什么会出现这些错误？

Answer 1

您的代码有多个问题。

1. 由于 TypeScript 遵循 ESModule 规范，因此您必须使用* as React from 'react'. ReactDOM 也是如此。
2. 如果我使用你的ButtonTypeScript 输入路径，则无法在那里找到任何内容。
3. 如果我使用正确的路径，TypeScript 会告诉onclick你Button. 只有一个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-loadernot at-loader。您是否将其添加CheckPlugin到您的 webpack 配置中？否则你不会得到任何类型错误。

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