I’ve the following project directory structure:
app
...
extensions
- array.ts
- string.ts
support
- net.ts
...
Inside the file array.ts
there is the following Array<T>
interface extension:
Array.prototype.contains = function(element) {
return this.indexOf(element) > -1;
};
Array.prototype.containsIgnoreCase = function(element) {
if(element == undefined) return false;
for(let item of this)
if(element.toString().toLowerCase() == item.toString().toLowerCase())
return true;
return false;
};
interface Array<T> {
contains(element : T): boolean;
containsIgnoreCase(element : any): boolean;
}
and inside the string.ts
there is the following String
interface extension:
String.prototype.containsNumber = function() {
return /.*\d+.*/g.test(this);
};
String.prototype.toUTF8Array = function() {
var str = unescape(encodeURIComponent(this)),
charList = str.split(''),
uintArray = [];
for (var i = 0; i < charList.length; i++) {
uintArray.push(charList[i].charCodeAt(0));
}
return new Uint8Array(uintArray);
};
interface String {
containsNumber(): boolean;
toUTF8Array(): Uint8Array;
}
In the file net.ts
there are different parts of the code that access the above extension methods, for example:
let code = "<code>";
let byteArray = code.toUTF8Array();
but when I compile the code using ionic build
the compiler throws the following errors:
TypeScript error: E:/<project dir>/app/support/net.ts(29,62): Error TS2339: Property 'contains' does not exist on type 'string[]'.
TypeScript error: E:/<project dir>/app/support/net.ts(35,20): Error TS2339: Property 'containsNumber' does not exist on type 'string'.
TypeScript error: E:/<project dir>/app/support/net.ts(88,49): Error TS2339: Property 'toUTF8Array' does not exist on type 'string'.
TypeScript error: E:/<project dir>/app/support/net.ts(89,81): Error TS2339: Property 'toUTF8Array' does not exist on type 'string'.
I read on internet that to extend a native type just write an interface with the name of the type to extend, leaving it in the global namespace and provide the implementations of the added methods (As I wrote before) … that’s it!! Right?
How can I solve the problem?
UPDATE
Creating a file named index.ts
with the following content
export { } from './array';
export { } from './string';
and inserting this line of code
import { } from '../extensions';
at the start of the net.ts
file, the compilation peforms succefully.
Now, there is another problem. When I exec the command ionic serve
and try to test the app with Google Chrome, the browser throws the following
error:
TypeError: support_1.Guid.newGuid(...).toUTF8Array is not a function
where Guid.newGuid(...)
is a function that returns a string.
POSSIBLE SOLUTION
I opened the app.bundle.js
inside the www/build/js
folder and I figure out that the above described interface definitions and implementations was not present.
To solve the problem I modified the gulpfile.js in this way:
gulp.task('watch', ['clean'], function(done){
runSequence(
['sass', 'html', 'fonts', 'scripts'],
function(){
gulpWatch('app/**/*.scss', function(){ gulp.start('sass'); });
gulpWatch('app/**/*.html', function(){ gulp.start('html'); });
buildBrowserify({
src: [ <------ ADDED
'./app/extensions/array.ts', <------ ADDED
'./app/extensions/string.ts', <------ ADDED
'./app/app.ts', <------ ADDED
'./typings/index.d.ts' <------ ADDED
],
watch: true
})
.on('end', done);
}
);
});
and:
...
gulp.task('build', ['clean'], function(done){
runSequence(
['sass', 'html', 'fonts', 'scripts'],
function(){
buildBrowserify({
src: [ <---- ADDED
'./app/extensions/array.ts', <------ ADDED
'./app/extensions/string.ts', <------ ADDED
'./app/app.ts', <------ ADDED
'./typings/index.d.ts' <------ ADDED
],
minify: isRelease,
browserifyOptions: {
debug: !isRelease
},
uglifyOptions: {
mangle: false
}
}).on('end', done);
}
);
});
Now both the commands ionic build
and ionic serve
work properly.