(TS) Property 'find' does not exist on type 'MyArray[]'

I am following along with the Angular Pro book by Adam Freeman. I just got through Chapter 7, "SportsStrore: A real application".

He is using Angular 2 here. (4 is available with downloads but trying to get through 2 first).

I just have one little TypeScript error from the TypeScript compiler I am trying to solve.

It shows up in a file called product.repository.ts. Here is the code for the Product Repository:

import { Injectable } from "@angular/core";
import { Product } from "./product.model";
import { StaticDataSource } from "./static.datasource";

@Injectable()
export class ProductRepository {
    private products: Product[] = [];
    private categories: string[] = [];

    constructor(private dataSource: StaticDataSource) {
        dataSource.getProducts().subscribe(data => {
            this.products = data;
            this.categories = data.map(p => p.category)
                .filter((c, index, array) => array.indexOf(c) == index).sort();
        });
    }

    getProducts(category: string = null): Product[] {
        return this.products
            .filter(p => category == null || category == p.category);
    }

    getProduct(id: number): Product {
        return this.products.find(p => p.id == id);
        // return this.products.filter(p => p.id == id);
    }

    getCategories(): string[] {
        return this.categories;
    }
}

Here is a pic of Visual Studio 2017 complaining with the squiggly:

Here is the actual tsc complaining about it:

I've read that Array[].find is only available in ES6 and not in ES5.

Here is the package.json file:

{
  "dependencies": {
    "@angular/common": "2.2.0",
    "@angular/compiler": "2.2.0",
    "@angular/core": "2.2.0",
    "@angular/platform-browser": "2.2.0",
    "@angular/platform-browser-dynamic": "2.2.0",
    "@angular/forms": "2.2.0",
    "@angular/http": "2.2.0",
    "@angular/upgrade": "2.2.0",
    "@angular/router": "3.2.0",
    "reflect-metadata": "0.1.8",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "0.6.26",
    "core-js": "2.4.1",
    "classlist.js": "1.1.20150312",
    "systemjs": "0.19.40",
    "bootstrap": "4.0.0-alpha.4",
    "font-awesome": "4.7.0",
    "intl": "1.2.5",
    "html5-history-api": "4.2.7"
  },

  "devDependencies": {
    "lite-server": "2.2.2",
    "typescript": "2.0.2",
    "typings": "1.3.2",
    "concurrently": "2.2.0",
    "systemjs-builder": "0.15.32",
    "json-server": "0.8.21",
    "jsonwebtoken": "7.1.9"
  },

  "scripts": {
    "start": "concurrently \"npm run tscwatch\" \"npm run lite\" \"npm run json\" ",
    "tsc": "tsc",
    "tscwatch": "tsc -w",
    "lite": "lite-server",
    "json": "json-server data.js -p 3500 -m authMiddleware.js",
    "typings": "typings",
    "postinstall": "typings install"
  }
}

Here is the tsconfig.json file:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true
  },
  "exclude": [ "node_modules" ]
}

The author says that Array[].find() is only supported by ES6 and not ES5, but that most browsers have supported this except for older IE. So there is a polyfill in the original example.

Does anyone know what the polyfill is in the package.json file? Is it classlist.js?

Then he says that now days, the polyfill has to go directly into the tsconfig.json file. Does anyone know what this line would look like?

--- UPDATE 1 ---

If I add this line in the tsconfig.json it seems to get rid of the tsc error.

"lib": [ "es2015", "dom" ]

complete tsconfig.json file:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [ "es2015", "dom" ]
  },
  "exclude": [ "node_modules" ]
}