Typescript throws error with Array.find

Question

I've just completed the Angular 2.0 Tour of Heroes tutorial and I've added the following Gulp file (simplified for this example) to build it:

var del = require('del');
var gulp = require('gulp');
var ts = require('gulp-typescript');
var sourcemaps = require('gulp-sourcemaps');
var tsProject = ts.createProject('tsconfig.json');

gulp.task('transpile-ts', function() {
    var tsResult = gulp.src(paths.allTypeScript)
        .pipe(sourcemaps.init())
        .pipe(ts(tsProject));

    return tsResult.js
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest(paths.dest_js));
});

I want to add an Array.find method into dashboard.component.ts as follows:

ngOnInit() {
    let newVar: Array<number> = new Array();
    newVar.push(0);
    newVar.push(1);
    newVar.find(d => d == 1);

    this._heroService.getHeroes()
        .then(heroes => this.heroes = heroes.slice(1,5));
}

When I run the command "gulp transpile-ts" however I get the following error:

app\dashboard.component.ts(26,16): error TS2339: Property 'find' does not exist on type 'number[]'.

I have es6-shim.d.ts included so the "find" method does exist under "interface Array".

Also I tried running the same task with Grunt and the same issue occurred so it's not a Gulp issue.

Any ideas as to what could be causing this?

basarat · Accepted Answer · 2016-03-16 05:28:34Z

5

I have es6-shim.d.ts included so the "find" method does exist under "interface Array".

Apparently that shim doesn't add the find method to Array. You should have:

interface Array<T> {
    /** 
      * Returns the value of the first element in the array where predicate is true, and undefined 
      * otherwise.
      * @param predicate find calls predicate once for each element of the array, in ascending 
      * order, until it finds one where predicate returns true. If such an element is found, find 
      * immediately returns that element value. Otherwise, find returns undefined.
      * @param thisArg If provided, it will be used as the this value for each invocation of 
      * predicate. If it is not provided, undefined is used instead.
      */
    find(predicate: (value: T, index: number, obj: Array<T>) => boolean, thisArg?: any): T;
}

Update

Even multiple declarations shouldn't cause an error. The following compiles just fine:

interface Array<T> {
    /** 
      * Returns the value of the first element in the array where predicate is true, and undefined 
      * otherwise.
      * @param predicate find calls predicate once for each element of the array, in ascending 
      * order, until it finds one where predicate returns true. If such an element is found, find 
      * immediately returns that element value. Otherwise, find returns undefined.
      * @param thisArg If provided, it will be used as the this value for each invocation of 
      * predicate. If it is not provided, undefined is used instead.
      */
    find(predicate: (value: T, index: number, obj: Array<T>) => boolean, thisArg?: any): T;    

}
interface Array<T> {
    /** 
      * Returns the value of the first element in the array where predicate is true, and undefined 
      * otherwise.
      * @param predicate find calls predicate once for each element of the array, in ascending 
      * order, until it finds one where predicate returns true. If such an element is found, find 
      * immediately returns that element value. Otherwise, find returns undefined.
      * @param thisArg If provided, it will be used as the this value for each invocation of 
      * predicate. If it is not provided, undefined is used instead.
      */
    find(predicate: (value: T, index: number, obj: Array<T>) => boolean, thisArg?: any): T;    
}

var foo:any[]
foo.find((x)=>true);

So check the contents of es6-shim.d.ts to make sure it confirms.

edited Mar 16, 2016 at 5:28

answered Mar 16, 2016 at 2:10

basarat

278k60 gold badges475 silver badges528 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Christopher Grigg Over a year ago

Thanks for your response basarat. I do have that code in the es6-shim file and I can even navigate to it. I do have multiple choices when I "Choose Declaration" on the "find" property with files such as "global.d.ts" not sure if that has something to do with it.

basarat Over a year ago

Mutilple decarations should not cause an error. See update.

Christopher Grigg Over a year ago

I found the issue is with "gulp-typescript". When I use just tsc this error disappears. Using just tsc solves this error too stackoverflow.com/questions/36001159/…. Do you have any experience with "gulp-typescript"? Thanks

WORMSS Over a year ago

find type should return T | undefined

Christopher Grigg · Accepted Answer · 2016-03-29 22:28:03Z

1

After investigation I noticed that when using 'tsc' in the CMD line to transpile the Typsecript everything worked as expected. Instead of using 'gulp.src' in my gulp file I should have used 'tsProject.src' to emulate this.

This was answered here https://github.com/ivogabe/gulp-typescript/issues/313.

answered Mar 29, 2016 at 22:28

Christopher Grigg

2,33027 silver badges35 bronze badges

Collectives™ on Stack Overflow

Typescript throws error with Array.find

2 Answers 2

Update

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Update

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related