电子 + Angular2 + es6-垫片。数组没有查找功能
Electron + Angular2 + es6-shim. Array has not the find function
我正在尝试使用 angular2 在 electron 中制作一个小程序，在我尝试在数组上使用 find 函数之前它运行良好。那里，我得到一个错误
Property 'find' does not exist on type 'MyType[]'.
作为一个新手，看不懂报错，于是稍微搜索了一下，发现electron使用的js引擎理解ES5而不是ES6。
这就是为什么 se 在 angular2 中使用 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')
]
};
我想，我的项目配置有误。但我找不到它。
提前致谢。
更新 1
以下是 package.json 文件的内容：
{
"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"
}
}
更新 2
这里也是 class 错误：
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));
}
}
更新
所以你给了我一个我忽略的线索，这让我陷入了一个兔子洞，花了一点时间才走出去。我什至构建了一个 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 Code 之间的区别在于，在 plunker 中，SystemJS 实际上执行 TypeScript 转译，而 VS Code 使用 TypeScript 编译器本身执行转译。
但是，您在评论中指出您在执行转译时没有收到此错误。在您尝试转换 .ts 代码之前，您在 VS Code "Problems" window 中看到了这个错误。
我觉得很奇怪，所以我回到了基础。我创建了一个新的 VS Code 项目，并创建了一个简单的界面并实例化了一个数组。然后我尝试在该数组上执行 .find() 。 VS Code 立即在问题 window 中通知我该方法不存在。 VS 代码问题 window 没有使用 TypeScript 来识别问题。
VS Code 实际上使用了另一个名为 Typings 的包，打字允许 VS Code 扩展其自身在解析代码和提供智能感知方面的能力。在你的 package.json(devDependencies) 文件和 tsconfig.json(exclude section) 文件中已经有提示你有 Typings.
这意味着您已安装工具，但尚未配置项目。我敢打赌，如果您查看 "typings.json" 文件，您应该会看到 "es6-shim" 的条目。您应该看到类似这样的内容（如果不存在，请在您的根目录中创建文件并将其放入其中）。
{
"globalDependencies": {
"es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#7de6c3dd94feaeb21f20054b9f30d5dabc5efabd"
}
}
为了让 VS Code 使用 "es6-shim"，需要安装它。 typings 包已经安装，但 typing 本身还没有安装在项目中。在工具栏上的 VS Code 中执行此操作 select "View -> Integrated Terminal" (ctrl + `)。您将看到一个命令提示符。如果您全局安装了 Typings，则可以输入此命令。
typings install
否则（本地安装）
node_modules\.bin\typings install
如果其中任何一个给你一个错误，那么 Typings 没有安装，你需要确保你的 package.json 仍然有依赖性 "typings"。如果是，则执行 "npm install"，然后重复上述步骤。
之后，重新启动 VS Code，错误应该不会再存在了！
您还应该将 tsconfig.json 文件 "exclude" 部分更新为
"exclude": [
"node_modules",
"typings/globals",//<----------
"typings/index.d.ts"
]
这个错误是什么时候出现的？是在编译时还是在 运行 你的 Electron 应用程序时？另外，您使用的是什么版本的 TypeScript？您使用的是哪个版本的 Angular2 beta？您的 "package.json" 文件会告诉您这些事情。
如果这发生在编译时，则意味着 TypeScript 不知道数组的 "find" 方法，这很奇怪。 TypeScript 不知道你的 webpack 东西，所以升级你的 TypeScript 版本可能会做到（我是 运行 '1.8.10' 并且它识别 'find' 方法）。
如果这发生在 Electron 运行 内部，可能有几件事。
可能是 webpack 没有加载 shim，您应该可以通过打开开发人员工具并在“网络”选项卡下查看是否看到对 shim 的请求来查看是否属实。如果你没有看到它，那么你就知道这是一个 webpack 问题。
可能是 es6-shim 缺少其中的 'find' 方法。最好使用替代方案 shim，在 link 中你会想要使用 /client/shim.min.js 文件。
可能是您使用的 angular beta 版本没有在 es6-shim 中定义。这会很奇怪，但你可以自己升级到最新版本的 Angular2，在他们使用 SystemJS 调用 bootstrap 的示例中，因此你可能需要将其转换为 webpack。我是 运行 @angular 版本 '2.0.0-rc.4' 没有垫片，我可以在运行时使用 'find' 方法。
还认为它可能是你 运行 的 Electron 版本（因为我不需要 shim），我是 运行 this 版本的 Electron。
我正在尝试使用 angular2 在 electron 中制作一个小程序，在我尝试在数组上使用 find 函数之前它运行良好。那里，我得到一个错误
Property 'find' does not exist on type 'MyType[]'.
作为一个新手，看不懂报错，于是稍微搜索了一下，发现electron使用的js引擎理解ES5而不是ES6。
这就是为什么 se 在 angular2 中使用 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')
]
};
我想，我的项目配置有误。但我找不到它。
提前致谢。
更新 1
以下是 package.json 文件的内容：
{
"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"
}
}
更新 2
这里也是 class 错误：
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));
}
}
更新 所以你给了我一个我忽略的线索，这让我陷入了一个兔子洞，花了一点时间才走出去。我什至构建了一个 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 Code 之间的区别在于，在 plunker 中，SystemJS 实际上执行 TypeScript 转译，而 VS Code 使用 TypeScript 编译器本身执行转译。
但是，您在评论中指出您在执行转译时没有收到此错误。在您尝试转换 .ts 代码之前，您在 VS Code "Problems" window 中看到了这个错误。
我觉得很奇怪，所以我回到了基础。我创建了一个新的 VS Code 项目，并创建了一个简单的界面并实例化了一个数组。然后我尝试在该数组上执行 .find() 。 VS Code 立即在问题 window 中通知我该方法不存在。 VS 代码问题 window 没有使用 TypeScript 来识别问题。
VS Code 实际上使用了另一个名为 Typings 的包，打字允许 VS Code 扩展其自身在解析代码和提供智能感知方面的能力。在你的 package.json(devDependencies) 文件和 tsconfig.json(exclude section) 文件中已经有提示你有 Typings.
这意味着您已安装工具，但尚未配置项目。我敢打赌，如果您查看 "typings.json" 文件，您应该会看到 "es6-shim" 的条目。您应该看到类似这样的内容（如果不存在，请在您的根目录中创建文件并将其放入其中）。
{
"globalDependencies": {
"es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#7de6c3dd94feaeb21f20054b9f30d5dabc5efabd"
}
}
为了让 VS Code 使用 "es6-shim"，需要安装它。 typings 包已经安装，但 typing 本身还没有安装在项目中。在工具栏上的 VS Code 中执行此操作 select "View -> Integrated Terminal" (ctrl + `)。您将看到一个命令提示符。如果您全局安装了 Typings，则可以输入此命令。
typings install
否则（本地安装）
node_modules\.bin\typings install
如果其中任何一个给你一个错误，那么 Typings 没有安装，你需要确保你的 package.json 仍然有依赖性 "typings"。如果是，则执行 "npm install"，然后重复上述步骤。
之后，重新启动 VS Code，错误应该不会再存在了！
您还应该将 tsconfig.json 文件 "exclude" 部分更新为
"exclude": [
"node_modules",
"typings/globals",//<----------
"typings/index.d.ts"
]
这个错误是什么时候出现的？是在编译时还是在 运行 你的 Electron 应用程序时？另外，您使用的是什么版本的 TypeScript？您使用的是哪个版本的 Angular2 beta？您的 "package.json" 文件会告诉您这些事情。
如果这发生在编译时，则意味着 TypeScript 不知道数组的 "find" 方法，这很奇怪。 TypeScript 不知道你的 webpack 东西，所以升级你的 TypeScript 版本可能会做到（我是 运行 '1.8.10' 并且它识别 'find' 方法）。
如果这发生在 Electron 运行 内部，可能有几件事。
可能是 webpack 没有加载 shim，您应该可以通过打开开发人员工具并在“网络”选项卡下查看是否看到对 shim 的请求来查看是否属实。如果你没有看到它，那么你就知道这是一个 webpack 问题。
可能是 es6-shim 缺少其中的 'find' 方法。最好使用替代方案 shim，在 link 中你会想要使用 /client/shim.min.js 文件。
可能是您使用的 angular beta 版本没有在 es6-shim 中定义。这会很奇怪，但你可以自己升级到最新版本的 Angular2，在他们使用 SystemJS 调用 bootstrap 的示例中，因此你可能需要将其转换为 webpack。我是 运行 @angular 版本 '2.0.0-rc.4' 没有垫片，我可以在运行时使用 'find' 方法。
还认为它可能是你 运行 的 Electron 版本（因为我不需要 shim），我是 运行 this 版本的 Electron。