如何扩展单个文件？

Question

我有一个包含10个页面的站点，它共享一个Typescript文件，并且每个页面都有自己特定的Typescript文件。一个页面有一个JQuery插件paths = [] paths = [[0, 1]] paths = [[0, 1, 3]] paths = [[0, 1, 3, 4]] paths = [[0, 1, 3, 4, 6]] paths = [[0, 1, 3, 4, 6]] paths = [[0, 1, 3, 4, 6]] paths = [[0, 1, 3, 4, 6]] paths = [[0, 1, 3, 4, 6], [0, 1, 3, 5, 6]] paths = [[0, 1, 3, 4, 6], [0, 1, 3, 5, 6]] paths = [[0, 1, 3, 4, 6], [0, 1, 3, 5, 6]] paths = [[0, 1, 3, 4, 6], [0, 1, 3, 5, 6]] paths = [[0, 1, 3, 4, 6], [0, 1, 3, 5, 6]] paths = [[0, 1, 3, 4, 6], [0, 1, 3, 5, 6]] paths = [[0, 1, 3, 4, 6], [0, 1, 3, 5, 6]] paths = [[0, 1, 3, 4, 6], [0, 1, 3, 5, 6]] paths = [[0, 1, 3, 4, 6], [0, 1, 3, 5, 6], [0, 2, 3, 4, 6]] paths = [[0, 1, 3, 4, 6], [0, 1, 3, 5, 6], [0, 2, 3, 4, 6]] paths = [[0, 1, 3, 4, 6], [0, 1, 3, 5, 6], [0, 2, 3, 4, 6]] paths = [[0, 1, 3, 4, 6], [0, 1, 3, 5, 6], [0, 2, 3, 4, 6]] paths = [[0, 1, 3, 4, 6], [0, 1, 3, 5, 6], [0, 2, 3, 4, 6], [0, 2, 3, 5, 6]] paths = [[0, 1, 3, 4, 6], [0, 1, 3, 5, 6], [0, 2, 3, 4, 6], [0, 2, 3, 5, 6]] paths = [[0, 1, 3, 4, 6], [0, 1, 3, 5, 6], [0, 2, 3, 4, 6], [0, 2, 3, 5, 6]] paths = [[0, 1, 3, 4, 6], [0, 1, 3, 5, 6], [0, 2, 3, 4, 6], [0, 2, 3, 5, 6]] paths = [[0, 1, 3, 4, 6], [0, 1, 3, 5, 6], [0, 2, 3, 4, 6], [0, 2, 3, 5, 6]] ，所以我使用：

扩展JQuery对象

timepicker

但是我不希望任何其他TypeScript文件在interface JQuery { timepicker(options:any):JQuery; } 对象上有时间戳。如何只为此文件扩展它？

它不允许我在命名空间中扩展JQuery。

模块能帮忙吗？我没有必要导入或导出任何东西，所以我不确定它是否合适，或者如何使用模块。

Answer 1

您可以将界面命名为更能反映其含义的东西，例如：

interface JQueryWithTimePicker extends JQuery {
    timepicker(options: any): JQuery;
}

然后，您需要时间选择器的一个文件可以使用JQuery对象向下转换到JQueryWithTimePicker。

当我需要向DOM节点添加属性时，有时会使用这种策略。像这样：

interface MyTreeElement extends HTMLElement
{
    Nodes: TreeNode[];
}

Answer 2

您可以在页面标记中包含以下内容：

<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css">

然后通过使用以下技巧来处理jQuery，只需对时间选择器做任何事情：

declare var jQuery: any;

export class Whatever {
    private timePicker = jquery.timePicker
}

这是超级hacky，但我认为它会起作用。

Answer 3

  

https://www.typescriptlang.org/docs/handbook/modules.html

     

仅将模块导入为副作用

     

尽管不建议这样做，但是某些模块设置了一些可由其他模块使用的全局状态。这些模块可能没有任何出口，或者消费者对其任何出口都不感兴趣。要导入这些模块，请使用：

import "./my-module.js";