SlateJS Typscript node.children url 和 type 属性不存在

Question

TLDR: Error message for SlateJS serializing to HTML Property 'children' does not exist on type 'Node[]' .

Going off on SlateJS Serializing Docs but in tsx.

import React, { useCallback, useMemo, useState } from "react";
import escapeHtml from 'escape-html';
import { Editor, createEditor, Node, Text } from 'slate';
import { withHistory } from 'slate-history';

const serializeHTML = (node: Node[]) => {
  if (Text.isText(node)) {
    return escapeHtml(node.text)
  };

  const children = node.children.map((n: Node[]) => serializeHTML(n)).join('');

  switch (node.type) {
    case 'link':
      return `<a href="${escapeHtml(node.url)}">${children}</a>`
    case 'list-item':
      return ``
    case 'paragraph':
      return `<p>${children}</p>`
    case 'quote':
      return `<blockquote>${children}</blockquote>`
    default:
      return children
  };
};

I'm getting the following property error for children , type and url .

• Property 'children' does not exist on type 'Node[]'
• Property 'type' does not exist on type 'Node[]'
• Property 'url' does not exist on type 'Node[]'

In my rich editor I have:

const RichTextEditor = (props: RichTextEditorProps) => {
    const editor = useMemo(() => withImages(withHistory(withReact(createEditor()))), []);
  const [value, setValue] = useState<Node[]>(initialValue);
  const html = serializeHTML(value);
      
  return (
    <Slate editor={editor} value={value} onChange={newValue => setValue(newValue)}>
       ...
    </Slate>
  )

I already have the type dependencies.

• "@types/slate-react": "^0.22.9"
• "@types/slate": "^0.47.7",

Answer 1

serializeHTML() method can just take a single Node and have the iterator from where it's called.

Function :

const serializeHTML = (node: Node) => {
  ...

  const children = node.children.map((n: Node) => serializeHTML(n)).join('');
  ...
};

Call :

const RichTextEditor = (props: RichTextEditorProps) => {
    const editor = useMemo(() => withImages(withHistory(withReact(createEditor()))), []);
  const [value, setValue] = useState<Node[]>(initialValue);
  
  const html = value.map(v => serializeHTML(v)).join('');
      
  return (
    <Slate editor={editor} value={value} onChange={newValue => setValue(newValue)}>
       ...
    </Slate>
  )
};

Answer 2

It looks like you are trying to access properties on a Node Array instead of a Node.

A couple of other things worth mentioning:

1. Later versions of Slate (.5x) are written in TypeScript and should not require explicit types installation. Those @types/xxx dependencies you listed are not the right types. They are for .47x.
2. Be sure to import the Node type from Slate ( import { Node } from 'slate' ). There is a globally available Node type that will be used if you don't and it is not the one you want (this doesn't seem to be your issue but worth mentioning for anyone else who runs into similar errors)