TypeScript/Angular2:rxjs错误TS1138、TS1005、TS1128

我正在学习Angular 2教程，当我运行

gulp dev

时，我会在终端中看到这些错误。我使用的是Typescript 2.0.3：

node_modules/rxjs/operator/toPromise.d.ts(8,38): Error TS1138: Parameter declaration expected.
node_modules/rxjs/operator/toPromise.d.ts(8,42): Error TS1005: ';' expected.
node_modules/rxjs/operator/toPromise.d.ts(8,57): Error TS1005: '(' expected.
node_modules/rxjs/operator/toPromise.d.ts(8,58): Error TS1005: ';' expected.
node_modules/rxjs/operator/toPromise.d.ts(8,70): Error TS1005: '(' expected.
node_modules/rxjs/operator/toPromise.d.ts(9,38): Error TS1138: Parameter declaration expected.
node_modules/rxjs/operator/toPromise.d.ts(9,42): Error TS1005: ';' expected.
node_modules/rxjs/operator/toPromise.d.ts(9,57): Error TS1109: Expression expected.
node_modules/rxjs/operator/toPromise.d.ts(9,70): Error TS1005: ';' expected.
node_modules/rxjs/operator/toPromise.d.ts(9,86): Error TS1005: ';' expected.
node_modules/rxjs/operator/toPromise.d.ts(9,87): Error TS1128: Declaration or statement expected.
node_modules/rxjs/operator/toPromise.d.ts(9,99): Error TS1005: '(' expected.

在浏览器中，angular应用程序不会加载。有人能解释一下发生了什么事吗

编辑：这些是

node\u modules/rxjs/operator/toPromise.d.ts

export declare function toPromise<T>(this: Observable<T>): Promise<T>;
export declare function toPromise<T>(this: Observable<T>, PromiseCtor: typeof Promise): Promise<T>;

这是调用

weather.service.ts

export declare function toPromise<T>(this: Observable<T>): Promise<T>;
export declare function toPromise<T>(this: Observable<T>, PromiseCtor: typeof Promise): Promise<T>;

weather.component.ts

import {Injectable} from "@angular/core";
import {Http} from "@angular/http";
import "rxjs/add/operator/toPromise";

interface WeatherApiResponse {
    query: {
        count: number;
        created: string;
        lang: string;
        results: {
            channel: {
                item: {
                    condition: {
                        code: string;
                        temp: string
                    }
                }
            }
        }
    };
}

export interface WeatherInformation {
    city: string;
    code: number;
    temperature: number;
}

export interface City {
    name: string;
    imageSrc: string;
    woeId: string;
}

@Injectable()
export class WeatherService {
    cities = [
        {name: "Bogota", imageSrc: "img/bogota.jpg", woeId: "368148"}
    ];

    constructor(private http: Http) {}

    getWeather(woeId: string) {
        const url = this.generateWeatherUrl(woeId);
        return this.http.get(url).toPromise()
            .then(x => {
                const apiResponse = x.json() as WeatherApiResponse;
                const weather = apiResponse.query.results.channel.item.condition;
                return {
                    city: this.getCityName(woeId),
                    code: Number(weather.code),
                    temperature: Number(weather.temp)
                } as WeatherInformation;
            });
    }

    private generateWeatherUrl(woeId: string) {
        return `http://localhost:8001/api/weather/${woeId}`;
    }

    private getCityName(woeId: string) {
        const matches = this.cities.filter(x => x.woeId === woeId);
        return matches.length === 1 ? matches[0].name : undefined;
    }
}

ngOnInit() {
    this.route.params.subscribe(params => {
        const woeId = params["woeId"];
        this.weatherService.getWeather(woeId)
            .then(x => this.weather = x);
    });
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": true,
    "noImplicitAny": true
  },
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
}

---

事实证明，我需要将.ts转换为.js，并且我假设VisualStudio代码会自动为我执行此操作。对于有相同问题的人，请转至并遵循步骤2

步骤2：创建tasks.json 下一步是设置任务配置。要执行此操作，请打开 带有⇧⌘P并键入配置任务运行程序，按 输入以选择它

