2016-11-28 3 views
0

Я пишу файл определение машинописи .d.ts и пытаюсь определить этот кусок кода: яваскриптЛучшего способ определить вложенные параметры в файле определение машинописи

от: http://summernote.org/deep-dive/#initialization-options

$('#foo').bar({ 
    toolbar: [ 
    ['style', ['bold', 'italic', 'underline', 'clear']], 
    ['font', ['strikethrough', 'superscript', 'subscript']], 
    ['fontsize', ['fontsize']], 
    ['color', ['color']], 
    ['para', ['ul', 'ol', 'paragraph']], 
    ['height', ['height']], 
    ], 
otheroption: // ... 
}); 

Каков наилучший способ определения такой структуры (вложенные параметры)?

Вот что я нашел до сих пор, но не знаю, что рекомендуется, или если есть лучшие решения.

interface fooOptions { 
    toolbar?: any 
} 

или

type toolbarOptions = [string, string[]][]; 
interface foo { 
    toolbar?: toolbarOptions 
} 

или

type toolbarOptionNames = 'style' | 'font' | 'fontsize' | 'color' | 'para' | 'height'; 
type toolbarOptionValues = 'bold' | 'italic' | 'underline' | 'clear' | 'strikethrough' | 'superscript' | 'subscript' | 'fontsize' | 'color' | 'ul' | 'ol' | 'paragraph' | 'height'; 

interface foo { 
    toolbar?: [toolbarOptionNames, toolbarOptionValues[]][]; 
} 

или

type toolbarStyleGroupOptions = 'bold' | 'italic' | 'underline' | 'clear'; 
type toolbarFontGroupOptions = 'strikethrough' | 'superscript' | 'subscript'; 
type toolbarFontsizeGroupOptions = 'fontsize'; 
// etc... 

type toolbarDef = [ 
    ['style', toolbarStyleGroupOptions[]] 
    | ['font', toolbarFontGroupOptions[]] 
    | ['fontsize', toolbarFontsizeGroupOptions[]] 
    // | ... 
]; 

interface foo { 
    toolbar?: toolbarDef; 
} 

так или иначе?

ответ

1

Я думаю, что вы нашли там, вероятно, лучший вариант прямо сейчас. То, что вы действительно хотите сделать, - это определить что-то общее, правда? Вы хотите сказать, что это список пар имени опции (из этого списка допустимых имен опций) + значения опций (от тех, которые соответствуют предыдущему имени). Если вы явно не связываете эти два (как в вашем последнем примере), я не думаю, что вы можете это сделать.

Этот последний пример, вероятно, является лучшим текущим вариантом, хотя на данный момент, и это то, что я сделал бы, хотя это будет досадно многословным.

В краткосрочном будущем, однако, есть новый приятный вариант: keyof. Это немного сложно, но по существу позволяет определить один тип с точки зрения ключей и соответствующих значений другого. Я думаю, что пример для этого случая будет выглядеть так:

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<keyof toolbarOptionsMap>[]; 

С, что вы просто определить допустимые наборы параметров один раз, как тип объекта, а затем преобразовать этот тип в [опцию optionValues] форме пары, которая вы ищете, не повторяя каждый вариант снова и снова.

Это еще не все и выпущено, поэтому я на самом деле не проверял это, но я уверен, что он будет работать, когда это будет жить. Это должно появиться в TypeScript 2.1, который должен высадиться до конца ноября, то есть на этой неделе. Смотрите это место!

+0

Спасибо, что подтвердили, что мой код «хорошо» :-). не знал о keyof. Как только он будет выпущен, я попытаюсь обновить код (https://github.com/wstaelens/TypeScript-Summernote) – juFo

+0

toolbarOption []; Почему «любой»? можно ли это заменить? – juFo

+0

Это 'any', потому что это любая параметризованная панель инструментовOption. Вы правы, хотя это может быть потенциально слабовато в некоторых случаях, и вы можете заменить его на 'keyof toolbarOptionsMap' и сделать его строго лучше, я думаю. Я обновил этот пример. –

Смежные вопросы