TypeScript 2.1: use keyof

[wstaelens]

See:

• http://stackoverflow.com/a/40843364/187650
• Static types for dynamically named properties microsoft/TypeScript#11929

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]

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

[pimterry]

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]

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]

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.