Question

我正在编写一个TypeScript定义文件 .d.ts 并尝试定义这段javascript代码：

来自：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;
}

或其他方式？

Answer 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>[];

使用它，您只需将有效的选项集定义一次，作为对象类型，然后将该类型转换为您正在寻找的[option，optionValues]对形式，而不会反复复制每个选项试。

这还不是最终的并且已经发布了，所以我还没有真正检查过这个，但是我非常有信心它会在现场生效。这应该出现在TypeScript 2.1中，它应该在11月底之前，即本周之前登陆。看这个空间！

在TypeScript定义文件中定义嵌套选项的最佳方法

1 个答案: