Typescript does not support index signatures with bracket property accessor when importing using the `import * as`

Currently learning typescript and in the process of converting a large program from javascript. While fixing errors and adding types, I'm stuck on this one particular issue.

Here's myModule.ts:

export const foo = { ... }
export const bar = { ... }

And here's myFile.ts:

import * as myModule from './myModule'

function doesSomething(input: string) {
    return myModule[input]
}

The Typescript compiler is throwing an error: Element implicitly has an 'any' type because type 'typeof "./myModule"' has no index signature.

I've attempted declaring a module and a namespace as well as implementing an interface, but none seem to work. My current idea is to declare the module in a separate file, but I can't get TS to recognize it. This is what I tried:

In myModule.d.ts:

interface MyModule {
    [key: string]: any
}

declare module 'myModule' {
    const myModule: MyModule
    export = myModule
}

I also thought about including a triple slash reference in myFile.ts:

At the top of myFile.ts:

/// <reference path="./myModule.d.ts" />
import * as myModule from './myModule'

function doesSomething(input: string) {
    return myModule[input]
}

However, this didn't resolve the issue at hand.

Answer №1

When calling the function doesSomething, you should only pass in strings that match the names of variables within the module myModule. You can achieve this by using the following code:

import * as myModule from './myModule';

type ModuleType = typeof myModule;

function doesSomething<K extends keyof ModuleType>(input: K): ModuleType[K] {
    return myModule[input]
}

This will provide a more accurate return type based on the variable types within the module, such as foo, bar, and so on.

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

Address aliases in the webpack configuration file

When utilizing webpack, it is possible to write the configuration file using TypeScript. However, it is crucial to ensure that any alias paths present in the config file are resolved to their mapped paths. It should be noted that this pertains specificall ...

Can a TypeScript variable in Angular contain a mixture of HTML and plain text?

I have a website where I am displaying content from a Model file. I would like to create a TypeScript variable that contains both a string related to the website's content and a URL enclosed in an HTML tag. When this variable is rendered on the view, ...

Customize your Joi message using the .or() method

I'm attempting to personalize a message for the .or() function in Joi, similar to this: https://i.stack.imgur.com/68dKx.png The default message from Joi is as follows: Validation Error: "value" must contain at least one of [optionOne, optionTwo] ...

After pressing the login button, my intention is to transition to a different page

I am relatively new to web development and working with angular. I have a login component that, upon hitting the LOGIN button, should redirect to another component on a different page. However, currently, when I click the button, it loads the data of the o ...

A solution to the error message "Type 'unknown' is not assignable to type 'Country[]' in React TypeScript" is to explicitly define the type of the

I encountered error TS2322: Type 'unknown' is not assignable to type 'Country[]' pages/Countries/index.tsx Full code: import * as ApiCountries from '../../services/APIs/countries.api' function Countries() { const findCo ...

Developing a node module that includes nested subfolders

I'm currently working on an npm module and have the following index.ts file: export * from './src/A/index'; Right now, when importing in my app, it looks like this: import {something} from 'myModule'; Now, I want to enhance my ...

Encountering a problem with an InvalidPipeArgument in Angular 6

Here's a quick summary of the situation: I recently upgraded my application to the latest version of Angular, moving from 5 to 6. All deployments in the packages.json file were updated using the ng update command. In my application, I save a Date() ...

How to disable the onChange event in PrimeNG p-dropdown?

I'm currently utilizing PrimeNG's dropdown component. Each option in the list includes an icon that, when clicked, should trigger a specific method. Additionally, I need to execute another method when the onChange event of the dropdown is trigger ...

Display real-time information in angular material table segment by segment

I need to incorporate service data into an Angular mat table with specific conditions as outlined below: If the difference between the start date and end date is less than 21 days, display 'dd/mm' between the 'start_date' and 'end ...

Struggling with setting up the onChange function in a Next.js application

After successfully writing and testing the code here, I encountered an error preventing me from building it. Please review the code for any issues. I am attempting to set onChange to handle user input in a text field. Currently using onChange={onChange}, ...

Encountering an issue with importing from 'sockjs-client' in TypeScript

I am a beginner with Angular and TypeScript. To get started, I used npm to install the following package: npm install --save sockjs-client I attempted to import it in my chat.component.ts file like this: import * as SockJS from 'sockjs-client'; ...

Troubleshooting d3js Type Errors in Angular (Updated Version)

Encountering numerous type errors with d3js when integrating it into Angular (typescript). svg.call(d3.zoom().on('zoom', () => { g.attr('transform', d3.events.transform); })); Error thrown: S2345: Argument of type 'Zo ...

Guide on obtaining the total value from a JSON Array in Angular 2 using TypeScript

I received a JSON response which includes carts values with different amounts. "carts": { "value": [ { "Amt": 40 }, { "Amt": 20.25 }, ...

The parameter type `SetStateAction<EventDetails[] | undefined>` does not allow for assigning arguments

I am currently facing an issue in a ReactJS project where I am trying to update state that was initially set up like this: const [eventsData, setEventsData] = useState<EventDetails[]>(); Every time I try to update the state using setEventsData(obj), ...

I'm looking for the Type Definitions Files (*.d.ts) for the Amazon Cognito Identity SDK. Does anyone know where I can find them and how

Where can I locate Type Definitions Files (*.d.ts) for the Amazon Cognito Identity SDK and how can I use them? I am utilizing TypeScript for Angular2 and I would like to have the code assistant readily available when implementing "AWS Cognito." While I al ...

Exclude the initial argument from functions listed within a JSON structure

Is there a way to create a generic type that reflects a JSON object structure, but excludes the first argument from functions while maintaining the types of other arguments? type InputType<T> = { increment: (state: T) => T, add: (state: T, cou ...

Arranging Select Dropdown Options in a Specific Order using Angular 7 and Typescript

My select dropdown is populated dynamically with options fetched from a service using *ngFor. I am looking to customize the order of these options. Can this be achieved through Angular code? The array structure is as follows: console.log(this.paymentTyp ...

Set certain properties within the nested object to be optional

Within a TypeScript project, there exists a type definition that looks like this: type Bar = { x: string; y: string; data: { z: string; w: string; }; }; This type is imported and widely used throughout the project, making it impossible for ...

Issue with React not displaying JSX when onClick Button is triggered

I've recently started learning React and I'm facing a problem that I can't seem to figure out. I have a basic button, and when it's clicked, I want to add another text or HTML element. While the console log statement is working fine, th ...

Encountered an issue with running tests in vscode-test - runTests function throwing

Setting up tests for my vscode extension for the first time and encountering an issue. I copied and pasted the example from code.visualstudio's /working-with-extensions/testing-extension. However, I'm facing an error when trying to call runTest ...