Tips for accurately inputting a global object with an index

Question

Tips for accurately inputting a global object with an index

I'm in the process of converting a large monolithic JavaScript application to TypeScript and am facing an issue regarding typing a specific module. I am seeking guidance on how to approach this particular problem.

It's important to note that I did not write the original code - my goal is to convert an existing application. Therefore, critiquing the JavaScript code itself will not be helpful

Here is the snippet of the original code for the module (thankfully it's short).

const CACHE_CONTROL_HEADERS = Symbol.for('cache control headers')

if (!global[CACHE_CONTROL_HEADERS]) {
  global[CACHE_CONTROL_HEADERS] = [];
}

module.exports = global[CACHE_CONTROL_HEADERS];

I've learned that TypeScript does not support using symbols as index signatures, so I need to adjust the first line. Additionally, I believe I should change the last line to ES6 module format, resulting in the following:

const CACHE_CONTROL_HEADERS = (Symbol.for(
  "cache control headers"
) as unknown) as string;

if (!global[CACHE_CONTROL_HEADERS]) {
  global[CACHE_CONTROL_HEADERS] = [];
}

export default global[CACHE_CONTROL_HEADERS];

This modification has led to the following compile error:

index.ts:6:3 - error TS7053: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'Global & typeof globalThis'.
  No index signature with a parameter of type 'string' was found on type 'Global & typeof globalThis'.

After some research, I have explored different methods to augment the type of the global object and tried adding the following code in a separate file alongside the module:

declare module NodeJS {
  interface Global {
    [key: string]: string;
  }
}

Unfortunately, this didn't resolve the error, and my editor flagged additional issues with the index signature, such as:

Property 'Array' of type 'ArrayConstructor' is not assignable to string index type 'string[]'

At this point, I'm at a loss. If anyone can assist me in transforming this small file into TypeScript, I would greatly appreciate it!

typescript

Answer 1

Answer №1

Not the prettiest solution, but you could redefine every instance of global to a custom type that extends the original definition of typeof global:

type CacheControlGlobal = typeof global & {
  [CACHE_CONTROL_HEADERS]: string[];
};

(global as CacheControlGlobal)[CACHE_CONTROL_HEADERS] = [];

You can access the full playground here, but remember that global may not work and needs to be run in a local environment.

By extending the existing type, not only does it fix the code functionality, but it also maintains other typed features like auto-completion. The types are similar enough that casting via unknown is unnecessary, improving readability.

Answer 2

Not the prettiest solution, but you could redefine every instance of global to a custom type that extends the original definition of typeof global:

type CacheControlGlobal = typeof global & {
  [CACHE_CONTROL_HEADERS]: string[];
};

(global as CacheControlGlobal)[CACHE_CONTROL_HEADERS] = [];

You can access the full playground here, but remember that global may not work and needs to be run in a local environment.

By extending the existing type, not only does it fix the code functionality, but it also maintains other typed features like auto-completion. The types are similar enough that casting via unknown is unnecessary, improving readability.

Answer 3

Answer №2

To include an additional property, there is no requirement for an index signature - symbols work effectively as properties:

For the Window object:

export {}
declare global {
  interface Window {
    [CACHE_CONTROL_HEADERS]: CustomizeThisType;
  }
}

const CACHE_CONTROL_HEADERS = Symbol.for("foo")
interface CustomizeThisType {
  x: ""
}

window[CACHE_CONTROL_HEADERS].x //operates correctly

And for Global objects:

export {};

interface CustomizeThisType {
  x: string;
}

declare global {
  module NodeJS {
    interface Global {
      [CACHE_CONTROL_HEADERS]: CustomizeThisType;
    }
  }
}

const CACHE_CONTROL_HEADERS = Symbol.for("foo");

const x: string = global[CACHE_CONTROL_HEADERS].x;

// intentionally cause another error to confirm file parsing
const y: number = global[CACHE_CONTROL_HEADERS].x;

Answer 4

To include an additional property, there is no requirement for an index signature - symbols work effectively as properties:

For the Window object:

export {}
declare global {
  interface Window {
    [CACHE_CONTROL_HEADERS]: CustomizeThisType;
  }
}

const CACHE_CONTROL_HEADERS = Symbol.for("foo")
interface CustomizeThisType {
  x: ""
}

window[CACHE_CONTROL_HEADERS].x //operates correctly

And for Global objects:

export {};

interface CustomizeThisType {
  x: string;
}

declare global {
  module NodeJS {
    interface Global {
      [CACHE_CONTROL_HEADERS]: CustomizeThisType;
    }
  }
}

const CACHE_CONTROL_HEADERS = Symbol.for("foo");

const x: string = global[CACHE_CONTROL_HEADERS].x;

// intentionally cause another error to confirm file parsing
const y: number = global[CACHE_CONTROL_HEADERS].x;

Tips for accurately inputting a global object with an index

Answer №1

Answer №2

Similar questions

Building TypeScript Model Classes

the process of accessing information from a service in an Angular Typescript file

Vue alert: Component resolution failed while attempting to create a global component

Utilizing the NPM package as a JSX Component is prohibited due to type errors

How can Angular send datetime data to Nodejs in the most effective manner?

Indicate a specific type for the Express response

Unable to retrieve this information within an anonymous function

Transitioning React components organized in groups to TypeScript

Issue with Bot framework (v4) where prompting choice in carousel using HeroCards does not progress to the next step

React: Switching PopUp causes the entire component to be re-rendered

Errors in Compiling Dependencies for d3.js Using Typescript

Using Ionic to send email verification via Firebase

Issue with method assignment in extending Array class in Typescript

How can data be transferred between controllers in Angular 2 without using URL parameters or the $state.go() function?

Guide to seamlessly incorporate a HTML template into your Angular 7 project

Tips for attaching an event listener to a div element that is accessed by reference in a React and TypeScript environment

I am interested in utilizing the request-reply pattern with KafkaJS in a TypeScript environment. Could you provide guidance on how to successfully implement this?

Exploring Dependency Injection in Angular2: A Comparison of TypeScript Syntax and @Inject Approach

Changing the name of a tab within a p-tabview

Verify that each field in the form contains a distinct value