typescript - El tipo de elemento JSX 'XXX' no tiene ninguna firma de construcción o llamada

Quiero usar material-ui en TypeScript.

/// <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;
}

Error:(15, 14) TS2604: El tipo de elemento JSX 'FlatButton' no tiene ninguna firma de construcción o llamada.

Respuesta #1

Necesitas reemplazar interface FlatButton con class FlatButton. La definición del módulo que has exportado no tiene ningún valor asociado con ella.

Respuesta #2

Primero: por favor intenta esto.

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

Segundo: ¿por qué esto?

Es exportaciones por defecto.

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

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

si material-ui/lib/flat-button es 'exportaciones por defecto', deberíamos usar una forma de importación diferente.

Tercero: qué pasa cuando import * as FlatButton from "XXX"

importar * como FlatButton desde "XXX" significa importar todo el módulo en una sola variable.

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

más en módulos: exportaciones por defecto.