编译 TypeScript 时出现 Ionic 2 语法错误

Question

在学习教程 here 时，我遇到了在编译 typescript 代码时遇到语法错误的问题。

这是错误：

/app/pages/list/list.js Module build failed: SyntaxError: /focus/projects/ionic-todo/app/pages/list/list.js: Unexpected token (10:17) 8 | 9 | export class ListPage {

10 | constructor(nav: NavController){ | ^ 11 | this.nav = nav; 12 | 13 | this.items = [

如你所见，好像是觉得冒号有问题。但是，如果您删除冒号，则会出现类似的错误，其中 space 是

完整代码如下：

import {Page, NavController} from 'ionic-angular';
import {AddItemPage} from '../add-item/add-item';


@Page({
  templateUrl: 'build/pages/list/list.html'
})

export class ListPage {
  constructor(nav: NavController){
    this.nav = nav;

    this.items = [
      {'title': 'hi', 'description': 'hello'},
      {'title': 'sadf', 'description': 'asdfasdf'},
      {'title': 'asd', 'description': 'asdf'}
    ];
  }

  addItem()
  {
    this.nav.push(AddItemPage, {ListPage: this});
  }
}

知道是什么导致了这种情况吗？

Answer 1

你的错误让我认为你试图直接执行你的 TypeScript 代码而没有编译（预处理）或即时转译它。

我认为你的代码应该是 ES6 的。事实上，对于 ES6，你有 class 支持但没有类型支持（例如在构造函数/方法中）。

我查看了 Ionic2 生成器模板，它们似乎是 ES6。看到这个 link:

https://github.com/driftyco/ionic2-starter-tabs/tree/master/www

您可以这样调整您的代码：

import {Page, NavController} from 'ionic-angular';
import {AddItemPage} from '../add-item/add-item';


@Page({
  templateUrl: 'build/pages/list/list.html'
})

export class ListPage {
  static get parameters() {
    return [[NavController]];
  }

  constructor(nav){
    this.nav = nav;

    this.items = [
      {'title': 'hi', 'description': 'hello'},
      {'title': 'sadf', 'description': 'asdfasdf'},
      {'title': 'asd', 'description': 'asdf'}
    ];
  }

  addItem()
  {
    this.nav.push(AddItemPage, {ListPage: this});
  }
}

Answer 2

当您在 .js 文件中编写时，您必须提供静态块，即

static get parameters() {
    return [[NavController]];
  }

获取 nav 的类型，即构造函数参数中的类型。

但是在 .ts 文件中，你不需要定义静态块，你可以简单地在构造函数中定义它，如：

constructor (nav : NavController) {}

你可以认为nav是一个变量，NavController是类型。

这就是您收到错误的原因。您在 javascript(.js) 文件中使用了 typescript(.ts) 语法。

因此，下次您在观看教程时，请尝试查看导师使用的是 .js 文件还是 .ts 文件:-)

希望对您有所帮助。

编译 TypeScript 时出现 Ionic 2 语法错误

Ionic 2 Syntax Error While Compiling TypeScript

javascript

typescript

ionic2

angular