Question

我正在尝试使用angular2在电子中制作一个小程序，它工作得很好，直到我尝试在数组上使用find函数。在那里，我收到了一个错误

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

作为一个新手，我无法理解错误，所以我搜索了一下，我发现电子使用的js引擎理解ES5而不是ES6。

这就是为什么要使用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

以下是包含错误的类：

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 Code之间的区别在于，在plunker中，SystemJS实际上执行了TypeScript转换，其中VS Code使用TypeScript编译器本身执行转换。

但是，您在评论中指出，在执行transile时，您没有收到此错误。您在VS Code＆＃34; Problems＆＃34;中看到了这个错误。在您尝试转换.ts代码之前的窗口。

我发现这很奇怪，所以我回到了基础。我创建了一个新的VS Code项目，我创建了一个简单的接口并实例化了一个Array。然后我尝试在该Array上执行.find（）。 VS Code立即在Problems窗口中通知我该方法不存在。 VS Code Problem窗口不使用TypeScript来识别问题。

VS Code实际上正在使用另一个名为Typings的包，打字允许VS Code扩展它自己解析代码和提供智能感知的能力。你的package.json（devDependencies）文件和tsconfig.json（exclude section）文件中已有提示，你也有打字。

这意味着您已安装工具但未配置项目。我打赌，如果你看看你的＆＃34; typings.json＆＃34;文件你应该看到＆＃34; es6-shim＆＃34;的条目。您应该看到类似这样的内容（如果不存在，请在您的根目录中创建该文件并将其放入其中）。

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

为了让VS Code使用＆＃34; es6-shim＆＃34;它需要安装。打字包已经安装，但打字本身还没有安装在项目中。要在工具栏上的VS Code中执行此操作，请选择＆＃34;查看 - ＆gt;集成终端＆＃34; （ctrl +`）。您将看到命令提示符。如果您在全局安装了Typings，则可以输入此命令。

typings install

否则（它在本地安装）

node_modules\.bin\typings install

如果其中任何一个给你一个错误，那么就没有安装Typings，你需要确保你的package.json仍然具有依赖关系＆＃34; typings＆＃34;。如果是，请执行＆＃34; npm install＆＃34;，然后重复上述步骤。

之后，重新启动VS Code，错误不再存在！

此外，您应该更新您的tsconfig.json文件＆＃34;排除＆＃34;

部分

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

此错误何时发生？是在编译时还是在运行Electron应用程序时？您还使用什么版本的TypeScript？你使用的是什么版本的Angular2 beta？你的＆＃34; package.json＆＃34;文件会告诉你这些事情。

如果在编译时发生这种情况，则意味着TypeScript不知道＆＃34; find＆＃34;数组的方法，这很奇怪。 TypeScript并不了解您的webpack内容，因此升级您的TypeScript版本可能会这样做（我正在运行＆＃39; 1.8.10＆＃39;并且它识别＆＃39; find＆＃39;方法）。< / p>

如果在Electron运行中发生这种情况，可能会出现一些问题。

可能是webpack没有加载垫片，您应该能够通过打开开发人员工具并查看“网络”选项卡并查看是否看到垫片请求来查看是否属实。如果你没有看到它，那么你知道这是一个webpack问题。

可能是es6-shim错过了＆＃39;发现＆＃39;里面的方法。在您希望使用/client/shim.min.js文件的链接中，最好使用替代shim。

它可能是您使用的角度测试版的版本没有在es6-shim中定义的版本。这可能很奇怪，但是您可以自己升级Angular2的最新版本，在他们使用SystemJS来调用bootstrap的示例中，因此您可能需要将其转换为webpack。我正在运行@angular版本＆＃39; 2.0.0-rc.4＆＃39;没有垫片，我可以使用＆＃39;找到＆＃39;运行时的方法。

还认为它可能是您正在运行的Electron版本（因为我不需要垫片），我正在运行Electron的this版本。

电子+ Angular2 + es6-shim。数组没有查找功能

1 个答案: