CODEWITHSUNDEEP
javascriptangulartypescriptangular-cliangular10
Goku
Goku

Reputation: 1663

Do all TypeScript classes that intend to be used by other classes need to be explicitly exported and imported?

Do all classes that intend to be used by other classes need to be explicitly exported and imported?

I currently have a project that I upgraded from Angular 8 to Angular 10 and noticed a lot of errors THAT WERE NOT THERE BEFORE that may be related to either poor design or a faulty compiler (I assume it's bad design I'm a novice at TypeScript, maybe the new compilers are pickier?). For every class that I was referencing that didn't use an export/import statement, I now get the errors shown below after upgrading my project to Angular 10. This could be fixed by making every single class have the keyword "export" on it, but that would mean I'm explicitly exporting with the intention of importing where needed. However, these classes were intended to be in the global scope of the application and I wanted every other module to see these without having to explicitly import them since these helper classes and types are used everywhere. However, it doesn't look like what I want to do is possible after noticing these errors. So in summary- do I need to explicitly export and import all the classes that I intend to reference?

Old code

 class Person {
        public first:string;
        public last:string;
        constructor(
            first:string,
            last:string,
            )
        {
            this.first = first;
            this.last = last;
        }
        get fullName(): string {
            return this.first + ' ' + this.last;
        }
    }

New code

export class Person { //I would rather not use the export keyword since Person should be used everywhere
    public first:string;
    public last:string;
    constructor(
        first:string,
        last:string,
        )
    {
        this.first = first;
        this.last = last;
    }
    get fullName(): string {
        return this.first + ' ' + this.last;
    }
}

Referencing Class:

// import { Person } from '../sharedTypes/person'; //needed if I use the export in the Person class
export class PurchaseOrder {
    public name: string;
    public poChargeNumber: ChargeNumber;
    public siteLocation: Address;
    public deliverTo: Person;
    public vendor: Vendor;
    public lineItems: LineItem[];
    constructor(
        chargeNum: ChargeNumber,
        siteLocation: Address,
        deliverTo: Person,
        lineItems: LineItem[],
        )
    {
        this.poChargeNumber = chargeNum;
        this.siteLocation = siteLocation;
        this.deliverTo = deliverTo;
        if (lineItems === null || lineItems === undefined)
            this.lineItems = new Array<LineItem>();
        else
            this.lineItems = lineItems;
    }
}

Errors:

src/app/purchaseorder-doc/purchaseOrder.ts:13:20 - error TS2304: Cannot find name 'ChargeNumber'.

13         chargeNum: ChargeNumber,
                      ~~~~~~~~~~~~
src/app/purchaseorder-doc/purchaseOrder.ts:14:23 - error TS2304: Cannot find name 'Address'.

14         siteLocation: Address,
                         ~~~~~~~
src/app/purchaseorder-doc/purchaseOrder.ts:15:20 - error TS2304: Cannot find name 'Person'.

m15         deliverTo: Person,

Upvotes: 1

Views: 194

Answers (1)

code-gorilla
code-gorilla

Reputation: 2418

Yes, you should definitely use the import / export mechanism.

In the old days, JavaScript developers would write code that put variables / classes into the global scope, e.g. like this:

window.SomeClass = SomeClass

There is also the infamous implicit global, that is caught by strict mode:

// Globally available in the window!
myVar = 'my-Value'

With frameworks like Angular available today, I would definitely consider this a bad practice and only resort to it in special cases where no other solution is available.

Upvotes: 1

Related Questions