typescript - 使用 typescript 时如何添加自定义扩展

Question

我正在尝试向 scrumpy/tiptap 添加自定义扩展，但我的项目使用的是 typescript，我认为这会给我带来一些问题。

我从 this issue 得到代码，并尝试像这样导入和使用它:

import HighlightMark from '../ts/tiptap-extensions/HighlightMark';

...

this.editor = new Editor({
  content: '<p>This is just a boring paragraph.</p>',
  extensions: [new HighlightMark()]
})

但是我遇到了这个错误

Type 'HighlightMark' is not assignable to type 'ExtensionOption'. Type 'HighlightMark' is not assignable to type 'Mark'. The types returned by 'schema.toDOM(...)' are incompatible between these types. Type '(string | number | { style: string; })[]' is not assignable to type 'DOMOutputSpec'. Property '0' is missing in type '(string | number | { style: string; })[]' but required in type 'DOMOutputSpecArray'.

---

我尝试在 .d.ts 中导入它(因为我必须处理所有内置的 tiptap 扩展)，但我收到一条错误消息，告诉我无法从此处的相对路径导入文件:

Import or export declaration in an ambient module declaration cannot reference module through relative module name.ts(2439)

---

我也尝试过将文件更改为 typescript (HighlightMark.ts)，但它会给我几个错误:

Property 'commands' in type 'HighlightMark' is not assignable to the same property in base type 'Mark'. Type '({ type }: { type: any; }) => (attrs: any) => Command' is not assignable to type '({ type, schema, attrs }: { type: MarkType; schema: MarkSpec; attrs: { [key: string]: string; }; }) => CommandGetter'. Type '(attrs: any) => Command' is not assignable to type 'CommandGetter'.

和

'mark' is declared but its value is never read.ts(6133) Parameter 'mark' implicitly has an 'any' type.ts(7006)

和

Parameter 'attrs' implicitly has an 'any' type.ts(7006)

以前有人做过吗？这真的可能吗？

这是来自 HighlightMark.js 的代码:

   import { Mark } from 'tiptap';
   import { toggleMark } from 'tiptap-commands'

  export default class HighlightMark extends Mark {
  get name() {
    return "mark";
  }

  get schema() {
    return {
      attrs: {
        color: {
          default: "rgba(240,87,100,0.7)"
        }
      },
      parseDOM: [
        {
          tag: "mark"
        }
      ],
      toDOM: mark => [
        "mark",
        {
          style: `background: red` // ${mark.attrs.color}
        },
        0
      ]
    };
  }

  commands({ type }) {
    return attrs => toggleMark(type, attrs);
  }
}

Answer 1

看来我可以通过像这样初始化 tiptap 来解决这个问题

this.editor = new Editor({
  content: '<p>This is just a boring paragraph.</p>',
  extensions: [new HighlightMark() as any]

这并不理想，但目前看来可行。

如果有人可以发布真正的解决方案，我会将其标记为答案