Using imports with namespaces in TypeScript: A guide

Question

Using imports with namespaces in TypeScript: A guide

I am facing an issue with two classes in separate files, where one extends from the other. The base class contains some import statements for node modules. I am confused as to why the derived class (located in a different file) is not recognizing the base class!

Could someone provide clarity on this matter?

// UtilBase.ts

/// <reference path="../typings/node.d.ts" />
/// <reference path="../typings/packages.d.ts" />

import * as path from "path"; // <---- THIS LINE BREAKS THE BUILD!!!!

namespace My.utils {

    export class UtilBase {

        protected fixPath(value: string): string {
            return value.replace('/', path.sep);
        }
   }
}

Also,

// UtilOne.ts
/// <reference path="UtilBase.ts" />

namespace My.utils {

    export class UtilOne extends My.utils.UtilBase {

    }
}

Upon compilation, I encounter the following error:

src/UtilOne.ts(6,47): error TS2339: Property 'UtilBase' does not 
exist on type 'typeof utils'

typescript namespaces es6-modules

Answer 1

Answer №1

A solution utilizing namespaces (not the recommended approach)

To address the issue at hand, consider exporting your namespace:

// UtilBase.ts
import * as path from "path";
export namespace My.utils {
    export class UtilBase {
        protected fixPath(value: string): string {
            return value.replace('/', path.sep);
        }
   }
}

Following which, you can proceed with importing it:

// UtilOne.ts
import {My} from './UtilBase';
namespace My.utils {
    export class UtilOne extends My.utils.UtilBase {
    }
}

However, when prioritizing code organization, using both namespaces and (ES6) modules simultaneously is discouraged. Especially with Node.js where files are considered modules, favor avoiding namespaces.

Implementation of ES6 modules while omitting namespaces

TypeScript seamlessly integrates ES6 module syntax:

// UtilBase.ts
import * as path from "path";
export default class UtilBase {
    protected fixPath(value: string): string {
        return value.replace('/', path.sep);
    }
}

// UtilOne.ts
import UtilBase from './UtilBase';
export default class UtilOne extends UtilBase {
}

This method is highly recommended as ES6 modules mitigate naming clashes by allowing individual resource renaming upon importation.

It is fully compatible with Node.js environments.

For a comprehensive overview of ES6 modules syntax, refer to this enlightening article.

Replace `/// <reference` with a `tsconfig.json` file

Note: The usage of /// <reference syntax has been supplanted by the presence of a tsconfig.json file. An example tailored for Node.js entails:

// tsconfig.json
{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6"
  },
  "exclude": [
    "node_modules"
  ]
}

Answer 2

A solution utilizing namespaces (not the recommended approach)

To address the issue at hand, consider exporting your namespace:

// UtilBase.ts
import * as path from "path";
export namespace My.utils {
    export class UtilBase {
        protected fixPath(value: string): string {
            return value.replace('/', path.sep);
        }
   }
}

Following which, you can proceed with importing it:

// UtilOne.ts
import {My} from './UtilBase';
namespace My.utils {
    export class UtilOne extends My.utils.UtilBase {
    }
}

However, when prioritizing code organization, using both namespaces and (ES6) modules simultaneously is discouraged. Especially with Node.js where files are considered modules, favor avoiding namespaces.

Implementation of ES6 modules while omitting namespaces

TypeScript seamlessly integrates ES6 module syntax:

// UtilBase.ts
import * as path from "path";
export default class UtilBase {
    protected fixPath(value: string): string {
        return value.replace('/', path.sep);
    }
}

// UtilOne.ts
import UtilBase from './UtilBase';
export default class UtilOne extends UtilBase {
}

This method is highly recommended as ES6 modules mitigate naming clashes by allowing individual resource renaming upon importation.

It is fully compatible with Node.js environments.

For a comprehensive overview of ES6 modules syntax, refer to this enlightening article.

Replace `/// <reference` with a `tsconfig.json` file

Note: The usage of /// <reference syntax has been supplanted by the presence of a tsconfig.json file. An example tailored for Node.js entails:

// tsconfig.json
{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6"
  },
  "exclude": [
    "node_modules"
  ]
}

Using imports with namespaces in TypeScript: A guide

Answer №1

A solution utilizing namespaces (not the recommended approach)

Implementation of ES6 modules while omitting namespaces

Replace `/// <reference` with a `tsconfig.json` file

Similar questions

Unable to locate the _app.js file within my Next.js project

What is the reason for needing to specify event.target as an HTMLInputElement?

Optimal method for retrieving data from a JSON object using the object's ID with a map

Is it possible for me to transfer a change to the worldwide namespace from my library?

Looking to receive detailed compiler error messages along with full imports in Visual Studio Code for TypeScript?

Utilizing the useSearchParams() function to retrieve live data in Next.js

"Frustrating issue with Firebase-admin dependency farmhash-modern resulting in webassembly error

State mutation not reflected in input field value update

While deploying: Error 500 - The installation of dependencies was unsuccessful due to a request timeout

What is the best way to add a header field to a response using NestJS?

The json.parse function can be used in JavaScript, but it is not compatible with Angular

I want to search through an array of tuples to find a specific value in the first index, and if there is a match, I need to return the value in the second index of the matching tuple

Modify the title and go back dynamically in the document

Create a one-of-a-kind Angular 6 material table component featuring unique custom columns

MyApp is encountering issues resolving all parameters

Angular 14: A collection and schematic must be provided for execution to proceed with the process

Acquire data on the type from the returned outcome of a function

Managing the browser's "back" button functionality in React

Setting up Next Js to display images from external domains

A series of OR interfaces in TypeScript Interface

Using imports with namespaces in TypeScript: A guide

Answer №1

A solution utilizing namespaces (not the recommended approach)

Implementation of ES6 modules while omitting namespaces

Replace /// <reference with a tsconfig.json file

Similar questions

Unable to locate the _app.js file within my Next.js project

What is the reason for needing to specify event.target as an HTMLInputElement?

Optimal method for retrieving data from a JSON object using the object's ID with a map

Is it possible for me to transfer a change to the worldwide namespace from my library?

Looking to receive detailed compiler error messages along with full imports in Visual Studio Code for TypeScript?

Utilizing the useSearchParams() function to retrieve live data in Next.js

"Frustrating issue with Firebase-admin dependency farmhash-modern resulting in webassembly error

State mutation not reflected in input field value update

While deploying: Error 500 - The installation of dependencies was unsuccessful due to a request timeout

What is the best way to add a header field to a response using NestJS?

The json.parse function can be used in JavaScript, but it is not compatible with Angular

I want to search through an array of tuples to find a specific value in the first index, and if there is a match, I need to return the value in the second index of the matching tuple

Modify the title and go back dynamically in the document

Create a one-of-a-kind Angular 6 material table component featuring unique custom columns

MyApp is encountering issues resolving all parameters

Angular 14: A collection and schematic must be provided for execution to proceed with the process

Acquire data on the type from the returned outcome of a function

Managing the browser's "back" button functionality in React

Setting up Next Js to display images from external domains

A series of OR interfaces in TypeScript Interface

Replace `/// <reference` with a `tsconfig.json` file