Encountering the error "TypeScript: Property 'FOO' does not exist on type" when trying to add a property to an object that has already been declared

Question

Encountering the error "TypeScript: Property 'FOO' does not exist on type" when trying to add a property to an object that has already been declared

Encountering an error in TypeScript:

error TS2339: Property 'FOO' is not found in type '{ stuff ... 201 more ...; }'.

Constants.FOO.forEach((item) => {
          ~~~

Arising from this scenario:

// Constants.js

const Constants = {
  ABC: 123,
  WWW: 'COM',
  // ...
}

// further down in the same file:

Constants.FOO = [
  Constants.ABC,
  Constants.WWW,
]

Subsequently in the file that imports this:

import Constants from 'Constants'

// Seeing the error highlights indicating the error message above...
Constants.FOO.forEach((item) => {
  console.log(item)
  // 123
  // 'COM'
})

How can I tackle this issue? Is there a way to address it without needing to rewrite the implementation of Constants? Since in my case, there are numerous occurrences of this error for various properties on Constants that are added after the object is created.

Keep in mind that Constants.js is a JavaScript file and not a TypeScript file, so ideally avoiding the conversion of Constants.js to TypeScript would be preferable due to the extensive work involved in our situation. Is there another workaround available?

typescript

Answer 1

Answer №1

To effectively handle this situation, one approach could be to create a separate object by duplicating the properties of Constants and then adding the new FOO property:

const InitialConstants = {
    ABC: 123,
    WWW: 'COM',
    // ...
};

// Later in the same file:
const Constants = {
    ...InitialConstants,
    FOO: [
        InitialConstants.ABC,
        InitialConstants.WWW,
    ],
};

By following this method, TypeScript will automatically recognize the merged Constants object with all the necessary properties, including FOO.

Alternatively, you can initialize the values beforehand like so:

const ABC = 123;
const WWW = 'COM';
const Constants = {
    ABC,
    WWW,
    FOO: [ABC, WWW],
    // ...
};

Answer 2

To effectively handle this situation, one approach could be to create a separate object by duplicating the properties of Constants and then adding the new FOO property:

const InitialConstants = {
    ABC: 123,
    WWW: 'COM',
    // ...
};

// Later in the same file:
const Constants = {
    ...InitialConstants,
    FOO: [
        InitialConstants.ABC,
        InitialConstants.WWW,
    ],
};

By following this method, TypeScript will automatically recognize the merged Constants object with all the necessary properties, including FOO.

Alternatively, you can initialize the values beforehand like so:

const ABC = 123;
const WWW = 'COM';
const Constants = {
    ABC,
    WWW,
    FOO: [ABC, WWW],
    // ...
};

Encountering the error "TypeScript: Property 'FOO' does not exist on type" when trying to add a property to an object that has already been declared

Answer №1

Similar questions

The custom validator in Material2 Datepicker successfully returns a date object instead of a string

Numerous attributes housed within a single element

Encountering errors in Typescript build due to issues in the node_modules directory

Exploring the relationships between nested tuple types

Tips for navigating back to the previous component in React:

Learn the steps to assign a Base64 URL to an image source

Transforming seconds into years, months, weeks, days, hours, minutes, and seconds

The provided argument, which is of type 'RefObject<HTMLDivElement>', cannot be assigned to the parameter of type 'IDivPosition'

Using immer JS to update a nested value has been successfully completed

The filename is distinct from the file already included solely by the difference in capitalization. Material UI

How can we transfer a value from a parent component class to a child subclass?

Tips for transferring items between two .ts files

Generating a fresh array based on the size of its existing elements is the key feature of the ForEach method

Determine an expression based on a string in Typescript

Managing Keyboard Input in React using TypeScript

Utilizing Node.js Functions for Sharing Database Queries

Incorporating a skeletal design effect into a table featuring sorting and pagination options

Steps to assign a JSON file to an array within an object in Angular

Unveiling the seamless integration of TypeScript with webpack/metro mainFiles module resolution

Dragging and dropping elements onto the screen is causing them to overlap when trying