Electron + Angular2 + es6-shim。配列にfind関数がありません

Question

私はangular2で電子の小さなプログラムを作成しようとしています。配列にfind関数を使用しようとするまでうまくいきました。そこに、私は初心者のようにエラーに

Property 'find' does not exist on type 'MyType[]'. 

を持って、私はエラーを理解することができませんでしたので、私は少しを検索し、私は使い方を電子JSエンジンがES5なくES6理解していることが分かりました。

なぜang2のes6-shimライブラリでシミングに使用するのですか？しかし、もしそうなら、私はこのエラーを起こすべきではないでしょうか？

マイtsconfig.jsファイルはこれです：

{ 
    "compilerOptions": { 
     "target": "ES5", 
     "module": "commonjs", 
     "moduleResolution": "node", 
     "removeComments": true, 
     "emitDecoratorMetadata": true, 
     "experimentalDecorators": true, 
     "sourceMap": true, 
     "noImplicitAny": false 
    }, 
    "exclude": [ 
     "node_modules", 
     "typings/index", 
     "typings/index.d.ts" 
    ], 
    "compileOnSave": false, 
    "buildOnSave": false 
} 

私も次のような構成で、webpackを使用します：私が思う

var path = require('path'); 
var webpack = require('webpack'); 
var CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin; 

module.exports = { 
    devtool: 'source-map', 
    debug: true, 

    entry: { 
     'angular2': [ 
      'rxjs', 
      'reflect-metadata', 
      'angular2/core', 
      'angular2/router', 
      'angular2/http' 
     ], 
     'app': './app/app', 
     'vendor': [ 
      'es6-shim', 
      'es6-shim/es6-sham' 
     ] 
    }, 

    output: { 
     path: __dirname + '/build/', 
     publicPath: 'build/', 
     filename: '[name].js', 
     sourceMapFilename: '[name].js.map', 
     chunkFilename: '[id].chunk.js' 
    }, 

    resolve: { 
     extensions: ['', '.ts', '.js', '.json', '.css', '.html'] 
    }, 

    module: { 
     loaders: [{ 
      test: /\.ts$/, 
      loader: 'ts', 
      exclude: [/node_modules/] 
     }] 
    }, 

    plugins: [ 
     new CommonsChunkPlugin({ 
      name: 'angular2', 
      filename: 'angular2.js', 
      minChunks: Infinity 
     }), 
     new CommonsChunkPlugin({ 
      name: 'common', 
      filename: 'common.js' 
     }), 
     new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js') 
    ] 
}; 

、私のプロジェクトでの設定ミスがあります。しかし、私はそれを見つけることができません。

ありがとうございます。

{ 
    "name": "videos-for-kids", 
    "version": "1.0.0", 
    "description": "", 
    "main": "index.js", 
    "author": "Charalampos Chrysikopoulos", 
    "license": "ISC", 
    "scripts": { 
     "build": "webpack --progress --profile --colors --display-error-details --display-cached", 
     "watch": "webpack --watch --progress --profile --colors --display-error-details --display-cached", 
     "start": "electron ." 
    }, 
    "devDependencies": { 
     "awesome-typescript-loader": "^0.15.10", 
     "electron-prebuilt": "^1.2.6", 
     "electron-reload": "^1.0.0", 
     "ts-loader": "^0.7.2", 
     "typescript": "^1.8.10", 
     "webpack": "^1.12.9", 
     "webpack-dev-server": "^1.14.0", 
     "typings": "^1.3.1", 
     "tslint": "^3.7.4", 
     "ts-helpers": "^1.1.1", 
     "imports-loader": "^0.6.5", 
     "json-loader": "^0.5.4" 
    }, 
    "dependencies": { 
     "angular2": "2.0.0-beta.17", 
     "systemjs": "0.19.26", 
     "es6-shim": "^0.35.1", 
     "reflect-metadata": "0.1.2", 
     "rxjs": "^5.0.0-beta.6", 
     "zone.js": "^0.6.12", 
     "bootstrap": "^3.3.6" 
    } 
} 

ここUPDATE 2

もエラーとクラスである：ここ

UPDATE 1

はpackage.jsonファイルの内容は

import { Injectable } from 'angular2/core'; 
import { Http, Response } from 'angular2/http'; 
import { Observable } from 'rxjs/Observable'; 

import 'rxjs'; 

import {IVideo} from '../model/IVideo'; 

@Injectable() 
export class VideoService { 

    private _serviceUrl = 'file://pathTo/app/data/videos.json'; 

    constructor(private _http: Http) { } 

    public getVideos(): Observable<IVideo[]> { 
     return this._http.get(this._serviceUrl) 
     .map((response: Response) => <IVideo[]> response.json()) 
     .catch(this.handleError); 
    } 

    private handleError(error: Response) { 
     return Observable.throw(error.json().error || 'Server error'); 
    } 

