Методы расширения в typescript (системе)

В моем проекте angular2 я пытаюсь расширить прототип строкового класса с помощью typescript. Это мой код:

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;
}

С помощью этого кода проект компилируется (также помогает помощь в Visual Studio Code), но во время выполнения я получаю "contains not defined".

Что я делаю неправильно?

Спасибо большое

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"
  ]
}

ИЗМЕНИТЬ

Я заметил, что импорт js файла в index.html работает, но мне не нравится этот подход.

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

Ответы

Ответ 1

Мне удалось заставить его работать без ошибок 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"
  ]
}

Затем создайте (если его не существует) файл global.d.ts, локальный для вашего проекта:

global.d.ts(локальный для проекта, а не основной файл TS с таким же именем)

export {}

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

extensions.ts(весь файл)

export {}

//don't redefine if it 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;
    }
}

Тогда в вашем, независимо от того, какой ваш первый System.import(имя файла) (my is main.ts). Просто используйте один раз:

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

Теперь, в вашем приложении вы можете использовать свой интерфейс:

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

Производит вывод консоли:

8

Надеюсь, что это будет полезно.

Ответ 2

Вместо того, чтобы импортировать код в html, просто поместите это в начало своего кода:

import './utils/extensions';

Просто замените его на свой путь к файлу.

Вот еще несколько ресурсов по модулям и импорту:

TypeScript docs

Документы MDN