使用 TypeScript

Editor

整个 Tiptap 代码库都是用 TypeScript 编写的。如果你以前没有听说过它或从未使用过，也没关系。你不必使用它。

TypeScript 通过添加类型（因此得名）扩展了 JavaScript。它添加了 Vanilla JavaScript 中不存在的新语法。实际上，这些语法在浏览器运行之前会被移除，但这个步骤——编译——对于早期查找错误非常重要。它会检查你是否将正确类型的数据传递给函数。对于一个大型且复杂的项目而言，这非常有价值。这意味着在将代码交付给你之前，我们会收到很多错误通知。

无论如何，如果你在项目中不使用 TypeScript，这也没关系。 你仍然可以使用 Tiptap，并且仍然可以获得 Tiptap API 的良好自动完成（如果你的编辑器支持它，大多数编辑器都是支持的）。

如果你在项目中使用 TypeScript 并希望扩展 Tiptap，有两种类型是值得了解的。

类型

选项类型

要扩展或创建扩展的默认选项，你需要定义一个自定义类型，以下是一个示例：

import { Extension } from '@tiptap/core'

export interface CustomExtensionOptions {
  awesomeness: number
}

const CustomExtension = Extension.create<CustomExtensionOptions>({
  addOptions() {
    return {
      awesomeness: 100,
    }
  },
})

存储类型

要为你的扩展存储添加类型，你需要将其作为第二个类型参数传递并定义存储类型，以下是一个示例：

import { Extension } from '@tiptap/core'

export interface CustomExtensionStorage {
  awesomeness: number
}

// 这扩展了 Storage 接口，使得 `editor.storage.customExtension` 的类型为 `CustomExtensionStorage`
declare module '@tiptap/core' {
  interface Storage {
    customExtension: CustomExtensionStorage
  }
}

// 这创建了扩展，存储类型作为第二个类型参数传递
// 使得 `this.storage` 的类型为 `CustomExtensionStorage`
const CustomExtension = Extension.create<{}, CustomExtensionStorage>({
  name: 'customExtension',

  addStorage() {
    return {
      awesomeness: 100,
    }
  },
})

现在，在扩展外部使用存储将是类型安全的：

const customStorage = editor.storage.customExtension
customStorage.awesomeness = 200 // ✅

命令类型

核心包还导出了一个 Command 类型，需要添加到你在代码中指定的所有命令中。以下是一个示例：

import { Extension } from '@tiptap/core'

declare module '@tiptap/core' {
  interface Commands<ReturnType> {
    customExtension: {
      /**
       * 注释将被添加到自动完成中。
       */
      yourCommand: (someProp: any) => ReturnType
    }
  }
}

const CustomExtension = Extension.create({
  addCommands() {
    return {
      yourCommand:
        (someProp) =>
        ({ commands }) => {
          // …
        },
    }
  },
})

基本上就是这些。其余的工作我们会自动完成。