Utilisation de TypeScript

slate prend en charge la saisie d’un seul modèle de document slate (c’est à dire un seul ensemble de types personnalisés éditeur , élément et texte ) si vous devez prendre en charge plus d’un modèle de document, veuillez consulter la section multiple document models avertissement vous devez définir types personnalisés , annoter usestate , et annoter l’état initial de l’éditeur lorsque vous utilisez typescript, sinon slate affichera des erreurs de typage migration depuis 0 47 x lorsque vous migrez depuis 0 47 x, lisez d’abord le guide ci dessous gardez également à l’esprit ces problèmes de migration courants lorsque vous faites référence à node type , vous pouvez voir l’erreur la propriété 'type' n'existe pas sur le type 'node' pour corriger cela, vous devez ajouter du code comme element iselement(node) && node type === 'paragraph' ceci est nécessaire parce qu’un nœud peut être un élément ou un texte et texte n’a pas de propriété type soyez prudent lorsque vous définissez le customtype pour éditeur assurez vous de définir le customtype pour éditeur comme baseeditor & il ne doit pas être éditeur et définition des types éditeur , élément et texte types pour définir un type personnalisé élément ou texte , étendez l’interface types personnalisés dans le module ardoise comme ceci // this example is for an editor with `reacteditor` and `historyeditor` import { baseeditor } from 'slate' import { reacteditor } from 'slate react' import { historyeditor } from 'slate history' type customelement = { type 'paragraph'; children customtext\[] } type customtext = { text string; bold? true } declare module 'slate' { interface customtypes { editor baseeditor & reacteditor & historyeditor element customelement text customtext } } annotations dans l’éditeur annotez la valeur initiale de l’éditeur avec descendant\[] import react, { usememo, usestate } from 'react' import { createeditor, descendant } from 'slate' import { slate, editable, withreact } from 'slate react' const initialvalue descendant\[] = \[ { type 'paragraph', children \[{ text 'a line of text in a paragraph ' }], }, ] const app = () => { const editor = usememo(() => withreact(createeditor()), \[]) return ( \<slate editor={editor} value={initialvalue}> \<editable /> \</slate> ) } bonnes pratiques pour les types élément et texte types bien que vous puissiez définir des types directement dans l’interface types personnalisés , la meilleure pratique consiste à définir et exporter chaque type séparément afin que vous puissiez référencer des types individuels comme un élément de paragraphe en utilisant les bonnes pratiques, les types personnalisés pourraient ressembler à ceci // this example is for an editor with `reacteditor` and `historyeditor` import { baseeditor } from 'slate' import { reacteditor } from 'slate react' import { historyeditor } from 'slate history' export type customeditor = baseeditor & reacteditor & historyeditor export type paragraphelement = { type 'paragraph' children customtext\[] } export type headingelement = { type 'heading' level number children customtext\[] } export type customelement = paragraphelement | headingelement export type formattedtext = { text string; bold? true } export type customtext = formattedtext declare module 'slate' { interface customtypes { editor customeditor element customelement text customtext } } dans cet exemple, customtext est équivalent à texte formaté mais dans un éditeur réel, il peut y avoir davantage de types de texte, comme du texte dans un bloc de code qui peut ne pas autoriser le formatage par exemple pourquoi la définition du type est elle inhabituelle parce que la question revient souvent, cette section explique pourquoi la définition de type de slate est atypique slate doit prendre en charge une fonctionnalité appelée discrimination de type, qui est disponible lors de l’utilisation de types union (par exemple élémentparagraphe | élémenttitre ) cela permet à un utilisateur de restreindre un type si l’on considère du code comme if (node type === 'paragraph') { } l’intérieur du bloc restreindra le type de node à élément de paragraphe slate a également besoin d’un moyen permettant aux développeurs d’ajouter leurs types personnalisés dans slate cela se fait par fusion de déclarations, une fonctionnalité d’une interface slate combine un type union et une interface afin d’utiliser les deux fonctionnalités pour plus d’informations, voir proposition ajouter des types typescript personnalisés à slate https //github com/ianstormtaylor/slate/issues/3725 modèles de document multiples pour le moment, slate prend en charge les types pour un seul modèle de document à la fois par exemple, il ne peut pas prendre en charge deux éditeurs rich text différents avec des schémas de document distincts la prise en charge typescript de slate a été conçue de cette manière, car la gestion typée d’un seul schéma de document était préférable à l’absence totale de typage l’objectif est de prendre en charge plusieurs définitions d’éditeur et une pull request est actuellement en cours, créée par l’auteur de slate une solution de contournement pour prendre en charge plusieurs modèles de document consiste à créer chaque éditeur dans un package séparé, puis à les importer cela n’a pas été testé, mais devrait fonctionner extension d’autres types il existe également une prise en charge de l’extension d’autres types, mais ceux ci n’ont pas été testés aussi minutieusement que ceux documentés ci dessus sélection plage point vous pouvez librement étendre ces types, mais l’extension de ces types doit être considérée comme expérimentale veuillez signaler les bugs sur github issues exemples typescript pour quelques exemples d’utilisation des types, voir packages/slate react/src/custom types ts dans le dépôt slate