diff --git a/docs/walkthroughs/01-installing-slate.md b/docs/walkthroughs/01-installing-slate.md index 3471fe895..d29e7f798 100644 --- a/docs/walkthroughs/01-installing-slate.md +++ b/docs/walkthroughs/01-installing-slate.md @@ -47,6 +47,25 @@ const App = () => { Of course we haven't rendered anything, so you won't see any changes. +> If you are using TypeScript, you will also need to extend the `Editor` with `ReactEditor` as per the documentation on [TypeScript](/concepts/11-typescript). The example below also includes the custom types required for the rest of this example. + +```ts +// TypeScript Users only add this code +import { BaseEditor } from 'slate' +import { ReactEditor } from 'slate-react' + +type CustomElement = { type: 'paragraph'; children: CustomText[] } +type CustomText = { text: string } + +declare module 'slate' { + interface CustomTypes { + Editor: BaseEditor & ReactEditor & HistoryEditor + Element: CustomElement + Text: CustomText + } +} +``` + Next we want to create state for `value`: ```jsx