編譯TypeScript時出現Ionic 2語法錯誤

Question

按照這里的教程，我在編譯我的打字稿代碼時遇到語法錯誤。

這是錯誤：

/app/pages/list/list.js模塊構建失敗：SyntaxError：/focus/projects/ionic-todo/app/pages/list/list.js：意外的令牌（10:17）8 | 9 | 導出類ListPage {

10 | 構造函數（nav：NavController）{| ^ 11 | this.nav = nav; 12 | 13 | this.items = [

如你所見，它似乎認為結腸有問題。 但是，如果刪除冒號，則會在空格中出現類似的錯誤。

這是完整的代碼：

 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，您可以獲得類支持，但不支持類型支持（例如，在構造函數/方法中）。

我看了一下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});
  }
}

Answer 2

當你在.js文件中寫入時，你將不得不給出靜態塊即

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

獲取nav類型，即在contructor參數內。

但是在.ts文件中，你不需要定義靜態塊，你可以在構造函數中簡單地定義它：

constructor (nav : NavController) {}

你可以把它想象成nav是一個變量而NavController就是這個類型。

這就是你得到錯誤的原因。 您在javascript（.js）文件中使用typescript（.ts）語法。

因此，下次您在觀看教程時，請嘗試查看教師是否正在使用.js文件或.ts文件:-)

希望能幫助到你。