React+Typescript: Performing logic on multi-type array based on type

Question

I have an array of both objects(JSX elements) and Strings. I want to iterate over the array and perform operations to the strings and skip the objects. What I have right now is this:

let arr = [...arrayOfStringAndObjects];

for (let i = 0; i < arr.length; i++) {
  if (typeof arr[i] === "string") {
    arr[i].replace(regexForKeywordSearch, (match: string) => {
      return "123456789!@#$%^&*" + match + "123456789!@#$%^&*";
    });
    arr[i].split("123456789!@#$%^&*");
  } else {
    continue;
  }

essentially I am trying to cut out a string based on a list of keywords and splitting them (which I will flatten later). However Typescript is not allowing me to perform string methods throwing me this error : "Property 'replace' does not exist on type 'string | object'. Property 'replace' does not exist on type 'object'."

How can I allow typescript to ignore when the type:object is encountered in my loop?

Does this answer your question? Why can Typescript not figure out the type in my code? — Jared Smith
– Jared Smith, Commented Jul 28, 2022 at 0:21

Ivan Shumilin · Accepted Answer · 2022-07-28 00:32:00Z

1

You can filter an array upfront and then work with strings only:

let arr = arrayOfStringAndObjects
  .filter((v) => typeof v === "string") as string[];

Also keep in mind that arr[i].replace and arr[i].split calls do not update an array elements. You can use an assignment arr[i] = arr[i].replace(...) or map method.

answered Jul 28, 2022 at 0:32

Ivan Shumilin

1,9433 gold badges15 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Awad Maharoof · Accepted Answer · 2022-07-28 00:19:42Z

0

Try

const mystring =  arr[i] as string;
mystring.replace(regexForKeywordSearch, ...

This is your way of telling typescript to interpret that variable as a string.

You already check the type of the object before forcing a type on a variable which is a good practice.

edited Jul 28, 2022 at 0:19

answered Jul 28, 2022 at 0:08

Awad Maharoof

2,3901 gold badge27 silver badges40 bronze badges

Collectives™ on Stack Overflow

React+Typescript: Performing logic on multi-type array based on type

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related