选择TypeScript-tsconfig.json。这将创建一个

tasks.json

文件 在工作区

.vscode

文件夹中

tasks.json文件的内容如下所示：

{
  // See http://go.microsoft.com/fwlink/?LinkId=733558
  // for the documentation about the tasks.json format
  "version": "0.1.0",
  "command": "tsc",
  "isShellCommand": true,
  "args": ["-p", "."],
  "showOutput": "silent",
  "problemMatcher": "$tsc"
}

在封面下，我们将

tsc

解读为外部任务执行者 只公开一项任务：将TypeScript文件编译成 JavaScript文件。我们运行的命令是：

tsc-p.

对于那些遵循Levi Botelho的Packt Angular 2项目并采用建议的gulp配置的用户，以及对天气应用程序有相同问题的用户，您可以通过更新依赖项（@Angular）来解决

它使用以下依赖项：

  "dependencies": {
    "@angular/common": "~2.1.1",
    "@angular/compiler": "~2.1.1",
    "@angular/core": "~2.1.1",
    "@angular/forms": "~2.1.1",
    "@angular/http": "~2.1.1",
    "@angular/platform-browser": "~2.1.1",
    "@angular/platform-browser-dynamic": "~2.1.1",
    "@angular/router": "~3.1.1",
    "@angular/upgrade": "~2.1.1",
    "angular-in-memory-web-api": "~0.1.13",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.8",
    "systemjs": "0.19.39",
    "zone.js": "^0.6.25",
    "compression": "^1.6.2",
    "es6-shim": "^0.35.1",
    "express": "^4.14.0",
    "rxjs": "5.0.0-beta.12"
  } 

签出gulp.js文件，因为视频中的文件与您可以下载的代码中的文件不同

const argv = require("yargs").argv;
const browserify = require("browserify");
const browserSync = require("browser-sync").create();
const buffer = require("vinyl-buffer");
const cache = require("gulp-cached");
const concat = require("gulp-concat");
const exec = require('child_process').exec;
const gulp = require("gulp");
const gulpIf = require("gulp-if");
const htmlmin = require("gulp-htmlmin");
const inject = require("gulp-inject");
const sass = require("gulp-sass");
const source = require("vinyl-source-stream");
const sourcemaps = require("gulp-sourcemaps");
const tsify = require("tsify");
const tslint = require("gulp-tslint");
const uglify = require("gulp-uglify");
const watchify = require("watchify");

const rootBuildPath = "./dist/";
const cssBundleName = "site.css";
const cssBundleBuildPath = rootBuildPath + "/css/" + cssBundleName;
const cssSource = "./scss/site.scss";
const cssBuildPath = rootBuildPath + "css";
const fontSource = "./bower_components/weather-icons/font/**";
const fontBuildPath = rootBuildPath + "font";
const htmlSource = "./index.html";
const imgSource = "./img/*.jpg";
const imgBuildPath = "./dist/img";
const jsBundleName = "bundle.js";
const jsBundleBuildDirectory = rootBuildPath + "app";
const jsBundleBuildPath = jsBundleBuildDirectory + "/bundle.js";
const jsSourceDirectory = "./app";
const jsEntryPoint = jsSourceDirectory + "/main.ts";
const jsSource = jsSourceDirectory + "/**/*.ts";
const libSource = [
    "node_modules/es6-shim/es6-shim.min.js",
    "node_modules/es6-shim/es6-shim.map",
    "node_modules/zone.js/dist/zone.min.js",
    "node_modules/reflect-metadata/Reflect.js",
    "node_modules/reflect-metadata/Reflect.js.map",
];
const libBuildPath = rootBuildPath + "/lib";
const serverSource = "./server.js";
const templatesSource = "./app/**/*.html";
const templatesBuildPath = rootBuildPath + "app";
const typings = "./typings/index.d.ts";

function logError(err) {
    console.error(err.message);
    this.emit("end");
}

function shouldMinify() {
    return argv.release;
}

