Employing an undeclared value as a property key within an object

Question

Employing an undeclared value as a property key within an object

I am using an object to associate one value with another, like so:

const wordToNumber = {
  one: 1,
  two: 2,
  three: 3,
}

However, I have a special case where if the user tries to retrieve a value by the key undefined, I want it to return 1.

To accommodate this, I modified the object to look like this:

const wordToNumber = {
  one: 1,
  two: 2,
  three: 3,
  [undefined]: 1,
}

This setup functions as expected when tested in a playground:

https://i.sstatic.net/36Yhl.png

However, TypeScript raises an error regarding the undefined key:

TS2464: A computed property name must be of type 'string', 'number', 'symbol', or 'any'.

I'm questioning whether there is an issue with using undefined as an object key, or if it's acceptable and I can simply suppress the warning with ts-ignore?

typescript

Answer 1

Answer №1

Did you attempt to remove the square brackets? I found success with this method on JSFiddle.

const wordToNumber = {
    apple: 5,
    banana: 8,
    orange: 10,
    undefined: 1,
}

alert(wordToNumber["apple"])
alert(wordToNumber[undefined])

Answer 2

Did you attempt to remove the square brackets? I found success with this method on JSFiddle.

const wordToNumber = {
    apple: 5,
    banana: 8,
    orange: 10,
    undefined: 1,
}

alert(wordToNumber["apple"])
alert(wordToNumber[undefined])

Answer 3

Answer №2

Have you considered utilizing a map in this scenario, possibly with the use of get and set methods?

const m = new Map();
m.set(undefined, "test");
console.log(m.get(undefined));

Answer 4

Have you considered utilizing a map in this scenario, possibly with the use of get and set methods?

const m = new Map();
m.set(undefined, "test");
console.log(m.get(undefined));

Answer 5

Answer №3

There are various methods to achieve this task. Personally, my approach would be as follows:

const convertWordToNumber = (word) => {    
    if (typeof word !== "string") {
        return "1";
    }
    
    return {
        apple: 1,
        banana: 2,
        cherry: 3,
    }[word];
}

convertWordToNumber("apple");

Instead of checking for undefined specifically, the function will simply return "1" if the input is not a string.

Answer 6

There are various methods to achieve this task. Personally, my approach would be as follows:

const convertWordToNumber = (word) => {    
    if (typeof word !== "string") {
        return "1";
    }
    
    return {
        apple: 1,
        banana: 2,
        cherry: 3,
    }[word];
}

convertWordToNumber("apple");

Instead of checking for undefined specifically, the function will simply return "1" if the input is not a string.

Answer 7

Answer №4

When it comes to JavaScript converting undefined into strings for object keys, there seems to be a safe aspect in this scenario. Ignoring the error might actually be acceptable. Here's an example situation:

enum LeftEnum {
    Required = 0,
    Hidden   = 1,
    Optional = 2
};

enum RightEnum {
    Required = 1,
    DontShow = 2,
    Optional = 3
};

type LeftObjectType = {
    Show?: LeftEnum
};

type RightObjectType = {
    Display: RightEnum
};

const convertLeftToRight = {
    [LeftEnum.Required]: RightEnum.Required as const,
    [LeftEnum.Hidden]:   RightEnum.DontShow as const,
    [LeftEnum.Optional]: RightEnum.Optional as const,
    undefined:           RightEnum.Optional as const
};

const lefts: LeftObjectType[] = [
    {},                      // undefined -> optional or 3
    {Show: LeftEnum.Hidden}, //         1 -> dontShow or 2
    {Show: LeftEnum.Required}, //       0 -> required or 1
    {Show: LeftEnum.Optional} // optional -> optional or 3
];

const newRight: RightObjectType[] = lefts.map(left => ({
    // Type 'undefined' cannot be used as an index type.(2538)
    Display: convertLeftToRight[left.Show]
}));

// produces correct results
console.log(newRight); 

// no error
const a: RightEnum.Optional = convertLeftToRight["undefined"];

// Type 'undefined' cannot be used as an index type.(2538)
const b: RightEnum.Optional = convertLeftToRight[undefined];

In this context, since we are confident that using undefined will not cause any issues and there is no possibility of confusion with "undefined", it may be reasonable to bypass the check.

However, I find the restriction on utilizing undefined for index types puzzling. TypeScript appears to recognize that using undefined as an object key works fine, as evident from including "undefined" leading to an error regarding multiple properties with the same name:

