Typescript throws Declaration角度2のコンポーネントで予想されるエラー

Question

私はtypescriptを使用して角度2のアプリケーションを構築しました。新しいコンポーネントコールsidekik.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はそれが

rumes@rumes-HP-ProBook-4530s:/var/www/html/angular2ts$ tsc --version 
message TS6029: Version 1.7.5 
rumes@rumes-HP-ProBook-4530s:/var/www/html/angular2ts$ npm start 

> angular2ts@1.0.0 start /var/www/html/angular2ts 
> concurrent "npm run tsc:w" "npm run lite" 

[0] 
[0] > angular2ts@1.0.0 tsc:w /var/www/html/angular2ts 
[0] > tsc -w 
[0] 
[1] 
[1] > angular2ts@1.0.0 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) 

ことができ、誰を示し始めますこれで私を助けてください？

Answer 1

、それはまた、角度によってブラウザにスローされた例外として浮上しているが、私は、（Typescript Declaration expectedはTSコンパイルに放出された）同じ問題を抱えていた：

No Directive annotation found on [Errant Module]

をこれが私の仕事：

を@Component();（sidekik.component.ts）の末尾にあるセミコロンを削除してください。

簡単な説明はdecorat orsはの式で、関数を返します。つまり、デコレータはステートメントではありません。ステートメントは、コンパイラに何かをさせるよう指示し、セミコロン（または改行）を停止する必要があります。式は値を返します。

デコレーターはステートメントではないので、セミコロンで終わらないようにしてください。可能であれば、JSエンジンを書く人には難しくなります（これは推測です）。

デコレータの詳細については、hereをご覧ください。

Answer 2

問題は、SideKikComponentクラスから@Component（）を分離するセミコロンです。 @Componentはそれに続くクラスに付けられた注釈です。クラスはそれに従わなければなりません。 @Component（）がファイルの最下部になるようにセミコロンとエクスポートされたクラスを削除すると、@Componentはクラスを期待するので、まったく同じエラーが発生します。

"@Componentは、AnnotationにアタッチされているクラスがコンポーネントであることをAngularに通知する注釈です。 - http://blog.thoughtram.io/angular/2015/05/03/the-difference-between-annotations-and-decorators.html