打字稿扩展字符串接口运行时错误 [英] Typescript Extend String interface Runtime Error

问题描述

我正在Angular应用程序中扩展Typescript String接口.我添加了一个方法translate()，该方法可在我的整个应用程序中访问. 我没有任何编译错误.

I am extending the typescript String interface in my Angular app. I have added a method translate() which is accessible throughout my app. I do not get any compile errors.

但是，我遇到了运行时错误:

However, I get a runtime error:

"TypeError:翻译此字符串".翻译不是函数"

"TypeError: "Translate this string".translate is not a function"

有什么主意我可能做错了吗?

Any ideas what I might be doing wrong?

以下是我的实现的屏幕截图:

Here are the screenshots of my implementation:

声明:

实施

呼叫:

推荐答案

我能够解决此问题.这是有关如何解决此问题的更新:

I was able to fix this problem. Here is an update on how to solve this issue:

1..创建文件global.d.ts并在其中添加接口扩展定义.

1. Create a file global.d.ts and add the interface extension definitions there.

export { };
declare global
{
    interface String
    {
        /**
         * Translates the given string according to the culture provided.
         * @param cultureName The culture name of the translation target.
         * @returns The translated string.
         */
        translate(cultureName: string): string;
    }
}

2..使用接口扩展方法定义创建另一个文件.就我而言，我将其命名为string.extensions.ts

2. Create another file with the interface extension methods definition. In my case I named it string.extensions.ts

/**
 * Translates the given string according to the culture provided.
 * @param cultureName The culture name of the translation target.
 * @returns The translated string.
 */    
String.prototype.translate = function(cultureName: string): string
{
    const inputValue = this;

    // Do the translation here
    const translatedValue = 'Willkommen bei meiner App'; // Only for example

    return translatedValue ;
};

3..在您的应用启动文件中，以我的情况为main.ts，添加对global.d.ts的引用以及包含扩展方法的文件 定义.

3. In your app boot file, in my case its main.ts, add a reference to the global.d.ts and the file containing your extension methods definitions.

/// <reference path="app/core/extensions/global.d.ts" />
//...
import './app/core/extensions/string.extensions';

您只需要在项目(main.ts)中一次导入此文件，然后就可以在代码中的任何位置使用它.

You just need to import this file once in your project (main.ts) and then you can use it anywhere in the code.

4.在我的AppComponent中的使用示例

4. Example use in my AppComponent

import {Component} from '@angular/core';    

@Component({
    selector: 'my-app',
    template: `
        Original Value: <h3>{{ originalValue }}</h3>
        Translated Value: <h3>{{ translatedValue }}</h3> 
    `
})
export class AppComponent {

    private originalValue:string;
    private translatedValue:string;

    constructor() {          
        this.originalValue = 'Welcome to my App';
        this.translatedValue = 'Welcome to my App'.translate('de-DE'); 
    }      
}

---

这是解决此烦人问题所需要做的一切.

---

That's all you need to do to solve this annoying problem.

这里是工作中的矮人的链接: 柱塞演示

Here is a link to working plunker: Plunker Demo

这篇关于打字稿扩展字符串接口运行时错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！