First, let to see what means "and" and "or" of type.
interface aa {
name: string;
width: number;
};
interface bb {
name: string;
height: number;
};
let cc: aa | bb = {
name: 'jiang',
width: 20,
}
Here interfaces aa and bb are used as type, and cc run smoothly. Now how about cc used as aa & bb. No, there is error. For aa & bb, it must be the following
let dd: aa & bb = {
name: 'jiang',
width: 20,
height: 80,
}
Now the following type is clear.
1 declare type ExtendableTypes = 'Editor' | 'Element' | 'Text' | 'Selection' | 'Range' | 'Point' | 'InsertNodeOperation' | 'InsertTextOperation' | 'MergeNodeOperation' | 'MoveNodeOperation' | 'RemoveNodeOperation' | 'RemoveTextOperation' | 'SetNodeOperation' | 'SetSelectionOperation' | 'SplitNodeOperation';
The meaning of Editor Element and Text will be discussed in other article.
2 type ExtendedType<K extends ExtendableTypes, B> = unknown extends CustomTypes[K] ? B : CustomTypes[K];
This type means an unknown type which has the property that, first, to judge whether B is exists, and then, if B exists, it is equal to B. For example, the following express can work. let aa: ExtendedType<K extends ExtendableTypes, number> = 10, and const bb: ExtendedType<K extends ExtendableTypes, string> = 'jiang'.
But if B does not exist, this type will be CustomTypes[K], and what is the code of CustomTypes[K].
3 interface CustomTypes {
[key: string]: unknown;
}
It means a type of a object of many key-value but the key must be string and the value is unknown. For example
ee: CustomTypes = {name: 'jiang', age: 20, sex: 'boy'}.
What is meaning of CustomTypes[K]? At first, keyof and T[K] must be understood. Take example of interface aa
interface aa {name: string; width: number}. keyof aa is equal to 'name' or 'width'. And the following expression is right, type ee = keyof aa and let ff: ee = 'name' or let ff: ee = 'width'.
For expression T[K], K must be keyof T. The following expression is right, let gg: aa['name'] = 'jiang' or let gg: aa['width'] = 10.
Now let focus on CustomTypes[K], and K is extension of ExtendableTypes, so CustomTypes[K] will be one or more of 'Editor', 'Element', 'Text' and so on, ant that depends on what is K. Here is the most important example of slate
4 export interface BaseEditor {
children: Descendant[];
...
}
export declare type Editor = ExtendedType<'Editor', BaseEditor>;
Now, when editor.someproperty is used, the property of Editor instance firstly depends the property of BaseEditor, if BaseEditor does not has the property, it depends that of 'Editor' the custom defined. For example,
type CustomElement = { type: 'paragraph'; children: CustomText[] }
type CustomText = { text: string }
declare module 'slate' {
interface CustomTypes {
Editor: BaseEditor & ReactEditor & HistoryEditor
Element: CustomElement
Text: CustomText
}
}
According to this interface definition, it will also check the properties of ReactEditor and HistoryEditor.
5 There are also other important applications of ExtendedTypes[K].
export interface BaseElement {children: Descendant[];}
export declare type Element = ExtendedType<'Element', BaseElement>;
export interface BaseText {text: string;}
export declare type Text = ExtendedType<'Text', BaseText>;
export declare type BaseSelection = Range | null;
export declare type Selection = ExtendedType<'Selection', BaseSelection>;
export interface BaseRange {anchor: Point; focus: Point;}
export declare type Range = ExtendedType<'Range', BaseRange>;
export interface BasePoint {path: Path; offset: number;}
export declare type Point = ExtendedType<'Point', BasePoint>;