如何在没有定义文件的情况下在 Typescript 中使用 JS 库（React-Summernote）

Question

我想使用 React-Summernote 但它的类型不可用 我尝试执行以下操作

let ReactSummernote1: any = require('react-summernote');
let ReactSummernote = ReactSummernote1.ReactSummernote;

..

 <ReactSummernote
     value={this.props.content}
     options={{
                   dialogsInBody: true,
                   toolbar: [
                      ['style', ['style']],
                      ['font', ['bold', 'italic', 'underline', 'clear']],
                      ['fontname', ['fontname', 'fontsize', 'color']],
                      ['para', ['ul', 'ol', 'paragraph']],
                      ['insert', ['link', 'picture', 'table', 'hr']],
                      ['view', ['codeview']]
                   ]
                 }}
   onChange={!this.props.scheduledSession ? this.props.contentUpdated : function () { } } />

但这会报错

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. 

Answer 1

您可以简单地创建一个自定义类型定义文件 (custom_name.d.ts)

declare module 'react-summernote' {
    var _reactSummernote: any;
    export = _reactSummernote;
}

然后你可以使用标准语法导入模块

import * as ReactSummernote from 'react-summernote';

更多信息： http://definitelytyped.org/guides/best-practices.html

Answer 2

查看source code，库react-summernote 会默认导出ReactSummernote

所以使用node require，你应该可以做到

const ReactSummernote = require('react-summernote');

要在 JSX 中使用它，您可能至少需要将其键入为 ReactComponent：

const ReactSummernote = require('react-summernote') as React.ComponentClass<any>;

提出类型定义并将它们贡献给 DefinitiveTyped 将是一个伟大的举措......

Answer 3

因此，如果您在查找文件路径时遇到问题。您可以更改服务器配置文件。我正在使用 webpack。这是我的 webpack-config.js 的副本。您可以更改不需要的行。

var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  devtool:"eval",
  entry: [
    'webpack-hot-middleware/client?reload=true',
    './src/index.tsx'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ],
  resolve: {
    alias: {
      react: path.resolve('./node_modules/react')
    },
    extensions:[".js", ".ts", ".tsx","", ".webpack.js", ".web.js"],
    fallback: path.join(__dirname, "node_modules")
  },
  resolveLoader: {
    root: path.join(__dirname, "node_modules")
  },
  module: {
    loaders: [
      {
        test: /\.tsx?$/,
        loaders: ['react-hot', 'ts'],
        include: path.join(__dirname, 'src')
      },
      {
        test: /\.(scss|css)$/,
        loaders: ["style-loader", "css-loader", "sass-loader"]
      },
      {
        test: /\.(jpg|png|svg)$/,
        loaders: [
            'file-loader?name=[name].[ext]'
        ]
      }
    ]
  }
};

之后这应该可以工作了。

const ReactSummernote = require('react-summernote');

或者您可以尝试使用./ 导航

注意：确保您重定向到正确的文件夹。

const Name = require ('./../folder/file-name');