TypeScript 2.1: use keyof

wstaelens commented 7 years ago

See:

change the options to the new keyof. snippet from stackoverflow post: http://stackoverflow.com/a/40843364/187650

type toolbarOptionsMap = {
    'style': 'bold' | 'italic' | 'underline',
    'font': 'strikethrough' | 'superscript' | 'subscript'
    ...
}

type toolbarOption<T extends keyof toolbarOptionsMap> = [T, toolbarOptionsMap[T][]];
// keyof toolbarOptionsMap = 'style' | 'font'
// T extends keyof toolbarOptionsMap, so is one of those strings.
// toolbarOptionsMap[T] is the type of the corresponding value for T

// Then we just make a list of these
type toolbar = toolbarOption<any>[];

wstaelens commented 7 years ago

https://blogs.msdn.microsoft.com/typescript/2016/12/07/announcing-typescript-2-1/

pimterry commented 7 years ago

You mentioned on your SO question that you've attempted to apply this to your existing code, and it's not working. So that I can help, can you show me some code that's using keyof as above, but which doesn't compile?

wstaelens commented 7 years ago

Currently, Out of office but will try to give more details soon. Basically i've commented out this code below and the toolbar option and added the code from SO.

type toolbarStyleGroupOptions = 'style' | 'bold' | 'italic' | 'underline' | 'clear';
type toolbarFontGroupOptions = 'strikethrough' | 'superscript' | 'subscript';
type toolbarFontsizeGroupOptions = 'fontsize';
type toolbarColorGroupOptions = 'color';
type toolbarParaGroupOptions = 'ul' | 'ol' | 'paragraph';
type toolbarHeightGroupOptions = 'height';
type toolbarTableGroupOptions = 'table';
type toolbarInsertGroupOptions = 'link' | 'picture' | 'hr';
type toolbarViewGroupOptions = 'fullscreen' | 'codeview';
type toolbarHelpGroupOptions = 'help';
//type toolbarDef = [string, string[]][];
type toolbarDef = [
    ['style', toolbarStyleGroupOptions[]]
    | ['font', toolbarFontGroupOptions[]]
    | ['fontsize', toolbarFontsizeGroupOptions[]]
    | ['color', toolbarColorGroupOptions[]]
    | ['para', toolbarParaGroupOptions[]]
    | ['height', toolbarHeightGroupOptions[]]
    | ['table', toolbarTableGroupOptions[]]
    | ['insert', toolbarInsertGroupOptions[]]
    | ['view', toolbarViewGroupOptions[]]
    | ['help', toolbarHelpGroupOptions[]]
];

wstaelens commented 7 years ago

interface SummernoteOptions {
    toolbar?: toolbar;
}

type toolbarOptionsMap = {
    'style': 'style' | 'bold' | 'italic' | 'underline' | 'clear',
    'font': 'strikethrough' | 'superscript' | 'subscript',
    'fontsize': 'fontsize',
    'color': 'color',
    'para': 'ul' | 'ol' | 'paragraph',
    'height': 'height',
    'table': 'table',
    'insert': 'link' | 'picture' | 'hr',
    'view': 'fullscreen' | 'codeview',
    'help': 'help'
};

type toolbarOption<T extends keyof toolbarOptionsMap> = [T, toolbarOptionsMap[T][]];
type toolbar = toolbarOption<keyof toolbarOptionsMap>[];

"Type 'toolbarOptionsMap' does not satisfy the constraint "style" | "font" | "fontsize" | .... | "help".

@pimterry this was the part.

wstaelens / TypeScript-Summernote

TypeScript 2.1: use keyof #1