打字稿混淆定义与“new()”和构造函数答案

【问题标题】：Typescript confusing definition with "new()" and constructors打字稿混淆定义与“new()”和构造函数
【发布时间】：2016-04-03 06:38:18
【问题描述】：

我正在尝试通过名为angular-marked 的angular 插件在Typescript 应用程序中使用一个名为marked 的流行javascript 库。

marked angular-marked

marked 在DefinitelyTyped 上有一个.d.ts 文件，所以我将其包含在内。

现在，问题在于angular-marked 有一个名为setRenderer 的新函数，它接收一个应该与marked.Renderer 匹配的对象字面量。这在纯 javascript 中不是问题。

setRenderer 没有在 typescript 定义中定义，但MarkedRenderer 是，它（理论上）是通过函数的参数类型。所以我试着制作自己的接口来声明它，就像这样；

interface MarkedStatic {
   setRenderer(renderer: MarkedRenderer): MarkedStatic;
}

这看起来很简单。但是当我尝试使用它时，我得到了各种各样的废话。例如，我想简单地覆盖它输出blockquote 的方式。在普通的javascript中，就是这么简单；

$markedProvider.setRenderer({
    blockquote:(quote: string): string => {
        return 'customized output';
    }
});

但是在打字稿中，我得到了错误......

类型参数 '{ blockquote: (quote: string) => string; }' 不可分配给“MarkedRenderer”类型的参数。 '{ blockquote: (quote: string) => string; 类型中缺少属性 'code' }'。

这对我来说似乎有点困惑，但我认为这意味着我需要使用 new 关键字创建一个新的渲染器。

所以我试试……

var r = 新标记的.Renderer();

我被告知它不存在。即使marked.js 库已明确导入并正常工作。

我最终通过创建一个将每个功能设置为可选功能的新界面来“强制”它工作，就像这样；

interface IMarkdownProvider extends MarkedStatic {
    setRenderer?(renderer?: IMarkedRenderer);
}

interface IMarkedRenderer {
    code?(code: string, language: string): string;
    blockquote?(quote: string): string;
    html?(html: string): string;
    heading?(text: string, level: number, raw: string): string;
    hr?(): string;
    list?(body: string, ordered: boolean): string;
    listitem?(text: string): string;
    paragraph?(text: string): string;
    table?(header: string, body: string): string;
    tablerow?(content: string): string;
    tablecell?(content: string, flags: {
        header: boolean,
        align: string
    }): string;
    strong?(text: string): string;
    em?(text: string): string;
    codespan?(code: string): string;
    br?(): string;
    del?(text: string): string;
    link?(href: string, title: string, text: string): string;
    image?(href: string, title: string, text: string): string;
    text?(text: string): string;
}

但我真的很想了解并找到一个更有机的解决方案。有人可以帮忙吗？

【问题讨论】：

标签： typescript

【解决方案1】：

我更喜欢你的解决方案，但如果你有可用的 mixin 函数和对默认渲染器的引用，你可以尝试这样的方法：

let mixin : <A,B>(a: A, b: B) => A & B;

interface IMarkdownProvider {
    setRenderer?(renderer?: IMarkedRenderer);
}

interface IMarkedRenderer {
    code(code: string, language: string): string;
    br(): string;
    del(text: string): string;
}

let provider: IMarkdownProvider;
let defaultRenderer = <IMarkedRenderer>{};

provider.setRenderer(mixin(defaultRenderer, {br: () => "br"}));

【讨论】：

【解决方案2】：

您将IMarkedRenderer 的所有字段标记为可选的修复方法是正确的，您将额外的setRenderer 方法添加到MarkedStatic 的修复方法也是正确的

根据 repo 中的文档，您似乎不应该在任何地方添加 new。您需要的实例已经由 DI 注入器提供，应该足够了。

【讨论】：