Currently, I am delving into the world of Angular. I have taken up a video course and also referred to a PDF book, but I find myself perplexed when it comes to understanding the usage of the "export" keyword...
The PDF course focuses on Angular 5 and utilizes Visual Studio 2017.
On the other hand, the video course covers Angular 6 and uses Visual Studio Code.
I recently came across a discussion on the importance of the export keyword in TypeScript, which provided some insights:
Why does Typescript use the keyword "export" to make classes and interfaces public?
To illustrate my confusion, here are examples from both courses that have left me seeking clarity... Any guidance to steer me in the right direction would be greatly appreciated.
Visual Studio 2017
In one of the projects, I was required to create an interface folder within the ClientApp/App directory and place an interface named "answer.ts" inside it. Surprisingly, this interface did not include the "export" keyword.
interface IAnswer {
Id: number;
QuestionId: number;
Text: string;
Value: number;
}
Interestingly, in the component file, I utilized this interface without importing it. For instance, in the loadData function,
this.http.get<IAnswer[]>(url).subscribeimport { 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") {
var change = changes['question'];
if (!change.isFirstChange()) {
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 Code
In contrast, when working with Visual Studio Code, it became evident that creating a class with the 'export' keyword is crucial for its accessibility in components or services, requiring explicit import statements. One such scenario involved creating a 'recipe.model.ts' file within the src/app/recipes directory.
export class Recipe {
constructor(public name: string, public description: string, public imagePath: string){
}
}
Furthermore, I had a service responsible for handling data operations with Firebase. Although the implementation details are omitted here, it's worth noting that proper usage of exports and imports was pivotal in this context.
import { Recipe } from "../../recipes/recipe.model";
@Injectable()
export class DataStorageService {
getRecipes(){
const token = this.authService.getToken();
const tokenQuery = '?auth=' + token
this.http.get(this.recipesNode + tokenQuery)
.pipe(
map(
(response: Response) => {
const recipes: Recipe[] = response.json();
return recipes;
}
)
)
.subscribe(
(recipes: Recipe[]) => {
this.recipeService.setRecipes(recipes);
}
);
}
}