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

Ionic 2 Syntax Error While Compiling TypeScript

本文关键字：语法 错误 Ionic TypeScript 编译      更新时间：2023-09-26

按照这里的教程进行操作时，我在编译打字稿代码时遇到了语法错误。

这是错误：

/

app/pages/list/list.js 模块构建失败：语法错误： /focus/projects/ionic-todo/app/pages/list/list.js：意外的令牌 （10：17） 8 | 9 |导出类列表页 {

10 | constructor（nav： NavController）{ | ^ 11 | this.nav = nav; 12 | 13 | 此项 = [

如您所见，它似乎认为冒号有问题。但是，如果您删除冒号，则在空格所在的位置会出现类似的错误。

以下是完整的代码：

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});
  }
}

任何想法可能导致这种情况发生？

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

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

我看了一下 Ionic2 生成器模板，它们似乎是 ES6。请参阅此链接：

  • 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});
  }
}

当你在文件中写入.js你必须给出静态块，即

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

获取 nav 的类型，即在构造器参数内。

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

constructor (nav : NavController) {}

您可以将其视为nav变量，NavController是类型。

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

因此，下次当您观看教程时，请尝试查看导师是否正在使用.js文件或.ts文件：-）

希望对您有所帮助。

相关文章：