What is the best way to include a new attribute in a TypeScript internal object?

Question

What is the best way to include a new attribute in a TypeScript internal object?

I am trying to include a property declaration in the window.history object, but I received a TypeScript error message

This is my code:

const historyInstance = createHashHistory(); // npm hoistory module
window.history.historyInstance = historyInstance;
//              ↑ the error occurred here

Here is my types.ts file:

interface IHistory extends History {
  historyInstance: any;
}

interface Window {
  history: IHistory;
// ↑ (property) Window.history: History
// All declarations of 'history' must have identical modifiers.ts(2687)
// Subsequent property declarations must have the same type.  Property // 'history' must be of type 'History', but here has type 'IHistory'.ts(2717)
}

typescript

Answer 1

Answer №1

If you find yourself in need of adjustments to the Window interface, consider instead adapting the History interface. To do this, create a new file named something like history.d.ts. Inside this file, include the following snippet:

export = global;

declare global {
  interface History {
    historyInstance: any;
  }
}

Once you've created your history.d.ts file, place it in a folder called types/. You'll also need to update your tsconfig.json accordingly:

{
  "compilerOptions": {
    "typeRoots": ["node_modules/@types", "./types"],
    ...
  }
}

Your folder structure should now look something like this:

types/
  |--- history.d.ts
tsconfig.json

Answer 2

If you find yourself in need of adjustments to the Window interface, consider instead adapting the History interface. To do this, create a new file named something like history.d.ts. Inside this file, include the following snippet:

export = global;

declare global {
  interface History {
    historyInstance: any;
  }
}

Once you've created your history.d.ts file, place it in a folder called types/. You'll also need to update your tsconfig.json accordingly:

{
  "compilerOptions": {
    "typeRoots": ["node_modules/@types", "./types"],
    ...
  }
}

Your folder structure should now look something like this:

types/
  |--- history.d.ts
tsconfig.json

What is the best way to include a new attribute in a TypeScript internal object?

Answer №1

Similar questions

Increasing the token size in the Metaplex Auction House CLI for selling items

Passport.js consistently returns an unauthorized status for every request, even when a valid token is provided, or it author

What are the steps to showcase the content of a Typescript file on an HTML webpage?

Creating HTML elements dynamically with attributes based on the `as` prop in React using TypeScript

Unable to implement a function from a controller class

Enhance the visual appeal of your data sorting bar chart in Highcharts by incorporating dynamic animations

The TypeScript compiler generates a blank JavaScript file within the WebStorm IDE

Retrieving a variable value set within a jQuery function from within an Angular 2 component

Transforming XML into Json using HTML string information in angular 8

Is there a way for me to steer clear of using optional chaining in Typescript?

Custom type declaration file in Typescript fails to function properly

Having trouble utilizing yarn to import Mapbox into TypeScript

Adding a declaration file to a package that relies on an external declaration file can be achieved by following these

Data cannot be transferred to a child element unless it has been initialized during the definition phase

Having trouble logging in with Google using React, Redux, and Typescript - encountered an error when attempting to sign in

Embrace the power of Angular2: Storing table information into

Implementing the strictNullCheck flag with msbuild

Spring Boot fails to recognize path variable data sent from Angular

What is the best way to perform a query in Angular using Firebase Firestore?

In order to emphasize the chosen list item following a component refresh