Extension methods in typescript (system)

Question

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

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'.

What I'm doing wrong?

Thanks a lot

PS: this is my 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 js file in index.html it works, but I don't like this approach.

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

Did you import your extensions? If you're using a module loader you're gonna have to check if the code you wrote is actually loaded. — Luka Jacobowitz
– Luka Jacobowitz, Commented Apr 5, 2016 at 17:48
Thanks Luka. What do you mean with import? I'm not exporting the class. I updated the question with more details — user3471528
– user3471528, Commented Apr 5, 2016 at 17:57
Well in System.js you're going to need to tell the compiler where to find your code. It follows all of your imports and resolves them, loading the contents. That way you can avoid putting all the js files into you html. — Luka Jacobowitz
– Luka Jacobowitz, Commented Apr 5, 2016 at 18:03

Paul M · Accepted Answer · 2016-04-09 01:02:46Z

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:

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 (local to project, not main TS file of same name)

export {}

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

extensions.ts (entire file)

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:

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:

Hope this is helpful.

Luka Jacobowitz · Accepted Answer · 2016-04-05 18:05:35Z

2

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

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

edited Apr 5, 2016 at 18:05

answered Apr 5, 2016 at 17:59

Luka Jacobowitz

23.7k5 gold badges41 silver badges58 bronze badges

6 Comments

user3471528 Over a year ago

In this way I get the following error: localhost:2068/app/source/utils/extensions.js detected as register but didn't execute.(…)

Luka Jacobowitz Over a year ago

Can you try exporting String in your extensions.ts? :)

user3471528 Over a year ago

Adding the export work before interface I get a compile error error TS2339: Property 'contains' does not exist on type 'String'. app/source/utils/extensions.ts(15,18): error TS2339: Property 'containsOr' does not exist on type 'String'. The strange thing is that the error is related to contains() and containsOr, and not to startsWith() >.<

Luka Jacobowitz Over a year ago

That is certainly strange! What happens if you instead write export String at the end of your file?

user3471528 Over a year ago

The compiler gives me Declaration or statement expected. I'm going crazy

|

Collectives™ on Stack Overflow

Extension methods in typescript (system)

2 Answers 2

Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related