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

Question

我已经扩展了一些日期原型的功能，例如：

interface Date {
    YearsFromToday(): number;
}

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

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

我想知道是否有一种简单的方法来全局声明这个。我不确定应该把它放在项目的哪个位置？

- johnny 5

Answer 1

将你的猴子补丁代码放在一个文件中。例如，你可以将其命名为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();

另一种选择，尤其适用于库作者的方法是允许猴子补丁(patch)但不要求它，同时仍可暴露出功能。

这里有一个例子：

date-augmentations/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

- Aluan Haddad

---

谢谢，我回家后会查看这个。 - johnny 5

@johnny5 如果你需要编写库或遇到冲突，我添加了一些额外的信息，你可能会觉得有用。 - Aluan Haddad