types error in 0.58.3 when i use typescript

Do you want to request a feature or report a bug?

bug

What’s the current behavior?

i got error:

Argument of type 'Node[]' is not assignable to parameter of type 'SetStateAction<{ type: string; children: { text: string; }[]; }[]>'.
  Type 'Node[]' is not assignable to type '{ type: string; children: { text: string; }[]; }[]'.
    Type 'Node' is not assignable to type '{ type: string; children: { text: string; }[]; }'.
      Property 'type' is missing in type 'Editor' but required in type '{ type: string; children: { text: string; }[]; }'.  TS2345

Slate: 0.58.3 Browser: Chrome
OS: Mac

What’s the expected behavior?

no error

this is my code:

// code from https://docs.slatejs.org/walkthroughs/01-installing-slate
// Import React dependencies.
import React, { useEffect, useMemo, useState } from "react";
// Import the Slate editor factory.
import { createEditor } from 'slate'

// Import the Slate components and React plugin.
import { Slate, Editable, withReact } from 'slate-react'


export const Editor = () => {
    const editor = useMemo(() => withReact(createEditor()), [])
    // Add the initial value when setting up our state.
    const [value, setValue] = useState([
      {
        type: 'paragraph',
        children: [{ text: 'A line of text in a paragraph.' }],
      },
    ])
  
    return (
      <Slate editor={editor} value={value} onChange={newValue => setValue(newValue)}>
        <Editable />
      </Slate>
    )
  }

this is my way , can fix the error:

change the code: 1.add import { Node } from 'slate'; 2. change

const [value, setValue] = useState([
      {
        type: 'paragraph',
        children: [{ text: 'A line of text in a paragraph.' }],
      },
    ])

to

const [value, setValue] = useState<Node[]>([
      {
        type: 'paragraph',
        children: [{ text: 'A line of text in a paragraph.' }],
      },
    ])

its work!!!

the point is useState<Node[]>

[codercodingthecode]

This is how I solved it.

 import { Descendant } from 'slate'
 const [value, setValue] = useState<Descendant[]>([{ type: 'paragraph', children: [{ text: '' }] }])

The documentation doesn’t show this part, but you also have to add slate history and empty children. Basically, the whole sample app looks like this:

import React, { useMemo, useState } from 'react'
import { createEditor, BaseEditor, Descendant } from 'slate'
import { Slate, Editable, withReact, ReactEditor } from 'slate-react'
import { HistoryEditor } from 'slate-history'

type CustomText = { text: string }
type CustomElement = { type: 'paragraph'; children: CustomText[] }

declare module 'slate' {
    interface CustomTypes {
        Editor: BaseEditor & ReactEditor & HistoryEditor
        Element: CustomElement
        Text: CustomText
    }
}

export const Note = () => {
    const editor = useMemo(() => withReact(createEditor()), [])
    const [value, setValue] = useState<Descendant[]>([{ type: 'paragraph', children: [{ text: '' }] }])
    return (
        <Slate
            editor={editor}
            value={value}
            onChange={(newValue) => setValue(newValue)}
        >
            <Editable />
        </Slate>
    )
}

[codercodingthecode]

@jsoneaday and @connorjacobsen or anyone else. If you guys can share a sandbox I can take a look at it.