Ionic 2 Angular 2 全局导入扩展方法答案

【问题标题】：Ionic 2 Angular 2 Global Import Extension methodsIonic 2 Angular 2 全局导入扩展方法
【发布时间】：2017-09-12 08:28:45
【问题描述】：

我对 Date 原型做了一些扩展，例如：

interface Date {
    YearsFromToday(): number;
}

Date.prototype.YearsFromToday = function (): number {
    // implementation 
}

我正在使用 ionic2 tutorial --v2 模板，这是一个非常标准的布局 - app.html、app.ts、app.module 等。

我想知道是否有一种简单的方法可以在全球范围内声明它。我不确定在项目中的确切位置？

【问题讨论】：

标签： javascript angular typescript ionic2

【解决方案1】：

将您的猴子补丁代码放入文件中。您可以将其称为 monkey-patch-date.ts，例如：

monkey-patch-date.ts

interface Date {
    YearsFromToday(): number;
}

Date.prototype.yearsFromToday = function (): number {
    // implementation 
}

然后在 main.ts 或任何你的入口模块中导入它：

main.ts

import './monkey-patch-date';

交替。如果您想更加明确地指出您正在做一些危险的事情，您可以将其设为导出其猴子修补程序的模块。

monkey-patch-date.ts

declare global {
    interface Date {
        yearsFromToday(): number;
    }
}

export default function () {
    Date.prototype.yearsFromToday = function (): number {
        // implementation 
    };
}

然后像这样导入

main.ts

import monkeyPatchDate from './monkey-patch-date';
monkeyPatchDate();

另一个对库作者特别有用的替代方法是允许猴子修补但不需要它，同时仍然公开功能。

这是一个例子：

日期增强/index.ts

export function yearsFromToday(date: Date): number {
    // implementation 
}

date-augmentations/monkey-patch.ts

import {yearsFromToday} from './index';

declare global {
    interface Date {
        yearsFromToday(): number;
    }
}

Date.prototype.yearsFromToday = function() {
    return yearsFromToday(this);
}

现在消费者可以通过运行猴子修补 Date 原型

import 'date-augmentations/monkey-patch';

无需猴子修补任何东西即可通过导出访问功能

import {yearsFromToday} from 'date-augmentations';

const date = new Date('12-12-2023');
const yft = yearsFromToday(date);
console.log(yft); // prints 6

【讨论】：

谢谢，等我回家去看看
@johnny5 我添加了一些附加信息，如果您需要编写库或遇到冲突，您可能会觉得有用。