I'm getting an error even though I defined a string and I'm getting an error even though I defined a string

Question

    import {Pipe, PipeTransform} from '@angular/core';
import {Product} from "./product";

@Pipe({
  name: 'productFilter'
})
export class ProductFilterPipe implements PipeTransform {

  transform(value: Product[], filterText?: string): Product[] {
    filterText = filterText?filterText.toLocaleLowerCase(): null

    return filterText ? value.filter((p: Product) => p.name
      .toLocaleLowerCase().indexOf(filterText) !== -1) : value;
  }

}

TS2322: Type 'string | null' is not assignable to type 'string | undefined'.
Type 'null' is not assignable to type 'string | undefined'.

and

TS2345: Argument of type 'string | undefined' is not assignable to parameter of type 'string'.
Type 'undefined' is not assignable to type 'string'.

enter image description here

Answer 1

Try with this

import {Pipe, PipeTransform} from '@angular/core';
import {Product} from "./product";

@Pipe({
  name: 'productFilter'
})
export class ProductFilterPipe implements PipeTransform {

  transform(value: Product[], filterText?: string): Product[] {
    let pattern = filterText ? filterText.toLocaleLowerCase(): null;

    return pattern ? value.filter((p: Product) => p.name.toLocaleLowerCase().indexOf(pattern) !== -1) : value;
  }

}

If a filterText is not passed to the function then you got that error because you are trying to assign something to undefined.