Can't compile the quickstart on typescript

Description I’m following the quickstart guide with typescript and it will not compile.

Here’s my code, as per the quickstart:

import React, { useEffect, useMemo, useState} from 'react';
import { render } from 'react-dom';
import { BaseEditor, createEditor } from 'slate';
import { Slate, ReactEditor, Editable, withReact } from 'slate-react';

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

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

const App = () => {
  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>
  )
}

render(<App />, document.getElementById('root'));

Here are the errors I get:

TS2322: Type '{ type: string; children: { text: string; }[]; }[]' is not assignable to type 'Descendant[]'.
  Type '{ type: string; children: { text: string; }[]; }' is not assignable to type 'Descendant'.
    Type '{ type: string; children: { text: string; }[]; }' is not assignable to type 'CustomElement'.
      Types of property 'type' are incompatible.
        Type 'string' is not assignable to type '"paragraph"'.

TS2345: Argument of type 'Descendant[]' is not assignable to parameter of type 'SetStateAction<{ type: string; children: { text: string; }[]; }[]>'.
  Type 'Descendant[]' is not assignable to type '{ type: string; children: { text: string; }[]; }[]'.
    Type 'Descendant' is not assignable to type '{ type: string; children: { text: string; }[]; }'.
      Type 'CustomText' is missing the following properties from type '{ type: string; children: { text: string; }[]; }': type, children

Here is my tsconfig:

{
  "compilerOptions": {
	"module": "commonjs",
	"noImplicitAny": true,
	"removeComments": true,
	"preserveConstEnums": true,
	"sourceMap": true,
	"esModuleInterop": true,
	"jsx": "react"
  },
  "include": ["src/ts/*"],
}

Environment

• Slate Version: 0.63.0
• Operating System: macOS
• TypeScript Version: 4.2.4

[raitucarp]

@cmditch still complains about BaseEditor,

I am getting that same error (without using History). Did you manage to solve it?

solved with dirty trick: type casting, createEditor() as ReactEditor

[EKOLX]

What to do with this line? const editor = useMemo(() => withHistory(withReact(createEditor())), []); it complains: Argument of type 'BaseEditor' is not assignable to parameter of type 'ReactEditor'. Type 'BaseEditor' is missing the following properties from type 'ReactEditor': insertData, setFragmentData, hasRange