Exploring Objects in TypeScript/JavaScript

Question

Exploring Objects in TypeScript/JavaScript

class ResistorColor {
  private colorOptions: string[]
    
  public colors = {
    black: 0,
    brown: 1,
    red: 2,
    orange: 3,
    yellow: 4,
    green: 5,
    blue: 6,
    violet: 7,
    grey: 8,
    white: 9
  }

  constructor(colorOptions: string[]) {
    
    if( colorOptions.length > 2)
    {
      for( let key in this.colors)
      {
        if (this.colors[key].indexOf(colorOptions[0]) !== -1) 
        {
          return key;
        }
      }
    }

    this.colorOptions = colorOptions
    
  }
}

The goal is to check if the user-input color exists in the object colors.

I found inspiration from this discussion on Stack Overflow: Find a value in a JavaScript object

I encountered an error saying cannot find name key. I am using an online TypeScript editor.

Please help me understand what I am doing incorrectly here.

javascript typescript

Answer 1

Answer №1

Take a look at the response from @Owl, it addresses the other issues present in your code as well.

The variable key is not defined within your loop. You should define it like this:

for (const key in this.colorValues) {
  ...
}

Instead of using a for-in loop, I recommend using the following solution to avoid receiving prototype properties:

for (const key of Object.keys(this.colorValues)) {
  ...
}

If you only need the values from the colorValues object and not the keys, you can simplify your loop like this:

for (const color of Object.values(this.colorValues)) {
  ...
}

Answer 2

Take a look at the response from @Owl, it addresses the other issues present in your code as well.

The variable key is not defined within your loop. You should define it like this:

for (const key in this.colorValues) {
  ...
}

Instead of using a for-in loop, I recommend using the following solution to avoid receiving prototype properties:

for (const key of Object.keys(this.colorValues)) {
  ...
}

If you only need the values from the colorValues object and not the keys, you can simplify your loop like this:

for (const color of Object.values(this.colorValues)) {
  ...
}

Answer 3

Answer №2

The error message "cannot find name key" has been resolved by @MrCodingB

A more elegant way to present this solution:

class ResistorColor {
  private colors: string[]
    
  public colorValues = {
    black: 0,
    brown: 1,
    red: 2,
    orange: 3,
    yellow: 4,
    green: 5,
    blue: 6,
    violet: 7,
    grey: 8,
    white: 9
  }

  constructor(colors: string[]) {
    
    const colorValues = Object.keys(this.colorValues);
    
    const isValid = colors.every(c => colorValues.includes(c));
    
    if (isValid) {
      this.colors = colors
    } else {
      throw new Error("Invalid Color(s)");
    }
  }
}

const resistorColor = new ResistorColor(["black", "brown"]); // correct
console.log("resistorColor has the correct colors");

const resistorColor2 = new ResistorColor(["black", "brown", "gold"]); // throws error
console.log("resistorColor2 has the correct colors");

Typescript playground

You can also display any incorrect colors by utilizing the .filter() method

class ResistorColor {
  private colors: string[]
    
  public colorValues = {
    black: 0,
    brown: 1,
    red: 2,
    orange: 3,
    yellow: 4,
    green: 5,
    blue: 6,
    violet: 7,
    grey: 8,
    white: 9
  }

  constructor(colors: string[]) {
    
    const colorValues = Object.keys(this.colorValues);
    const invalidColors = colors.filter(c => !colorValues.includes(c));

    if (invalidColors.length === 0) {
      this.colors = colors
    } else {
      throw new Error(`Invalid Color -> ${invalidColors.join(", ")}`);
    }
  }
}

const resistorColor = new ResistorColor(["black", "brown"]); // correct
console.log("resistorColor has the correct colors");

const resistorColor2 = new ResistorColor(["black", "brown", "gold", "foo"]); // throws error "Invalid Color -> gold, foo"

Typescript playground

Answer 4

The error message "cannot find name key" has been resolved by @MrCodingB

A more elegant way to present this solution:

class ResistorColor {
  private colors: string[]
    
  public colorValues = {
    black: 0,
    brown: 1,
    red: 2,
    orange: 3,
    yellow: 4,
    green: 5,
    blue: 6,
    violet: 7,
    grey: 8,
    white: 9
  }

  constructor(colors: string[]) {
    
    const colorValues = Object.keys(this.colorValues);
    
    const isValid = colors.every(c => colorValues.includes(c));
    
    if (isValid) {
      this.colors = colors
    } else {
      throw new Error("Invalid Color(s)");
    }
  }
}

const resistorColor = new ResistorColor(["black", "brown"]); // correct
console.log("resistorColor has the correct colors");

const resistorColor2 = new ResistorColor(["black", "brown", "gold"]); // throws error
console.log("resistorColor2 has the correct colors");

Typescript playground

You can also display any incorrect colors by utilizing the .filter() method

class ResistorColor {
  private colors: string[]
    
  public colorValues = {
    black: 0,
    brown: 1,
    red: 2,
    orange: 3,
    yellow: 4,
    green: 5,
    blue: 6,
    violet: 7,
    grey: 8,
    white: 9
  }

