Question

我正在学习角度知识，选择了一门视频课程和一本pdf书，现在我对“导出”关键字的使用感到困惑...

第一个课程（pdf）使用Angular 5和Visual Studio2017。

第二课（视频）使用Angular 6和Visual Studio Code。

以下主题讨论导出，以及为什么我们需要这样的定义：

Why does Typescript use the keyword "export" to make classes and interfaces public?

这两个课程中的一个例子表明了我的困惑……我只需要朝正确的方向快速踢一下即可克服这一小障碍。

Visual Studio 2017

示例项目使我在ClientApp / App文件夹内创建一个接口文件夹，并在其中放置一个接口“ answer.ts”。这没有关键字“ export”。

interface IAnswer {
    Id: number;
    QuestionId: number;
    Text: string;
    Value: number;
}

然后在组件中使用它而不导入它。看一下loadData函数this.http.get<IAnswer[]>(url).subscribe。使用的是IAnswer，它在组件中没有export关键字，也没有import。

import { Component, Inject, Input, OnChanges, SimpleChanges } from "@angular/core";
import { Router } from "@angular/router";
import { HttpClient } from "@angular/common/http";

@Component({
    selector: "answer-list",
    templateUrl: "./answer-list.component.html",
    styleUrls: ["./answer-list.component.css"]
})

export class AnswerListComponent implements OnChanges {
    @Input() question: IQuestion;
    answers: IAnswer[];
    title: string;

    constructor(private http: HttpClient,
        @Inject("BASE_URL") private baseUrl: string,
        private router: Router) {

        this.answers = [];
    }

    ngOnChanges(changes: SimpleChanges) {
        if (typeof changes['question'] !== "undefined") {
            //alert(1);
            // retrieve the question variable change info
            var change = changes['question'];

            // only perform the task if the value has been changed
            if (!change.isFirstChange()) {
                // execute the Http request and retrieve the result
                this.loadData();
            }
        }
    }

    loadData() {
        var url = this.baseUrl + "api/answer/All/" + this.question.Id;
        this.http.get<IAnswer[]>(url).subscribe(res => {
            this.answers = res;
        }, error => console.error(error));
    }
}

Visual Studio代码

如果我不使用export关键字创建类，则无法在任何组件或服务中使用它，也需要导入。在src / app / recipes文件夹中放置了一个cheme.model.ts。

export class Recipe {
    constructor(public name: string, public description: string, public imagePath: string){
    }
}

然后，在此示例中，我有一个从Firebase获取/发布/推送数据的服务，因此省略了与此问题无关的代码。

import { Recipe } from "../../recipes/recipe.model";

@Injectable()
export class DataStorageService {
    getRecipes(){
        //get a authentication token
        const token = this.authService.getToken();
        const tokenQuery = '?auth=' + token

        this.http.get(this.recipesNode + tokenQuery)
        .pipe(
            map(
                (response: Response) => {
                    //we saved array of recipes 
                    const recipes: Recipe[] = response.json();
                    return recipes;
                }
            )
        )
        .subscribe(
            (recipes: Recipe[]) => {
                this.recipeService.setRecipes(recipes);
            }
        );
    }
}

Answer 1

这取决于项目中的集合compilerOptions。您可以强制系统期望或不期望export。通常，根据是否使用WebPack，Browserify或其他模块化加载程序还是仅要将给定的* .ts-文件转换为* .js-文件的问题来做出此决定。请看看这篇文章：

TypeScript exports is not defined

Angular项目中带有或不带有export关键字的类和接口

1 个答案: