typescript 打字稿中的扩展方法（系统）

Extension methods in typescript (system)

提问by user3471528

In my angular2 project I'm trying to extend the prototype of the stringclass using typescript. This is my code:

在我的 angular2 项目中，我试图使用打字稿扩展字符串类的原型。这是我的代码：

interface String 
{
    startsWith(s:string);
    contains(s:string);
    containsOr(s1:string, s2:string);
}

String.prototype.startsWith = function (s:string):boolean {
    return this.indexOf (s) === 0;
}
String.prototype.contains = function (s:string):boolean {
    return this.indexOf(s) > 1;
}
String.prototype.containsOr = function (s1:string, s2:string):boolean {
    return this.indexOf(s1) > 1 || this.indexOf (s2) > 1;
}

With this code the project compiles (also the content assist of Visual Studio Code assists me) but at run-time I get a 'contains is not defined'.

使用此代码项目编译（Visual Studio Code 的内容帮助也帮助我）但在运行时我得到一个“包含未定义”。

What I'm doing wrong?

我做错了什么？

Thanks a lot

非常感谢

PS: this is my tsconfig:

PS：这是我的 tsconfig：

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "outDir": "wwwroot/app/source/"
  },
  "exclude": [
    "node_modules",
    "bower_components",
    "wwwroot",
    "typings/main",
    "typings/main.d.ts"
  ]
}

EDIT

编辑

I noticed that importing the jsfile in index.htmlit works, but I don't like this approach.

我注意到在index.html中导入js文件是有效的，但我不喜欢这种方法。

<script src="app/source/utils/extensions.js"></script>

回答by Paul M

I was able to get it working with no TS errors (1.8.9), Angular2 (2.0.0-beta.12) errors, and working function call using the following template:

我能够让它在没有 TS 错误（1.8.9）、Angular2（2.0.0-beta.12）错误和使用以下模板的工作函数调用的情况下工作：

tsconfig.json

配置文件

{
  "compilerOptions": {
  "target": "es5",
  "module": "system",
  "moduleResolution": "node",
  "sourceMap": true,
  "emitDecoratorMetadata": true,
  "experimentalDecorators": true,
  "removeComments": false,
  "noImplicitAny": false
},
"exclude": [
  "node_modules",
  "typings/main",
  "typings/main.d.ts"
  ]
}

Next, create (if one doesn't exist) a global.d.ts file local to your project:

接下来，创建（如果不存在）一个位于项目本地的 global.d.ts 文件：

global.d.ts (local to project, not main TS file of same name)

global.d.ts（项目本地，不是同名的主 TS 文件）

export {}

   declare global {
     interface String {
       calcWidth(): number;
     }
   }

extensions.ts (entire file)

extensions.ts（整个文件）

export {}

//don't redefine if it's already there
if (!String.prototype.hasOwnProperty('calcWidth')) {
    String.prototype.calcWidth = function (): number {
      //width calculations go here, but for brevity just return length
      return this.length;
    }
}

Then in your whatever your first System.import(filename) is (mine is main.ts). Just use once:

然后在你的第一个 System.import( filename) 是（我的是 main.ts）。只需使用一次：

import './extensions'  //or whatever path is appropriate
... 
...

Now, throughout your app you can use your interface:

现在，您可以在整个应用程序中使用您的界面：

var testString = 'fun test';
console.log(testString.calcWidth());

Produces console output:

产生控制台输出：

8

Hope this is helpful.

希望这是有帮助的。

回答by Luka Jacobowitz

Instead of importing the code in html just put this at the top of your code:

不要在 html 中导入代码，只需将其放在代码的顶部：

import './utils/extensions';

Just replace it with your path to the file.

只需将其替换为您的文件路径即可。

Here are some more resources on modules and imports:

以下是有关模块和导入的更多资源：

TypeScript docs

打字稿文档

MDN docs

MDN 文档