扩展从NPM模块导入的React组件（打字稿）

Question

我有一个用打字稿开发的NPM模块。 该模块是一个简单的概念验证反应组件：

import * as React from "react";
import * as ReactDOM from "react-dom";

export class COne extends React.Component<{}, {counter : number}> {
    constructor(props: {}, context: any) {
        super(props, context);
    }

    render() {
        return <h1 ref="h1">Test from comp one</h1>;
    }
}

通过使用tsc和适当的tsconfig.json ，我生成了js文件。

在另一个项目中，我导入了这个npm模块，我可以COne渲染组件COne 。

在第二个项目中，我创建了另一个组件CTwo ，它扩展了COne ：

import * as React from "react";
import { COne }  from "repo1";

export class CTwo extends COne {
    constructor(props: {}, context: any) {
        super(props, context);
    }
}

如果我运行tsc --jsx react src/app.tsx ，其中app.tsx导入并渲染组件CTwo ，一切都很好。 但是，如果我运行tsc --jsx react src/app.tsx typings/index.d.ts ，其中我的tsc --jsx react src/app.tsx typings/index.d.ts文件包含react和react-dom定义（见下文），我收到此错误

src/app.tsx(8,21): error TS2605: JSX element type 'CTwo' is not a constructor function for JSX elements.
  Property 'render' is missing in type 'CTwo'.

我的typings.json文件包含当前的反应定义和react-dom定义（我正在使用当前的typed-react，因为官方版本缺少JSX的类型，并且在使用noImplicitAny编译时遇到问题）：

{
  "name": "repo2",
  "dependencies": {
    "react": "github:cantide5ga/typed-react",
    "react-dom": "registry:npm/react-dom#15.0.1+20160826174104"
  }
}

我还安装了ts-node并在REPL中，我COne from "repo1"和CTwo导入了CTwo 。 我看到CTwo在原型上没有render方法（它没有__proto__属性）。

即使我收到错误，它也可以在浏览器中使用webpack处理。 请注意，即使我添加了一个render方法，我也会收到另一个错误，即Property 'setState' is missing in type 'CTwo'. 。

这是ts-node的输出：

$ ts-node
> import { CTwo } from "./src/CTwo";
'use strict'
> import { COne } from "repo1";
undefined
> let x = new CTwo({}, {});
undefined
> let y = new COne({}, {});
undefined
> x.__proto__
⨯ Unable to compile TypeScript
[eval].ts (1,3): Property '__proto__' does not exist on type 'CTwo'. (2339)
> y.__proto__
COne { constructor: [Function: COne], render: [Function] }

所以似乎CTwo对象没有正确扩展。 我应该使用不同的语法来扩展反应组件吗？

我正在使用打字稿2.1.4。 尽管发出错误，生成的CTwo.js “看起来正确”：

"use strict";
var __extends = (this && this.__extends) || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var repo1_1 = require("repo1");
var CTwo = (function (_super) {
    __extends(CTwo, _super);
    function CTwo(props, context) {
        return _super.call(this, props, context) || this;
    }
    return CTwo;
}(repo1_1.COne));
exports.CTwo = CTwo;

Answer 1

在挖掘了一些之后，我发现打字稿找不到repo1定义，尽管它们最初没有被报道。 问题出在repo1的package.json文件中，我从这里得到一个提示： 找不到模块'module-name'的声明文件。 '/path/to/module-name.js'隐式具有'any'类型

关键是， main: js/index.js必须更改为main: js/index （不带后缀），然后repo2可以正确解析repo1并且不存在任何问题。

正如@ Radio-提到的那样，一旦TS能够掌握相关的延期，这样的扩展就可以毫无问题地工作。