Typescript Extend String接口运行时错误

时间:2017-08-01 12:35:05

标签: angular typescript

我在Angular应用程序中扩展了typescript String接口。我添加了一个方法translate(),可以在我的应用程序中访问。 我没有收到任何编译错误。

但是,我收到运行时错误:

  

“TypeError:”翻译此字符串“.translate不是函数”

任何想法我可能做错了什么?

以下是我的实施截图:

声明:

enter image description here

实施

enter image description here

调用

enter image description here

3 个答案:

答案 0 :(得分:2)

我能够解决这个问题。以下是有关如何解决此问题的更新:

  

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

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

/**
 * 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的引用以及包含扩展方法的文件   定义

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

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

  

4. 在我的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'); 
    }      
}

这就是解决这个烦人问题所需要做的一切。

以下是工作plunker的链接:Plunker Demo

答案 1 :(得分:1)

这对我有用:

声明接口

angular2-google-maps/core

<强>用法

interface String {
    translate():string
}

答案 2 :(得分:1)

我猜你的声明是在一个单独的文件中。它仍然使用基本声明。它无法访问代码。尝试使用文件中的直接导入或此文件。

///<reference path="test.d.ts"/>