  constructor(colors: string[]) {
    
    const colorValues = Object.keys(this.colorValues);
    const invalidColors = colors.filter(c => !colorValues.includes(c));

    if (invalidColors.length === 0) {
      this.colors = colors
    } else {
      throw new Error(`Invalid Color -> ${invalidColors.join(", ")}`);
    }
  }
}

const resistorColor = new ResistorColor(["black", "brown"]); // correct
console.log("resistorColor has the correct colors");

const resistorColor2 = new ResistorColor(["black", "brown", "gold", "foo"]); // throws error "Invalid Color -> gold, foo"

Typescript playground

Answer 5

Answer №3

To avoid runtime errors, consider using stricter types during compilation. By defining a type that only accepts specific string literal color names and enforcing a minimum length on the colors array with tuple types, you can catch these errors early.

Is it possible that this.colorValues is essentially an enum?

enum COLOR_VALUES {
    black = 0,
    brown = 1,
    red = 2,
    orange = 3,
    yellow = 4,
    green = 5,
    blue = 6,
    violet = 7,
    grey = 8,
    white = 9
}

type ColorNames = keyof typeof COLOR_VALUES;

class ResistorColor {

    // Accepts two or more colors
    constructor(private colors: [ColorNames, ColorNames, ...ColorNames[]]) {
    }
}

Now the constructor can only be called with valid arguments.

const a = new ResistorColor(["black", "blue"]); // ok
const b = new ResistorColor(["black", "blue", "red"]); // ok
const c = new ResistorColor(["black"]); // error: Source has 1 element(s) but target requires 2.
const d = new ResistorColor(["white", "cyan"]); // error: Type 'cyan' is not assignable to type

Typescript Playground Link

If this.colorValues is an instance variable, consider initializing it outside the class for easier referencing using typeof.

const initialValues = {
    black: 0,
    brown: 1,
    red: 2,
    orange: 3,
    yellow: 4,
    green: 5,
    blue: 6,
    violet: 7,
    grey: 8,
    white: 9
  }

type ColorNames = keyof typeof initialValues;

class ResistorColor {

    public colorValues = initialValues;

    // Accepts two or more colors
    constructor(private colors: [ColorNames, ColorNames, ...ColorNames[]]) {
    }
}

Typescript Playground Link

Answer 6

To avoid runtime errors, consider using stricter types during compilation. By defining a type that only accepts specific string literal color names and enforcing a minimum length on the colors array with tuple types, you can catch these errors early.

Is it possible that this.colorValues is essentially an enum?

enum COLOR_VALUES {
    black = 0,
    brown = 1,
    red = 2,
    orange = 3,
    yellow = 4,
    green = 5,
    blue = 6,
    violet = 7,
    grey = 8,
    white = 9
}

type ColorNames = keyof typeof COLOR_VALUES;

class ResistorColor {

    // Accepts two or more colors
    constructor(private colors: [ColorNames, ColorNames, ...ColorNames[]]) {
    }
}

Now the constructor can only be called with valid arguments.

const a = new ResistorColor(["black", "blue"]); // ok
const b = new ResistorColor(["black", "blue", "red"]); // ok
const c = new ResistorColor(["black"]); // error: Source has 1 element(s) but target requires 2.
const d = new ResistorColor(["white", "cyan"]); // error: Type 'cyan' is not assignable to type

Typescript Playground Link

If this.colorValues is an instance variable, consider initializing it outside the class for easier referencing using typeof.

const initialValues = {
    black: 0,
    brown: 1,
    red: 2,
    orange: 3,
    yellow: 4,
    green: 5,
    blue: 6,
    violet: 7,
    grey: 8,
    white: 9
  }

type ColorNames = keyof typeof initialValues;

class ResistorColor {

    public colorValues = initialValues;

    // Accepts two or more colors
    constructor(private colors: [ColorNames, ColorNames, ...ColorNames[]]) {
    }
}

Typescript Playground Link

Exploring Objects in TypeScript/JavaScript

Answer №1

Answer №2

Answer №3

Similar questions

Create a directive for AngularJS that utilizes SVG elements without using the deprecated

The input element doesn't show the value when generated by an Angular Directive

Transforming the playbackRate property of a web audio-enabled audio element

"Utilize d3.js to selectively filter through a nested array of objects based on specific object

Typescript integration in Next.js

Implement jQuery Tabs in Brackets software to enhance user experience

Issues with unresponsive buttons in AngularJs

Exploring the functionality of CodePen's code editor in relation to developing a 2D shooting game

Strategies for excluding a union type based on the value of a field

Testing React components by writing unit tests to locate specific elements within the component

Using React.ReactNode as an argument in Storybook

Implementing a design aesthetic to installed React components

What is the process for including a callback in an angular resource?

Stop JQuery from executing when an error is caught

access the ckeditor within the frame

Building an effective HTTP request for an API using Node.js and Express

What is the best way to add content to the nearest div with a specific class?

"Utilizing Material-UI version 5 to efficiently collapse all subordinate nodes within the

What is the best way to ensure TypeScript recognizes a variable as a specific type throughout the code?

Storing information in a MySQL database with the assistance of AJAX and PHP