gulp.task("lint", function () {
    gulp.src(jsSource)
        .pipe(tslint({
            formatter: "verbose"
        }))
        .pipe(tslint.report())
        .on("error", logError);
});

var browserifyOptions = {
    debug: !shouldMinify(),
    entries: [jsEntryPoint, typings],
    plugin: [tsify]
};

if (argv.watch) {
    browserifyOptions.cache = {};
    browserifyOptions.packageCache = {};
    browserifyOptions.plugin.push(watchify);
}

var browserifyInstance = browserify(browserifyOptions);

gulp.task("js", ["lint"], function () {
    return browserifyInstance
        .bundle()
        .on("error", logError)
        .pipe(source(jsBundleName))
        .pipe(buffer())
        .pipe(sourcemaps.init({loadMaps: true}))
        .pipe(gulpIf(shouldMinify(), uglify().on("error", logError)))
        .pipe(sourcemaps.write("./"))
        .pipe(gulp.dest(jsBundleBuildDirectory));
});

gulp.task("css", function () {
    return gulp.src(cssSource)
        .pipe(concat(cssBundleName))
        .pipe(sourcemaps.init())
        .pipe(sass({outputStyle: shouldMinify() ? "compressed" : "nested"}))
        .pipe(sourcemaps.write("."))
        .pipe(gulp.dest(cssBuildPath))
        .pipe(browserSync.stream());
});

gulp.task("font", function () {
    return gulp.src(fontSource)
        .pipe(gulp.dest(fontBuildPath));
})

gulp.task("img", function () {
    return gulp.src(imgSource)
        .pipe(gulp.dest(imgBuildPath));
});

gulp.task("lib", function () {
    return gulp.src(libSource)
        .pipe(gulp.dest(libBuildPath));
});

gulp.task("templates", function () {
    return gulp.src(templatesSource)
        .pipe(gulp.dest(templatesBuildPath));
});

gulp.task("html", ["js", "css"], function () {
    return gulp.src(htmlSource)
        .pipe(inject(gulp.src([jsBundleBuildPath, cssBundleBuildPath], {read: false}), {ignorePath: "dist"}))
        .pipe(gulpIf(shouldMinify(), htmlmin({collapseWhitespace: true})))
        .pipe(gulp.dest(rootBuildPath));
});

gulp.task("server", function () {
    return gulp.src(serverSource)
        .pipe(gulp.dest(rootBuildPath));
})

gulp.task("default", ["font", "html", "img", "lib", "templates", "server"]);

gulp.task("html-watch", ["html"], () => browserSync.reload());
gulp.task("js-watch", ["js"], () => browserSync.reload());
gulp.task("templates-watch", ["templates"], () => browserSync.reload());

gulp.task("dev", ["default"], function () {
    exec("node dist/server", function (err, stdout, stderr) {
        console.log(stdout);
        console.error(stderr);
    });

    gulp.watch(htmlSource, ["html-watch"]);
    gulp.watch(jsSource, ["js-watch"]);
    gulp.watch(templatesSource, ["templates-watch"]);
    gulp.watch(cssSource, ["css"]);

    browserSync.init({
        port: 8001,
        proxy: "http://localhost:3011"
    });
});

---

如果您有其他问题，请下载代码以及与视频中不太一样的组件/服务。

哪个版本的

rxjs

？该文件的第8行和第9行是什么样子的？你是如何使用打字脚本的？（关于构建步骤的信息；即使有可用的

Typescript 2.0.3

，是否正在使用它？）我正在使用rxjs 5 beta，我输入了

npm install bower install typings install

，然后在保存.ts文件时，Visual Studio code会将其转换为一个附带的.js文件。第8行和第9行现在在我的问题中列出。具体来说是^5.0.0-beta。12@LesPaul你能展示一下如何用TypeScript编译它吗？我注意到Packt出版产品的一个趋势：由擅长编码的人编写代码，但不能有效地教授它如何工作或为什么工作，也不能提供有效的工具来帮助用户在应用程序不工作时排除故障。作为一名前教师，我正在向编程过渡，这让我感到沮丧，因为有些程序员在指导方面有多么糟糕。