如何找到我的打字稿/反应模块的声明？

Question

我对前端技术非常（非常）新，特别是 react 和 typescript。

我的问题是在尝试做一个简单的事情时出现，即使用 React 组件https://github.com/ckeditor/ckeditor5

所以我去看了例子，发现了这个：

https://github.com/ckeditor/ckeditor5-react-example/blob/master/package.json

我正在尝试将ckeditor包含在ClassicEditor模块中

所以我在我的 package.json 添加了这个

"@ckeditor/ckeditor5-editor-classic": "^12.0.0",
"@ckeditor/ckeditor5-essentials": "^11.0.0",
"@ckeditor/ckeditor5-paragraph": "^11.0.0",
"@ckeditor/ckeditor5-react": "^1.1.2",

并在此处检查实现https://github.com/ckeditor/ckeditor5-react-example/blob/master/src/App.js

我需要导入打字稿的模块定义（我猜）

import CKEditor from '@ckeditor/ckeditor5-react';

// NOTE: We use editor from source (not a build)!
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';

所以，这部分有这个奇怪的注释，但发生在我的项目中不起作用（说丢失并且找不到它）

知道我还能做些什么来添加它吗？我尝试删除该/src/classiceditor部分，但仍然丢失。

我做了一个npm install，我可以在那里看到带有 package.json 和更多内容的经典编辑器代码...... /src/ classiceditor 文件夹实际上存在 node_modules/@ckeditor/ckeditor5-editor-classic/src/classiceditor.js

知道我错过了什么吗？

Answer 1

对于那些仍在寻找更好解决方案的人，我从Github找到了这个解决方案。

您需要创建文件./types/ckeditor/index.d.ts并写入

declare module '@ckeditor/ckeditor5-react';
declare module '@ckeditor/ckeditor5-build-classic';

Answer 2

对于其他有同样问题的人，您也可以尝试声明文件类型/@ckeditor/index.d.ts 并添加以下内容

declare module '@ckeditor/*' {
  const classes: any;
  export default classes;
}

接受的答案在处理时对我不起作用 @ckeditor/ckeditor5-build-classic

Answer 3

看来 @ckeditor/ckeditor5-react 没有提供任何类型，并且没有在DefinelyTyped中输入，因此您无法在打字稿中轻松使用它。

如果您想与类型一起使用@ckeditor/ckeditor5-react，则必须自己输入。

示例：

在您的项目中，声明一个文件types/@ckeditor/ckeditor5-react/index.d.ts. 在此文件中添加此（非常不完整）类型：

declare module '@ckeditor/ckeditor5-react' {
    export default class Ckeditor extends React.Component {
        constructor({disabled}: {disabled?: boolean}) // this part needs to be fullfilled with your needs
    }
}

这样你就可以在你的 React 应用程序中使用 CKeditor 了：

export function UseCKE() {
    return <Ckeditor disabled={true}/>;
}