Utilize key-value pairs to reference variables when importing as a namespace

Question

Utilize key-value pairs to reference variables when importing as a namespace

Is it feasible to utilize a string for performing a lookup on an imported namespace, or am I approaching this the wrong way?

Consider a file named my_file.ts with contents similar to:

export const MyThing: CustomType = {
    propertyOne: "name",
    propertyTwo: 2
}
export const AnotherThing: CustomType = {
    propertyOne: "Another",
    propertyTwo: 3
}

Now, if there is another file that imports these and needs to access them dynamically based on a string:

import * as allthings from "dir/folder/my_file"


function doStuff() {
   let currentThing = allthings['MyThing']; // works
   let name = 'MyThing';
   let currentThing2 = allthings[name]; // doesn't work

}

The error encountered is:

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'typeof import("dir/folder/my_file")'. No index signature with a parameter of type 'string' was found on type 'typeof import("dir/folder/my_file")'

Why does a literal string work but not a variable of type string in this scenario?

javascript typescript javascript-import

Answer 1

Answer №1

The direct string assignment may not be secure as the value can be altered at any time for the variable let name.

A safer approach is to use a const. You can also cast it explicitly:

let name = 'MyThing' as const;

However, it is recommended to declare a const variable directly which achieves the same outcome. Using let is unnecessary if the intention is not to change the value.

const name = 'MyThing';

Check out this TS playground demo

If the key is unknown in advance and all objects within my_file are of the same type (CustomType), you can safely utilize keyof typeof allthings as the type

export const allthings = {
  MyThing: {
    propertyOne: "name",
    propertyTwo: 2
  },
  AnotherThing: {
    propertyOne: "Another",
    propertyTwo: 3
  }
};

type CustomType = typeof allthings[keyof typeof allthings];

function getValue(key: keyof typeof allthings): CustomType {
    return allthings[key]; 
}

Refer to this TS example

For enum-like structures, consider using

satisfies Record<string, MyType>

to ensure they share the same type

interface CustomType {
  propertyOne: string,
  propertyTwo: number
}

const allthings = {
  MyThing: {
    propertyOne: "name",
    propertyTwo: 2
  },
  AnotherThing: {
    propertyOne: "Another",
    propertyTwo: 3
  }
} satisfies Record<string, CustomType>;

function getValueFromAllThings(key: keyof typeof allthings): CustomType {
    return allthings[key]; 
}

Answer 2

The direct string assignment may not be secure as the value can be altered at any time for the variable let name.

A safer approach is to use a const. You can also cast it explicitly:

let name = 'MyThing' as const;

However, it is recommended to declare a const variable directly which achieves the same outcome. Using let is unnecessary if the intention is not to change the value.

const name = 'MyThing';

Check out this TS playground demo

If the key is unknown in advance and all objects within my_file are of the same type (CustomType), you can safely utilize keyof typeof allthings as the type

export const allthings = {
  MyThing: {
    propertyOne: "name",
    propertyTwo: 2
  },
  AnotherThing: {
    propertyOne: "Another",
    propertyTwo: 3
  }
};

type CustomType = typeof allthings[keyof typeof allthings];

function getValue(key: keyof typeof allthings): CustomType {
    return allthings[key]; 
}

Refer to this TS example

For enum-like structures, consider using

satisfies Record<string, MyType>

to ensure they share the same type

interface CustomType {
  propertyOne: string,
  propertyTwo: number
}

const allthings = {
  MyThing: {
    propertyOne: "name",
    propertyTwo: 2
  },
  AnotherThing: {
    propertyOne: "Another",
    propertyTwo: 3
  }
} satisfies Record<string, CustomType>;

function getValueFromAllThings(key: keyof typeof allthings): CustomType {
    return allthings[key]; 
}

Answer 3

Answer №2

I came across a similar question on this forum: Dealing with 'any' type error when using a string as an index

After some trial and error, I managed to solve the issue by implementing the following:

import * as allitems from "dir/folder/my_file"


function handleItems() {
   let currentItem = allitems['MyItem']; // This now works
   let itemName = 'MyItem';
   let currentItem2 = allitems[itemName as keyof typeof allitems]; // Also works

}

Answer 4

I came across a similar question on this forum: Dealing with 'any' type error when using a string as an index

After some trial and error, I managed to solve the issue by implementing the following:

import * as allitems from "dir/folder/my_file"


function handleItems() {
   let currentItem = allitems['MyItem']; // This now works
   let itemName = 'MyItem';
   let currentItem2 = allitems[itemName as keyof typeof allitems]; // Also works

}

Utilize key-value pairs to reference variables when importing as a namespace

Answer №1

Answer №2

Similar questions

How to showcase a list from intricate JSON data using Angular

Leveraging the power of map in an Angular typescript file

Is there a way to seamlessly update button values in VueJs from an api request without needing to reload the page or manually clicking something? Or perhaps there is an alternative method to achieve this?

Using Fetch API in NextJS requires pressing the Enter key twice for it to work properly

Issue encountered while attempting to run executeJavascript()

ESLint flagging "Unexpected tab character" error with "tab" indentation rule enabled

Struggling with adding headers in React application

Tips for effectively using the parseInt function to access and verify a span element from inside a chrome extension

Reordering sections in a dynamic manner

Starting a Vue.js app with preloaded data

Retrieve information and auto-fill text boxes based on the selected dropdown menu option

Using AngularJS to dynamically load content into Owl Carousel 2

I am having trouble comprehending this JavaScript code, could someone provide me with assistance?

Tips for creating a condensed header

Update Button Visibility Based on State Change in ReactJS

Fixing Firebase and React errors in JavaScript functions

Scope ng-repeat with Angular's $compile function is not functioning as expected

Implementing jQuery autocomplete on dynamically generated fields post page load

Can you explain the different types of dynamic page props available in a Next.js application?

Error 404 in Angular HTTP Request