    getVideo(id: number): Observable<IVideo> { 
     return this.getVideos() 
      .map((videos: IVideo[]) => videos.find(v => v.id === id)); 
    } 

} 

Answer 1

更新 あなたは私が無視して、それから抜け出すために少し取ったウサギの穴を私に導いたという手掛かりをくれました。私はあなたがしていたことが有効であることを自分自身に証明するためにplunkerを作りました（あなたがしていたことは明らかです）。もちろん、問題なくArray.prototype.find（）メソッドを使用することができました。

//excerpt from plunker src/video.service.ts 
getVideo(id: number): Observable<IVideo> { 
    return this.getVideos() 
     .map((videos: IVideo[]) => videos.find(v => v.id === id)); 
} 

plunkerとVSコードの差がplunkerにSystemJSが実際VSコードTypeScriptコンパイラ自体とtranspileを行う活字体のtranspileを、実行されたことです。

しかし、あなたがトランジスターを実行しているときにこのエラーを表示していないという点を指摘してください。 .tsコードを翻訳しようとする前に、VSコードの "Problems"ウィンドウにこのエラーが表示されています。

私はそれが非常に奇妙なことを発見したので、私は基本に戻った。新しいVSコードプロジェクトを作成しました。単純なインターフェイスを作成し、配列をインスタンス化しました。次に、その配列に対して.find（）を実行しようとしました。 VS Codeはすぐに問題ウィンドウでこのメソッドが存在しないことを通知しました。 [VSコードの問題]ウィンドウでは、TypeScriptを使用して問題を特定していません。

VSコードは実際にはTypingsという名前の別のパッケージを使用しています。タイピングによって、VSコードはコードの解析とインテリセンスの提供に独自の機能を拡張できます。package.json（devDependencies）ファイルとtsconfig.json（excludeセクション）ファイルにはヒントがあります。

これは、ツールをインストールしたがプロジェクトが構成されていないことを意味します。あなたの "typings.json"ファイルを見ると、 "es6-shim"のエントリが表示されます。あなたはこのようなものを見なければなりません（もし存在しなければ、あなたのルートにファイルを作成してそれを入れます）。

{ 
"globalDependencies": { 
    "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#7de6c3dd94feaeb21f20054b9f30d5dabc5efabd" 
    } 
} 

VSコードが "es6-shim"を使用するためには、それをインストールする必要があります。入力パッケージは既にインストールされていますが、入力自体はプロジェクトにインストールされていません。ツールバーのVSコードでこれを行うには、「表示 - >統合端末」（ctrl + `）を選択します。コマンドプロンプトが表示されます。 Typingsがグローバルにインストールされている場合は、このコマンドを入力できます。

typings install 

そうでない場合は、それらのいずれかがあなたに、その後タイピングがインストールされていないエラーを与える場合

node_modules\.bin\typings install 

（それがローカルにインストールされています）、あなたはあなたのpackage.jsonはまだ依存関係「タイピング」を持っていることを確認する必要があります。そうであれば、「npm install」を実行し、上記の手順を繰り返します。

その後、VSコードを再起動しても、エラーはもう存在しません。このエラーが発生している場合は

また、あなたはあなたのtsconfig.jsonファイルが

"exclude": [ 
    "node_modules", 
    "typings/globals",//<---------- 
    "typings/index.d.ts" 
] 

---

にセクションを "除外" に更新する必要がありますか？コンパイル時か、電子アプリを実行しているときですか？ TypeScriptのどのバージョンを使用していますか？ Angular2ベータのどのバージョンを使用していますか？あなたの "package.json"ファイルがあなたにこれらのことを伝えます。

これがコンパイル時に発生している場合は、TypeScriptが配列の「find」メソッドを知らないことを意味します。これは奇妙です。 TypeScriptはあなたのWebpackに関する情報を知らないので、TypeScriptのバージョンをアップグレードすることができます（私は '1.8.10'を実行していて、 'find'メソッドを認識しています）。

電子走行中にこのようなことが起こっている場合は、いくつかの問題があります。

シムがロードされていない可能性があります。デベロッパーツールをオンにして[ネットワーク]タブを見て、シムの要求が表示されているかどうかを確認することで、それが正しいかどうかを確認できます。表示されない場合は、Webpackの問題であることがわかります。

es6-shimには、その内部に 'find'メソッドがありません。 shimの代わりに/client/shim.min.jsファイルを使用することをお勧めします。

あなたが使用している角ベータのバージョンは、es6-shimで定義されていないバージョンである可能性があります。これは変なことですが、Angular2の最新バージョンをアップグレードすることができます。例ではSystemJSを使用してブートストラップを呼び出すので、それをwebpackに変換する必要があります。私はshimなしで@ angularバージョン '2.0.0-rc.4'を実行しており、実行時に 'find'メソッドを使用することができます。

私はあなたが走っているエレクトロンのバージョンかもしれないと思っています（シムは必要ないので）、私はthisバージョンのエレクトロンを実行しています。