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

Posted 2023-03-22

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

【英文标题】：How to use a JS library in Typescript without a Definition file (React-Summernote)

【发布时间】：2017-06-24 07:52:53

【问题描述】：

我想使用 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. 

【参考方案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

【讨论】：

***.com/questions/42547859/…

【参考方案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 将是一个伟大的举措......

【讨论】：

尝试使用反应组件得到相同的错误“元素类型无效：预期字符串（用于内置组件）或类/函数（用于复合组件）但得到：对象。”跨度>

之前从 "xyz" 导入 somthing 解决了同样的问题，但这需要类型定义

【参考方案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');

【讨论】：

const ReactSummernote = require ('./../folder/file-name');这会给出错误“JSX 元素类型 'ReactSummernote' 没有任何构造或调用签名

如果你想使用它，那么你需要在你的电脑上将folder/file-name 更改为react-summernote 的真实路径

只有 const ReactSummernote = require('../../../node_modules/react-summernote/dist/react-summernote')