Combining namespaces in Typescript declaration files

Currently, I am attempting to combine namespaces from d.ts files.

For example, when I attempt to merge namespaces in a single file, everything works as expected.

declare namespace tst {
    export interface info {
        info1: number;
    }
    var a: info;
}

declare namespace tst {
    export interface info {
        info2: number;
    }
}

tst.a.info1 = 1;
tst.a.info2 = 1;

However, when I move the first namespace to a test.d.ts file - things start breaking.

test.d.ts

declare namespace tst {
    export interface info {
        info1: number;
    }
    var a: info;
}

index.ts

/// <reference path="test.d.ts" />

declare namespace tst {
    export interface info {
        info2: number;
    }
}

// Module to control application life.
tst.a.info1 = 1;
tst.a.info2 = 1; // Error:(31, 7) TS2339: Property 'info2' does not exist on type 'info'.

I encountered this issue when I added a new method to types like Electron and Angular2.

For instance, in electron/index.d.ts

declare namespace Electron {
    interface App extends NodeJS.EventEmitter {
        ...
    }
}

In my file test.ts

declare namespace Electron {
    interface App extends NodeJS.EventEmitter {
        isQuiting?: boolean;
    }
}

This caused an error: TS2339: Property 'isQuiting' does not exist on type 'App'.

Is it possible to merge custom namespaces with d.ts files?

Answer №1

It appears that the issue lies within the root import/export statements in the files:

When there is an import or export at the root level of a TypeScript file, it creates a local scope specific to that file.

For more information, click here

As a result, the first file tst, and the second file tst, are in different scopes and cannot be combined. To resolve this, you will need to remove all root import/export statements from the file or move them to separate files.

Answer №2

After thorough investigation, I have come up with two potential solutions:

1) One option is to eliminate all import/export statements from *.ts files (More information on this can be found here)

2) Alternatively, you can create a new file named *.d.ts (for example test.extend.d.ts), and make all necessary changes in this *.d.ts file. Then, import this file using the following code:

/// <reference path="*.d.ts" />

For instance:

File: test.d.ts

declare namespace Electron {
    interface App extends NodeJS.EventEmitter {
        isQuiting?: boolean;
    }
}

File: test.ts

/// <reference path="test.d.ts" />
import {...} from "..."; // Any import/export
app.isQuiting = false; // This method has been proven to work successfully!!!
app.quit(); // The electron types also function properly!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with blueprintjs/core type in JupyterLab Extension after running npm install

Developed a JLab extension and saved it to Git repository. Established a new environment and successfully pulled the code, which was also verified by a friend. Subsequently, included a new react object to the extension and pushed it back to Git in a fresh ...

Explore a vast array of items in a collection

I have a massive collection of various objects that I need to sift through. With over 60,000 elements, the search operation can sometimes be painfully slow. One typical object in this array has the following structure: { "title": "title" "company": ...

Encountering a 404 error when trying to access the rxjs node_module

While attempting to compile an angular2 application, I encountered the following issue: Error: XHR error (404 Not Found) loading http://localhost:3000/node_modules/rxjs(…) systemjs.config.js (function(global) { // map tells the System loader whe ...

Error 2300 in Vetur: Identical identifier found for '(Missing)'

Recently, I've been encountering a strange issue with Vetur in my typescript nuxt.js project. Every component, whether it's just an empty line or contains code, displays an error message on the first line. I can't pinpoint when this problem ...

After successful login, MSAL Angular will redirect the user to "/#code=..." either through a popup or using the msalGuard redirect method

When attempting to integrate MSAL 2.5.8 into my Angular 11 project and logging in with canActivate: [MsalGuard], the popup redirects to "http://localhost:4200/#code=0.AX...". I followed this github repository for implementing msal into my project. In my ...

Enabling and disabling contenteditable functionality on a div element in Angular

Issue I am facing an issue while trying to bind a boolean to the contenteditable directive of a div. However, it seems that this binding is not working as expected. Error Message: The 'contenteditable' property is not recognized as a valid p ...

Avoid saying the same thing more than once

Within my Typescript class, I have the following structure: class C { #fsm (...) startFoo(name: string) { this.#fsm.send('FOO', name) return this } startBar(name: string) { this.#fsm.send('BAR', name) return th ...

Explore the potentials of @ngrx/effects

A while back, I inquired about the @ngrx/effects library on Stack Overflow, but the responses didn't completely address my issue. After gaining a better understanding of how actions and effects are interconnected, I'm still unclear on their spec ...

Is it possible to retrieve 2 arguments within a function in a non-sequential manner?

Let's say there is a function with arguments A, B, C, D, and E. Function(A, B, C, D, E) However, not all arguments are needed all the time. For instance, only A and C are needed in some cases. Currently, I would have to call the function like this: Fu ...

Does the latest stable version of Angular2 come with a named-routerOutlet feature?

<router-outlet name="another_name"></router-outlet> & the routes are defined as {path: '', component: AnotherComponent} TS is not able to identify this. 'name' is not a valid route parameter Any suggestions on how to ...

Error management and callback handling in MSAL.js for Angular 6 Single Page Applications

I am currently using msal.js in an angular 6 SPA for authentication purposes, but I have encountered a few issues: Initially, I struggled to find clear examples on how to handle errors with the library, so I pieced together information from various source ...

Error: Cannot access the 'people' property as it is undefined

Can anyone assist me with troubleshooting an issue I'm having while trying to set up a Google People API authentication service in Angular? I keep encountering the following error in the Chrome console: Uncaught (in promise): TypeError: Cannot read ...

To successfully transfer a file (whether it be an excel or csv file) into a nodejs environment and then have it update in a mongodb database, follow

Can anyone guide me on how to upload a file, ensuring only Excel or CSV formats are accepted? I then need to read the file using Node.js and update it in a MongoDB database table. Technologies used: Angular 5 for front end, Node.js and MongoDB for backend ...

Angular showcases the presence of a signed-in user at page load, disregarding the absence of

Currently, I am following a course where I have implemented a simple login form inside the navigation bar: <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-primary"> <div class="container"> ...

Accessing the Component Property from an Attribute Directive in Angular 2

Currently, I am in the process of creating filter components for a grid (Ag-Grid) and planning to use them in various locations. To make these filters accessible from different places, I am developing a wrapper for them. In particular, I am working on a fi ...

Creating a setup in TypeScript to enable imports between CommonJS and ES modules (for node-fetch and Express)

I'm facing a challenge in trying to integrate two libraries into a single project: fetch-node, an ES module, and Express, which follows the CommonJS format. The issue arises from needing to import fetch-node using: import fetch from 'node-fetch&a ...

Angular2 - Issue with Pagination functionality

When incorporating ng2-bootstrap as a pagination component, the guide provided at () made setting up the component a breeze for me. The pagination functionality is working smoothly and meeting my expectations. However, I've encountered an issue when ...

Show the value in Angular in a dynamic way

My template needs to display the text 'Passed' only if item.name === 'michael' is not true. The component receives data in an array called courses[] from its parent. There are two interfaces, Courses and Teachers, where each course ID h ...

Electron experiences a crash while attempting to execute an HTTPS request within an addeventlistener callback function

In the process of creating a simple Electron application that facilitates user login into a system, I encounter an issue. The app collects the username and password entered by the user through form text inputs. Upon clicking the "login" button, the program ...

Set up linter rules that utilize `useEffect` in place of `React.useEffect` (utilizing named export rather than full export)

It's important in our codebase to always use: import { useEffect } from 'react'; instead of: import React from 'react'; // use in code as `React.useEffect` Can we enforce this rule with longer eslint rules? If so, how can we impl ...