當我使用另一個打字稿文件中的其他類時，angular2報告錯誤

Question

我導入另一個文件中的類，angular2無法通過編譯。 但是，如果我將類復制到同一文件中，則可以通過編譯。

錯誤信息如下：

/Users/SranLiu/Documents/code/angular/training-tracker/src/app/exercise-detail.component.ts（8,2）：鍵入'{id：number; 名稱：字符串； ExerciseSets：{id：number; num：數字； previousWeight：數字； weig ...”不能分配給“鍛煉”類型。 對象文字只能指定已知的屬性，而'exerciseSets'在'Exercise'類型中不存在。

錯誤信息的屏幕截圖

代碼如下：

第一個文件：

//exercise-detail.component.ts
import { Component } from '@angular/core';

import { Exercise } from './exercise';


let exercise: Exercise = {
    id: 1,
    name: 'bench press',
    exerciseSets: [{
        id: 1,
        num: 1,
        previousWeight: 0,
        weight: 10,
        reps: 12,
        isFinish: true
    },{
        id: 2,
        num: 2,
        previousWeight: 0,
        weight: 10,
        reps: 12,
        isFinish: false
    }]
};

@Component({
    selector: 'exercise-detail',
    template: `
       <table border='1'>
           <tr>
               <td>finish?</td>
               <td>{{exercise.exerciseSets[1].isFinish}}</td>
           </tr>
       </table>
    `
})
export class ExerciseDetailComponent {

    exercise = exercise;
}

第二檔：

//exercise.ts
export class ExerciseSet {
    id: number;
    num: number;
    previousWeight: number;
    weight: number;
    reps: number;
    isFinish: boolean;
}

export class Exercise {

    id: number;
    name: string;
    exerciseSets: ExerciseSet[];
}

如果我按如下所示將類從第二個文件復制到第一個文件，則它可以通過編譯並成功運行。

//exercise-detail.component.ts
import { Component } from '@angular/core';

export class ExerciseSet {
    id: number;
    num: number;
    previousWeight: number;
    weight: number;
    reps: number;
    isFinish: boolean;
}

export class Exercise {

    id: number;
    name: string;
    exerciseSets: ExerciseSet[];
}

let exercise: Exercise = {
    id: 1,
    name: 'bench press',
    exerciseSets: [{
        id: 1,
        num: 1,
        previousWeight: 0,
        weight: 10,
        reps: 12,
        isFinish: true
    },{
        id: 2,
        num: 2,
        previousWeight: 0,
        weight: 10,
        reps: 12,
        isFinish: false
    }]
};

@Component({
    selector: 'exercise-detail',
    template: `
       <table border='1'>
           <tr>
               <td>finish?</td>
               <td>{{exercise.exerciseSets[1].isFinish}}</td>
           </tr>
       </table>
    `
})
export class ExerciseDetailComponent {

    exercise = exercise;
}

我認為這個問題不是由於語法和邏輯。 也許我錯過了一些打字稿或角度規則，例如，如果我要在另一個文件中使用該類，則需要聲明或其他內容。 我只用打字稿幾天，所以有人有想法嗎？

Answer 1

如果使用“ npm start”使項目自動編譯，則可能遇到與我類似的問題。 由於npm似乎僅支持編譯現有文件，因此，如果您在npm工作期間創建新文件，則npm無法掃描新文件。

因此，我使用“ ng start”手動重新編譯項目，然后我的項目可以再次工作。