There is no index signature in the type 'string | number | EnvType' that accepts a parameter of type 'string'

Question

There is no index signature in the type 'string | number | EnvType' that accepts a parameter of type 'string'

Can someone help me troubleshoot this issue with config[curr][targetEnv] ???

interface EnvType {
  dev: string;
  staging: string;
  production: string;
}

type Config = {
  [key: string]: number | string | EnvType;
};

const config: Config = {
  networkTimeout: 10000,
  apiHost: {
    dev: 'http://localhost:8080',
    staging: 'https://staging.example.com',
    production: 'https://example.com',
  },
};

const targetEnv = process.env.TARGET_ENV || 'dev';

const mappedConfig = Object.keys(config).reduce((acc, curr) => {
  const currValue = config[curr];

  // check if value is not an object, return the value
  if (typeof currValue !== 'object') {
    return { ...acc, [curr]: currValue };
  }

  // if value is an object, retrieve value based on environment
  if (typeof currValue === 'object') {
    return { ...acc, [curr]: config[curr][targetEnv] }; // encountering an error here
  }

  // if none of the above conditions are met, do nothing
  return { ...acc };
}, {});

export default mappedConfig;

typescript

Answer 1

Answer №1

To start off, it is important to restrict the value of process.env.TARGET_ENV to only be either dev, staging, or production:

const targetEnv = (process.env.TARGET_ENV as keyof EnvType) || 'dev';

Next, ensure to cast config[curr] as EnvType within the typeof currValue === 'object' condition. This informs TypeScript that config[curr] will return the correct EnvType, and not a string or number when the if condition is satisfied.

// if object; fetch value by environment
if (typeof currValue === 'object') {
    return { ...acc, [curr]: (config[curr] as EnvType)[targetEnv] }; // error occurs here
}

The complete example looks like this:

interface EnvType {
    dev: string;
    staging: string;
    production: string;
  }
  
  type Config = {
    [key: string]: number | string | EnvType;
  };
  
  const config: Config = {
    networkTimeout: 10000,
    apiHost: {
      dev: 'http://localhost:8080',
      staging: 'https://staging.example.com',
      production: 'https://example.com',
    },
  };
  
  const targetEnv = process.env.TARGET_ENV as keyof EnvType || 'dev'; // added `as keyof`
  
  const mappedConfig = Object.keys(config).reduce((acc, curr) => {
    const currValue = config[curr];
  
    // if string, number, or boolean; simply return the value
    if (typeof currValue !== 'object') {
      return { ...acc, [curr]: currValue };
    }
  
// if object; fetch value by environment
if (typeof currValue === 'object') {
    return { ...acc, [curr]: (config[curr] as EnvType)[targetEnv] }; // added `as`
}
  
    // do nothing
    return { ...acc };
  }, {});
  
  export default mappedConfig;

Answer 2

To start off, it is important to restrict the value of process.env.TARGET_ENV to only be either dev, staging, or production:

const targetEnv = (process.env.TARGET_ENV as keyof EnvType) || 'dev';

Next, ensure to cast config[curr] as EnvType within the typeof currValue === 'object' condition. This informs TypeScript that config[curr] will return the correct EnvType, and not a string or number when the if condition is satisfied.

// if object; fetch value by environment
if (typeof currValue === 'object') {
    return { ...acc, [curr]: (config[curr] as EnvType)[targetEnv] }; // error occurs here
}

The complete example looks like this:

interface EnvType {
    dev: string;
    staging: string;
    production: string;
  }
  
  type Config = {
    [key: string]: number | string | EnvType;
  };
  
  const config: Config = {
    networkTimeout: 10000,
    apiHost: {
      dev: 'http://localhost:8080',
      staging: 'https://staging.example.com',
      production: 'https://example.com',
    },
  };
  
  const targetEnv = process.env.TARGET_ENV as keyof EnvType || 'dev'; // added `as keyof`
  
  const mappedConfig = Object.keys(config).reduce((acc, curr) => {
    const currValue = config[curr];
  
    // if string, number, or boolean; simply return the value
    if (typeof currValue !== 'object') {
      return { ...acc, [curr]: currValue };
    }
  
// if object; fetch value by environment
if (typeof currValue === 'object') {
    return { ...acc, [curr]: (config[curr] as EnvType)[targetEnv] }; // added `as`
}
  
    // do nothing
    return { ...acc };
  }, {});
  
  export default mappedConfig;

Answer 3

Answer №2

When attempting to retrieve a value using a string key, it will successfully work for config[curr] due to the specified line in the config type:

[key: string]: number | string | EnvType;

However, the issue arises when attempting to replicate the same process within the EnvType object.

To resolve this, you must define the interface in a similar manner:

interface EnvType {
  [key: string]: string;
  dev: string;
  staging: string;
  production: string;
}

Subsequently, you may encounter an issue where config can be either a number or a string, both of which cannot be indexed in that way.

Answer 4

When attempting to retrieve a value using a string key, it will successfully work for config[curr] due to the specified line in the config type:

[key: string]: number | string | EnvType;

However, the issue arises when attempting to replicate the same process within the EnvType object.

To resolve this, you must define the interface in a similar manner:

interface EnvType {
  [key: string]: string;
  dev: string;
  staging: string;
  production: string;
}

Subsequently, you may encounter an issue where config can be either a number or a string, both of which cannot be indexed in that way.

There is no index signature in the type 'string | number | EnvType' that accepts a parameter of type 'string'

Answer №1

Answer №2

Similar questions

Unidentified object type detected - Material UI

What is the best way to interact with and modify the relationships of "many-to-many" fields in my database table?

An error occured in angular2: Cannot access the 'title' property of undefined

Show a specific form field based on the chosen option in a dropdown menu using Angular and TypeScript

Guide to integrating global interfaces into your Nuxt project

Analyze the information presented in an HTML table and determine the correct response in a Q&A quiz application

Guide for launching Electron on a local host server during development and for production builds

Printing from a lengthy React DOM using window.print only generates a single page

Utilizing a TypeScript Variable as a Tagname in an HTML File within Angular

React-bootstrap-table Axios delete operation causing [object%20Object] to be displayed in the browser console

Navigating through Angular using Typescript can sometimes lead to uncertainty when working with return data. This is where the

What is the process for exporting a plugin from dayjs() in JavaScript?

jester: constantly jest navigator's mock & check against userAgent/vendor

RxJS emits an array of strings with a one second interval between each emission

The method beforeEach in angular2/testing seems to be failing as it is not

Arranging containers by invoking a function with material UI

I am experiencing issues with the search feature in angular and node.js that is not functioning properly

Error: Unable to access the 'registerControl' property of the object due to a type mismatch

The process of sorting through an array of objects based on their specific types in TypeScript

Transferring information through parent-child components via onChange