我如何为现有组件定义打字稿@type答案

【问题标题】：how I can define typescript @type for exist component我如何为现有组件定义打字稿@type
【发布时间】：2018-10-03 09:09:21
【问题描述】：

我通过 npm 获得了 jqwidgets-framework：

npm install jqwidgets-framework -D

这个框架已经通过javascript实现了很多react组件。例如：

... 
export default class JqxCheckBox extends React.Component {
        componentDidMount() {
            let options = this.manageAttributes();
            this.createComponent(options);
        }; 
...

但是我的项目是通过 typescript 编写的 react，所以我无法将此框架集成到我的项目中。

我正在尝试添加新文件jqw.d.ts：

/// <reference path="../../node_modules/jqwidgets-framework/jqwidgets-ts/jqwidgets.d.ts" />

import * as React from "react";
import * as CSS from 'csstype';

interface IJqxCheckBoxProps extends jqwidgets.CheckBoxOptions {
    style?: CSS.Properties<string | number>;
    value: string;
    //on?: (name?: string, callback?: Function ) => void;
    // render?: ()=>void;
}
declare class JqxCheckBox extends React.Component<IJqxCheckBoxProps, any> { }

export default JqxCheckBox;

并在反应中使用这个组件：

/// <reference path="jqw.d.ts"/>

import '../css/site.css';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
//import 'jqwidgets-framework/jqwidgets-react/react_jqxdatatable';
import 'jqwidgets-framework/jqwidgets-react/react_jqxcheckbox';
import * as CSS from 'csstype';
.......
render() {
  let chexboxCSS: CSS.Properties<string | number> = { marginLeft: 10, float: 'left' };
  let checkboxParentCSS: CSS.Properties<string | number> = { float: 'left', width: 400, marginTop: 10 };
  return (
      <div style={{ fontFamily: 'Verdana Arial', fontSize: 12, width: 400 }}>
          <div style={{ float: 'left', width: 400 }}>
              <h3 style={{ marginLeft: 15 }}>Categories</h3>
              <JqxCheckBox style={chexboxCSS} value='Entertainment'
                  width={120} height={25}
              />
              <JqxCheckBox style={chexboxCSS} value='Computers'
                  width={120} height={25} checked={true}
              />
              <JqxCheckBox style={chexboxCSS} value='Sports'
                  width={120} height={25}
              />
.......

但它不起作用。

如何定义现有组件的类型？

【问题讨论】：

标签： reactjs typescript

【解决方案1】：

使用module declaration 将您的类型声明与原始jqwidgets-framework/jqwidgets-react/react_jqxcheckbox 模块相关联：

/// <reference path="node_modules/jqwidgets-framework/jqwidgets-ts/jqwidgets.d.ts" />

declare module "jqwidgets-framework/jqwidgets-react/react_jqxcheckbox" {
    import * as React from "react";
    import * as CSS from 'csstype';

    interface IJqxCheckBoxProps extends jqwidgets.CheckBoxOptions {
        style?: CSS.Properties<string | number>;
        value: string;
        //on?: (name?: string, callback?: Function ) => void;
        // render?: ()=>void;
    }
    class JqxCheckBox extends React.Component<IJqxCheckBoxProps, any> { }

    export default JqxCheckBox;
}

【讨论】：

感谢您的帮助，在我将导入语句更改为：import JqxCheckBox from 'jqwidgets-framework/jqwidgets-react/react_jqxcheckbox';