Question

我想在打字稿中使用material-ui。

/// <reference path="../../../typings/react/react.d.ts"/>
import React = __React;
import * as FlatButton from "material-ui/lib/flat-button";

interface ATCProps{
    clickHandler:__React.MouseEventHandler;
}

export default class AddToCartBtn extends React.Component<ATCProps,any>{
    render(){
        return (
            <FlatButton></FlatButton>  // -> error
        )
    }
}

flat-button.d.ts

declare module "material-ui/lib/flat-button" {
    import ReactElement = __React.ReactElement;
    import Component = __React.Component;
    interface FlatButton extends __React.Component<any,any>{
    }
    export default FlatButton;
}

错误：（15,14）TS2604：JSX元素类型'FlatButton'没有任何构造或调用签名。

Answer 1

您需要将interface FlatButton替换为class FlatButton。您导出的模块定义没有任何与之关联的值。

Answer 2

首先：请尝试一下。

import FlatButton from "material-ui/lib/flat-button";

第二：为什么这么做？

这是默认导出。

// fileA: export default module
declare let $: JQuery;
export default $;

// fileB: import module from default module
import $ from "jquery";

如果material-ui/lib/flat-button是“默认导出”，我们应该使用其他导入形式。

第三：import * as FlatButton from "XXX"

发生了什么

import * as FlatButton from "XXX" 意味着将整个模块导入单个变量。

// the outcome is an object with a default property
{
  default: FlatButton(props)
}

更多modules: default exports.

JSX元素类型“XXX”没有任何构造或调用签名

2 个答案: