Classes and Interfaces with or without export keyword in Angular project

Question

I am learning angular, picked a video course and a pdf book and now i am confused with respect to "export" keyword use...

Course one (pdf) is using Angular 5 and visual studio 2017.

Course two (video) is using Angular 6 and visual studio Code.

Following thread talks about export and why we need it so kind of good with the definition:

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

An example from both the courses to show my confusion... I just need a quick kick in the right direction to overcome this small hurdle.

Visual Studio 2017

Example project made me create an interface folder inside ClientApp/App folder and inside it placed one interface "answer.ts". This is without the keyword "export".

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

Then in the component, used it without importing it. Take a look at the loadData function, this.http.get<IAnswer[]>(url).subscribe. IAnswer is being used, it is without the export keyword and no import in the component.

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 Code

Here if i don't create a class with export keyword then i can't use it in any component or a service, import is needed as well. Placed a recipe.model.ts in src/app/recipes folder.

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

Then i have a service which gets/post/push data from/to Firebase in this example, so omitting un-related code to this question.

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

It depends on the set compilerOptions in your project. You can force the system to expect or not expect export. Usually this decision is made according to the question whether you use WebPack, Browserify or other modular loaders or you just want to transpile the given *.ts-files into *.js-files. Please, have a look at this post:

TypeScript exports is not defined