Typescript自定义类型声明出错

Question

I have the following type-declaration written for r-dom :

/// <reference types="react" />

declare module 'r-dom' {

    interface IRDOMFacade extends React.ReactDOM {
        (component: React.Component<any, any>, properties?: Object, children?: React.ReactElement<any>|Array<React.ReactElement<any>>): React.ReactElement<any>
    }

    var r: IRDOMFacade

    export = r
}

A sample component:

import * as React from 'react'
import * as r from 'r-dom'

export default class Application extends React.Component<{},{}> {

  render() {
      return r.h1('Hello World')
  }

}

The above component has no type errors. But when I try to use r as a function I get type error:

r(Application)

error TS2345: Argument of type 'typeof Application' is not assignable to parameter of type 'Component'. Property 'setState' is missing in type 'typeof Application'.

I am curious what is wrong here.

Answer 1

This was happening because first argument of r was a class/constructor having signature React.Component<any, any> rather than an instance of React.Component<any, any> .

So switching to the following fixes the error:

interface IRDOMFacade extends React.ReactDOM {
    (
        component: new (...args: any[]) => React.Component<any, any>, 
        properties?: Object, 
        children?: React.ReactElement<any>|Array<React.ReactElement<any>>
    ): React.ReactElement<any>
}

I will keep this open for few days in case someone has a more idiomatic solution.