Typescript throws Объявление Ожидаемая ошибка с помощью Angular 2 компонента

Я создаю приложение angular 2, используя typescript, и я пытаюсь создать новый компонент callkik.component.ts и импортировать в app.component.ts, как это.

app.component.ts

import {Component} from 'angular2/core';
import {SideKikComponent} from './classes/sidekik.component';

interface Hero {
   id: number;
   name: string;
}

@Component({
  selector: 'my-app',
  directives:[
    SideKikComponent,
  ],
  templateUrl:'app/views/heros.html',
  styleUrls: ['app/css/site.css']
})

export class AppComponent { 
  public title = 'Tour of Heroes';
  public heroes =HEROS;
  public selectedHero: Hero;

  onSelect(hero: Hero) { 
    this.selectedHero = hero; 
  }
}

var HEROS: Hero[] =[
  {"id":1,"name":"SuperMan"},
  {"id":2,"name":"Captain America"},
  {"id":3,"name":"Thor"},
  {"id":4,"name":"Iorn Man"},
  {"id":5,"name":"Ant Man"}
];

sidekik.component.ts

import {Component, View} from 'angular2/core';

@Component({
  selector:'sidekik',
  events:['hit'],
  properties:['define'],
  template: `
    <sidekik (click) = "hit(define)"></sidekik>
`,

});

export class SideKikComponent{
    hit(define:string){
    console.log(define);
  }
}

а затем я запускаю запуск npm, он показывает

[email protected]:/var/www/html/angular2ts$ tsc --version
message TS6029: Version 1.7.5
[email protected]:/var/www/html/angular2ts$ npm start

> [email protected] start /var/www/html/angular2ts
> concurrent "npm run tsc:w" "npm run lite" 

[0] 
[0] > [email protected] tsc:w /var/www/html/angular2ts
[0] > tsc -w
[0] 
[1] 
[1] > [email protected] lite /var/www/html/angular2ts
[1] > lite-server
[1] 
[1] [BS] Access URLs:
[1]  ------------------------------------
[1]        Local: http://localhost:3000
[1]     External: http://192.168.1.7:3000
[1]  ------------------------------------
[1]           UI: http://localhost:3001
[1]  UI External: http://192.168.1.7:3001
[1]  ------------------------------------
[1] [BS] Serving files from: ./
[1] [BS] Watching files...
[0] app/classes/sidekik.component.ts(11,3): error TS1146: Declaration  expected.
[1] 15.12.17 16:04:28 304 GET /./index.html (Unknown - 29ms)
[0] 4:04:28 PM - Compilation complete. Watching for file changes.
[1] 15.12.17 16:04:28 304 GET /node_modules/angular2/bundles/angular2-polyfills.js (Unknown - 310ms)
[1] 15.12.17 16:04:28 304 GET /node_modules/systemjs/dist/system.src.js (Unknown - 310ms)
[1] 15.12.17 16:04:28 304 GET /node_modules/rxjs/bundles/Rx.js (Unknown - 310ms)
[1] 15.12.17 16:04:28 304 GET /node_modules/angular2/bundles/angular2.dev.js (Unknown - 310ms)
[1] [BS] File changed: app/classes/sidekik.component.js
[1] [BS] File changed: app/app.component.js
[1] [BS] File changed: app/boot.js
[1] 15.12.17 16:04:29 200 GET /app/boot.js (Unknown - 40ms)
[1] 15.12.17 16:04:30 200 GET /app/app.component.js (Unknown - 92ms)
[1] 15.12.17 16:04:30 200 GET /app/classes/sidekik.component.js (Unknown - 75ms)
[1] 15.12.17 16:04:31 304 GET /app/views/heros.html (Unknown - 227ms)
[1] 15.12.17 16:04:31 404 GET /favicon.ico (Unknown - 229ms)

может кто-нибудь помочь мне с этим?

Ответы

Ответ 1

У меня была та же проблема (Typescript Declaration expected, выпущенная при компиляции ts), хотя она также всплыла как исключение, брошенное в браузере Angular:

No Directive annotation found on [Errant Module]

Это сработало для меня:

Удалите точку с запятой в конце вашего @Component(); (sidekik.component.ts)

Простым объяснением является то, что декораторы - это выражения, возвращающие функцию. То есть декоратор не является выражением. Выражения говорят компилятору о том, что нужно делать, и нужны пол-двоеточия (или новые строки), которые нужно остановить. Выражения просто возвращают значения.

Таким образом, декораторы не должны заканчиваться точкой с запятой, потому что они не являются утверждениями, а потому, что если бы они могли, это сделало бы жизнь труднее для людей, которые пишут JS-движки (это предположение).

Подробнее об декораторах можно узнать здесь.

Ответ 2

Проблема заключается в том, что полуколонна разделяет @Component() от класса SideKikComponent. @Component - это аннотация, прикрепленная к классу, который следует за ним. Поэтому класс должен следовать за ним. Если вы удалите полуточек, а также экспортированный класс, чтобы @Component() находился в нижней части файла, вы получите ту же самую ошибку, потому что @Component ожидает класс.

"@Компонент - это аннотация, которая сообщает Angular, что класс, к которому прикреплена аннотация, является компонентом." - http://blog.thoughtram.io/angular/2015/05/03/the-difference-between-annotations-and-decorators.html