Is there a method to avoid the order of class definitions?

Question

Is there a method to avoid the order of class definitions?

As I dive deeper into TypeScript, I've noticed that no error is thrown when attempting to instantiate class B inside of class A.

class A {
    public static foo = new B();
}

class B { }

If we were to call A.foo after these definitions, it would clearly result in a failure since B does not precede A lexically. Removing the static keyword is out of the question (as it's necessary).

Am I left with manually rearranging the class definitions as my only option? Or are there clever workarounds available to avoid this issue? Could a module loader come to my rescue, or do I still need to explicitly specify the dependency order?

typescript

Answer 1

Answer №1

Your Typescript code

class ClassA {
    public static variableFoo = new ClassB();
}

class ClassB { }

When transpiled into JavaScript, it becomes:

var ClassA = (function () {
    function ClassA() {
    }
    ClassA.variableFoo = new ClassB();
    return ClassA;
}());
var ClassB = (function () {
    function ClassB() {
    }
    return ClassB;
}());

JavaScript processes file sequentially, so at the line

ClassA.variableFoo = new ClassB();

"ClassB" is undefined because it has not been parsed by JS yet.

This issue can be resolved by:

1) Reordering class declarations in the file

2) Extracting the "ClassB" code into a separate file and referencing it in the "ClassA" file using

2.1)

/// <reference path="ClassB.ts" />

This should be added at the top of the "ClassA.ts" file to explicitly define the dependency order

2.2) or by using require (import) directive and modular building

Update 1

Option 2.1:

ClassA.ts

/// <reference path="ClassB.ts" />
class ClassA {
    public static variableFoo = new ClassB();
}

ClassB.ts

export class ClassB { }

Option 2.2 (not tested exactly, but should work):

ClassA.ts

import { ClassB } from "./ClassB";

class ClassA {
    public static variableFoo = new ClassB();
}

export { ClassA };

ClassB.ts

class ClassB { }

export { ClassB };

Answer 2

Your Typescript code

class ClassA {
    public static variableFoo = new ClassB();
}

class ClassB { }

When transpiled into JavaScript, it becomes:

var ClassA = (function () {
    function ClassA() {
    }
    ClassA.variableFoo = new ClassB();
    return ClassA;
}());
var ClassB = (function () {
    function ClassB() {
    }
    return ClassB;
}());

JavaScript processes file sequentially, so at the line

ClassA.variableFoo = new ClassB();

"ClassB" is undefined because it has not been parsed by JS yet.

This issue can be resolved by:

1) Reordering class declarations in the file

2) Extracting the "ClassB" code into a separate file and referencing it in the "ClassA" file using

2.1)

/// <reference path="ClassB.ts" />

This should be added at the top of the "ClassA.ts" file to explicitly define the dependency order

2.2) or by using require (import) directive and modular building

Update 1

Option 2.1:

ClassA.ts

/// <reference path="ClassB.ts" />
class ClassA {
    public static variableFoo = new ClassB();
}

ClassB.ts

export class ClassB { }

Option 2.2 (not tested exactly, but should work):

ClassA.ts

import { ClassB } from "./ClassB";

class ClassA {
    public static variableFoo = new ClassB();
}

export { ClassA };

ClassB.ts

class ClassB { }

export { ClassB };

Is there a method to avoid the order of class definitions?

Answer №1

Update 1

Similar questions

What are the downsides of utilizing a global function over a private static method in Typescript?

The seamless pairing of Cucumber and Playwright: Cucumber's inability to retain cookies results in a login attempt with every scenario

Angular getElementById is a useful method for accessing and manipulating elements

Storing file paths as string variables in Angular: a quick guide

An error has occurred due to a syntax issue with the unexpected

Using TypeGraphQL with Apollo Server for File Uploads

Step-by-step guide for adding an object to a Material UI select component

React Redux encountering issues with state updates

Typescript: The property isComposing is not found on Event type

Is it correct to implement an interface with a constructor in TypeScript using this method?

Angular 2 form validation enhancements

TS2688 Error: TypeScript Build Fails to Locate Type Definition File for 'mocha' Following Update

Exploring the integration of an Angular 4 application with Visual Studio 2017 using dot net core. Techniques for accessing configuration keys from appsetting.json in a TypeScript

The Nest dependency resolution is experiencing difficulties

Can you explain the significance of { 0: T } in this particular type definition?

Error: Unable to extract the 'text' property from 'props.message' as it is not defined

Exploring TypeScript: Optional Sub-Properties

What is the rationale behind allowing conflicting types in intersection types?

Ways to effectively implement a function type specified in an interface

A layout featuring nested buttons and links within a card element, utilizing the power of Link in NextJs