（TS）屬性'find'在'MyArray []'上不存在'

Question

我跟隨着Adam Freeman的Angular Pro書。 我剛剛通過第7章「SportsStrore：一個真正的應用程序」。

他在這裏使用Angular 2。 （4可用下載，但試圖通過2第一）。

我只是從我試圖解決的TypeScript編譯器中得到一個小的TypeScript錯誤。

它顯示在一個名爲product.repository.ts的文件中。 下面是產品信息庫中的代碼：

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

下面是的Visual Studio 2017年的PIC與波浪抱怨：

下面是實際的TSC在抱怨：

我讀過Array []。find is only available i ES6，而不是ES5。

這裏是的package.json文件：

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

這裏是tsconfig.json文件：

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

撰文人說，數組[]發現（）只被ES6支持而不是ES5，但大多數瀏覽器都支持這一點，除了較舊的IE。所以原始示例中有一個polyfill。

有誰知道polyfill在package.json文件中是什麼？它是classlist.js嗎？

然後他說現在幾天，polyfill必須直接進入tsconfig.json文件。有誰知道這條線會是什麼樣子？

---更新1 ---

如果我在tsconfig.json加入這一行似乎擺脫了TSC錯誤的。

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

完整tsconfig.json文件：

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

Answer 1

獨立shim爲ES6 .find()：

// as a function 
var find = require('array.prototype.find'); 
find([1, 2], function (x) { return x === 2; }); // 2 

// to shim it 
require('array.prototype.find').shim();