Attempting to implement a typeguard in Typescript that relies on the presence of specific content within an element

Question

Attempting to implement a typeguard in Typescript that relies on the presence of specific content within an element

Currently, I am attempting to develop a Typescript conditional that verifies if a particular word is already present in the name.

The function in question is as follows:


isOrganic() {
    for (let i = 0; i < this.items.length; i++) {
      if(this.items[i].organic) {
        if (' (Organic)' in this.items){
          this.items[i].name = this.items[i].name
        } else {
          this.items[i].name = this.items[i].name.concat(' (Organic)')
        }
      }
    }
  }

The main goal here is to determine whether the ' (Organic)' label is already part of the name. If it is, the name should be used as is. However, if it's missing, it needs to be added. Unfortunately, instead of achieving this result, the label keeps getting appended repeatedly. For instance:

Apple (Organic) (Organic) (Organic) etc...

I'm aware that the issue lies within this specific line: if (' (Organic)' in this.items)

Despite identifying the problem, I'm struggling to devise an appropriate solution through setting up the conditional statement correctly.

typescript conditional-statements typeguards

Answer 1

Answer №1

Here is a solution for your problem:

if (this.items[i].name.endsWith(' (Organic)'))

To achieve the desired outcome, make sure to access the item's name property fully. Then, utilize string methods like contains or endsWith, as the in operator does not operate directly on strings.

Complete example:

class Foo {
  constructor() {
    this.items = []
  }

  isOrganic() {
    for (let i = 0; i < this.items.length; i++) {
      if (this.items[i].organic) {
        if (this.items[i].name.endsWith(' (Organic)')){
          this.items[i].name = this.items[i].name
        } else {
          this.items[i].name = this.items[i].name.concat(' (Organic)')
        }
      }
    }
  }
}

const foo = new Foo()

// test data
foo.items = [ 
  { name: "A", organic: false },
  { name: "B", organic: true },
  { name: "C (Organic)", organic: true },
]

foo.isOrganic()
console.log(foo.items)

Furthermore, it is important to note that this code can be refactored for better clarity.

Utilize a for/of loop to iterate over the array of items to avoid repetitive calls to this.items[i].
Implement a single if statement that handles cases where the item is organic but lacks the specific text suffix.

class Foo {
  constructor() {
    this.items = []
  }

  isOrganic() {
    for (let item of this.items) {
      if (item.organic && !item.name.endsWith(' (Organic)')) {
        item.name = `${item.name} (Organic)`
      }
    }
  }
}

const foo = new Foo()

// test data
foo.items = [ 
  { name: "A", organic: false },
  { name: "B", organic: true },
  { name: "C (Organic)", organic: true },
]

foo.isOrganic()
console.log(foo.items)

Answer 2

Here is a solution for your problem:

if (this.items[i].name.endsWith(' (Organic)'))

To achieve the desired outcome, make sure to access the item's name property fully. Then, utilize string methods like contains or endsWith, as the in operator does not operate directly on strings.

Complete example:

class Foo {
  constructor() {
    this.items = []
  }

  isOrganic() {
    for (let i = 0; i < this.items.length; i++) {
      if (this.items[i].organic) {
        if (this.items[i].name.endsWith(' (Organic)')){
          this.items[i].name = this.items[i].name
        } else {
          this.items[i].name = this.items[i].name.concat(' (Organic)')
        }
      }
    }
  }
}

const foo = new Foo()

// test data
foo.items = [ 
  { name: "A", organic: false },
  { name: "B", organic: true },
  { name: "C (Organic)", organic: true },
]

foo.isOrganic()
console.log(foo.items)

Furthermore, it is important to note that this code can be refactored for better clarity.

Utilize a for/of loop to iterate over the array of items to avoid repetitive calls to this.items[i].
Implement a single if statement that handles cases where the item is organic but lacks the specific text suffix.

class Foo {
  constructor() {
    this.items = []
  }

  isOrganic() {
    for (let item of this.items) {
      if (item.organic && !item.name.endsWith(' (Organic)')) {
        item.name = `${item.name} (Organic)`
      }
    }
  }
}

const foo = new Foo()

// test data
foo.items = [ 
  { name: "A", organic: false },
  { name: "B", organic: true },
  { name: "C (Organic)", organic: true },
]

foo.isOrganic()
console.log(foo.items)

Attempting to implement a typeguard in Typescript that relies on the presence of specific content within an element

Answer №1

Similar questions

Set up an event listener for when geolocation permission is approved

Exploring the mechanics behind optional chaining, known as the Elvis operator, in TypeScript. How does this feature operate within the

Guide on retrieving an ArrayList() from intricate function in Angular

The error message "The export named 'render' (which was imported as 'render') could not be found" appeared

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

Use contextual type when determining the return type of a function, rather than relying solely on

Utilizing Azure Function Model v4: Establishing a Connection with Express.js

Can a composite type of numbers be created without individually mentioning each one?

Can anyone explain why the Splice function is removing the element at index 1 instead of index 0 as I specified?

Switch the Follow/Following button depending on the user's current follow status with the individual

Need help with creating a unit test for the Material UI slider component? An error message saying "Error: Cannot read property 'addEventListener' of null" is displayed when trying to render the component

What is the best way to create a data type that enables unrestricted index retrieval while ensuring that the value retrieved will never be

What is the process for defining a default value for a template-driven form input in Angular 2?

Typescript eliminates the need for unnecessary source code compilation

Each page in NextJS has a nearly identical JavaScript bundle size

Use the class type or any of its derived classes rather than an object of the class itself

Ways to properly assign a key in a Generic Interface as the interface key

Angular's change detection is currently inactive

Guide on importing videojs-offset library

The npm start command is unable to recognize the tsx file