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

Incorporate service providers into models with Ionic3/Angular4

An example in Typescript for setting an initial/default value for a data type

The variable 'BlogPost' has already been declared within the block scope and cannot be redeclared

There is no imageURL property available for this type

Creating and managing global context with useReducer in TypeScript and React

Learn how to open a component in a new browser tab using Angular from a different component

Tips for adjusting the material ui Popper width to fit the container without disabling the portal

Using capital letters with interpolated language keys

How to import a module from the root path using TypeScript in IntelliJ IDEA

Errors caused by Typescript transpilation only manifest on the production server

The @angular/fire package is unable to locate the AngularFireModule and AngularFireDatabaseModule modules

Establish HTTP headers for accessing the Oxford API in an Angular 6 application

Typescript on the client-side: what is the best way to eliminate circular dependencies when using the factory method design pattern?

Unpacking objects in Typescript

Navigating the interface types between Angular, Firebase, and Typescript can be tricky, especially when working with the `firebase.firestore.FieldValue`

Ways to eliminate unnecessary items from a JavaScript object array and generate a fresh array

The variable X has been defined, but it's never actually utilized. Despite declaring it, I have not accessed its

Looking to create universal React component wrappers?

Providing the correct context to the function in Angular's dialog data is crucial for seamless

Create a full type by combining intersecting types