如何找到我的 typescript/react 模块的声明？

Question

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

我的问题是在尝试做一件使用反应组件的简单事情时出现的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

我需要为 typescript 导入模块定义（我猜）

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 等的 classiceditor 代码.../src/classiceditor文件夹实际存在 node_modules /@ckeditor/ckeditor5-editor-classic/src/classiceditor.js

知道我错过了什么吗？

Answer 1

@ckeditor/ckeditor5-react似乎没有提供任何类型，也没有在DefinitelyTyped中输入，所以你不能那么容易地在打字稿中使用它。

如果您想使用 @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}/>;
}

Answer 2

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

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

接受的答案在处理 @ckeditor/ckeditor5-build-classic

时对我不起作用

Answer 3

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

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

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

Answer 4

对我来说，可行的解决方案是

将以下行添加到 tsconfig.json

"compilerOptions": {
    "allowJs": true,
    "target": "es2015"
    // other options
}

正在应用程序文件夹中的 typings 文件夹中创建 typings.d.ts

declare module '@ckeditor/ckeditor5-build-classic' {
    const ClassicEditorBuild: any;

    export = ClassicEditorBuild;
}

Answer 5

截至 2022 年有（non-official，第三方）CKEditor types in DefinitelyTyped：

npm i --save-dev @types/ckeditor__ckeditor5-core

在 CKEditor 5 GitHub 存储库中，还有 ongoing discussion about support for TypeScript。

如何找到我的 typescript/react 模块的声明？

How to find declaration for my typescript/react module?

javascript

ckeditor

typescript

reactjs