const convertLeftToRight= {
    [LeftEnum.Required]: RightEnum.Required as const,
    [LeftEnum.Hidden]: RightEnum.DontShow as const,
    [LeftEnum.Optional]: RightEnum.Optional as const,
    null: RightEnum.Optional as const,
    undefined: RightEnum.Optional as const,
    ["undefined"]: RightEnum.Optional as const,
    [undefined]: RightEnum.Optional as const,
    "undefined": RightEnum.Optional as const,
    "Undefined": RightEnum.DontShow as const
};

The object documentation highlighting the key as the blue keyword

undefined</code further adds to the confusion when compared to the green string <code>"Undefined"

or light green numbers.

https://i.sstatic.net/AwORw.png

Even if the string "undefined" is employed:

https://i.sstatic.net/1ASc7.png

Answer 8

When it comes to JavaScript converting undefined into strings for object keys, there seems to be a safe aspect in this scenario. Ignoring the error might actually be acceptable. Here's an example situation:

enum LeftEnum {
    Required = 0,
    Hidden   = 1,
    Optional = 2
};

enum RightEnum {
    Required = 1,
    DontShow = 2,
    Optional = 3
};

type LeftObjectType = {
    Show?: LeftEnum
};

type RightObjectType = {
    Display: RightEnum
};

const convertLeftToRight = {
    [LeftEnum.Required]: RightEnum.Required as const,
    [LeftEnum.Hidden]:   RightEnum.DontShow as const,
    [LeftEnum.Optional]: RightEnum.Optional as const,
    undefined:           RightEnum.Optional as const
};

const lefts: LeftObjectType[] = [
    {},                      // undefined -> optional or 3
    {Show: LeftEnum.Hidden}, //         1 -> dontShow or 2
    {Show: LeftEnum.Required}, //       0 -> required or 1
    {Show: LeftEnum.Optional} // optional -> optional or 3
];

const newRight: RightObjectType[] = lefts.map(left => ({
    // Type 'undefined' cannot be used as an index type.(2538)
    Display: convertLeftToRight[left.Show]
}));

// produces correct results
console.log(newRight); 

// no error
const a: RightEnum.Optional = convertLeftToRight["undefined"];

// Type 'undefined' cannot be used as an index type.(2538)
const b: RightEnum.Optional = convertLeftToRight[undefined];

In this context, since we are confident that using undefined will not cause any issues and there is no possibility of confusion with "undefined", it may be reasonable to bypass the check.

However, I find the restriction on utilizing undefined for index types puzzling. TypeScript appears to recognize that using undefined as an object key works fine, as evident from including "undefined" leading to an error regarding multiple properties with the same name:

const convertLeftToRight= {
    [LeftEnum.Required]: RightEnum.Required as const,
    [LeftEnum.Hidden]: RightEnum.DontShow as const,
    [LeftEnum.Optional]: RightEnum.Optional as const,
    null: RightEnum.Optional as const,
    undefined: RightEnum.Optional as const,
    ["undefined"]: RightEnum.Optional as const,
    [undefined]: RightEnum.Optional as const,
    "undefined": RightEnum.Optional as const,
    "Undefined": RightEnum.DontShow as const
};

The object documentation highlighting the key as the blue keyword

undefined</code further adds to the confusion when compared to the green string <code>"Undefined"

or light green numbers.

https://i.sstatic.net/AwORw.png

Even if the string "undefined" is employed:

https://i.sstatic.net/1ASc7.png

Employing an undeclared value as a property key within an object

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Error encountered when attempting to pass a prop to styled-components in TypeScript

Using trackBy in conjunction with the async pipe

Using TypeScript absolute imports from another project for standard TypeScript files and declarations at a global scope

Issue: Multiplying values within an array in TypeScript requires that the left-hand side of the arithmetic operation must be of type 'any', 'number', or 'enum'

In Angular 5, a variable's value becomes undefined once it is subscribed to outside of its assigned

Ways to refresh the information displayed on the view when the observable data is updated

Encountering a TypeScript type error when returning a promise from a function

Require TypeScript interfaces to include all index types from a union

Migration unsuccessful due to incompatible peer dependencies detected - Updating Angular to Version 12 was not successful

Sending a POST request to an API with Angular and passing an object as the payload

The Viem Type Inference ABI has mysteriously vanished

What is the best way to manage destroyed objects?

Having trouble getting Typescript's Pick Array to work properly?

Troubleshooting a Custom Pipe Problem in Angular Material Drag and Drop

Is it acceptable to include a @types library as a regular dependency in the package.json file of a Typescript library?

Error message in TypeScript React: Unable to assign onClick to type 'IntrinsicAttributes'

IntellJ Editor encounters Typescript error

The offsetWidth of the nativeElement in Angular 2's ElementRef is consistently returning a value

The Angular component route is not refreshed, terminated, and reloaded

Utilizing feature flags for Angular modules to enable lazy loading