Object is possibly undefined

Question

I have following type:

type Person = {
  name: string 
  age: number
  value?: number
}

Also I have mock array of objects:

const arr = [
  {
    name: 'A',
    age: 1
  },
  {
    name: 'B',
    age: 2
  }
]

Now I would like to add to each object in array property value

 const newArr = arr.map(item => {
    return {
      ...item,
      value: fun(item)
    }
  })

And here is a function which add value

const add = (item: Person): number => {
  return item.value + 1
}

Now we have a TypeScript problem:

Object is possibly 'undefined'.ts(2532)

I am pretty sure that I can't do something like that because I need to return number?

const add = (item: Person): number => {
  return item.value && item.value + 1
}

How should I handle this?

What kind of behaviour would you expect if value is actually undefined ? — Matthieu Riegler
– Matthieu Riegler, Commented May 27, 2022 at 10:23
If it would be undefined I dont want to create value property — INeedYourHelp
– INeedYourHelp, Commented May 27, 2022 at 10:26
How I can tell typescript that I am sure on 100% this will be never undefined — INeedYourHelp
– INeedYourHelp, Commented May 27, 2022 at 10:27
"I dont want to create value property" - what does that mean? What should add return? The compiler is telling you about a legitimate problem - that property might be undefined, according to the type information you've given it, in which case your function returns NaN. — jonrsharpe
– jonrsharpe, Commented May 27, 2022 at 10:29

antpngl92 · Accepted Answer · 2022-05-27 10:28:29Z

2

Since your value property is number | undefined TS complains about it.

answered May 27, 2022 at 10:28

antpngl92

5344 silver badges14 bronze badges

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

Comments

tim · Accepted Answer · 2022-05-27 10:28:50Z

Because you defined value to be optional, your add function cannot be sure that it exists. Therefore, its behaviour is not well-defined. What should it return if an item is passed which has no value attribute?

You can either make value be a required attribute / create a new interface:

interface ValuedPerson extends Person {
    value: number;
}

const add = (item: ValuedPerson): number => {
    return item.value + 1
}

or add a default value, as this answer suggests.

After OP's remark: You can tell TypeScript that it does exist by adding an exclamation mark:

const add = (item: Person): number => {
    return item!.value + 1
}

Mahamudul Hasan · Accepted Answer · 2022-05-27 10:30:57Z

2

Actually i prefer to use (??) Nullish coalescing Operator

const add = (item: Person): number => {
  return (item?.value ?? 0) + 1
}

you can see also

edited May 27, 2022 at 10:30

answered May 27, 2022 at 10:26

Mahamudul Hasan

2,8232 gold badges19 silver badges26 bronze badges

3 Comments

INeedYourHelp Over a year ago

How it works???

Mahamudul Hasan Over a year ago

post updated...

Radu Diță Over a year ago

there is no need for optional chain there item?. As the type of item is Person, TS will complain if you have a call site where the argument could be null/undefined.

Vivek Kumar · Accepted Answer · 2022-05-27 11:04:10Z

1

Typescript is yelling at you because you are still not returning a number.

const add = (item: Person): number => {
  return item.value && item.value + 1
}

This will return a number if value is present in item, if not, it will return undefined.

EITHER

Make value a required attribute.

OR

Do a ternary check.

const add = (item: Person): number => {
    return item.value ? item.value + 1 : 0
}

I am assuming, you want to add 0 to value if value is not present.

Typescript should now be happy.

edited May 27, 2022 at 11:04

answered May 27, 2022 at 10:58

Vivek Kumar

1132 silver badges4 bronze badges

Comments

Vijeth Gowda · Accepted Answer · 2023-11-16 17:16:44Z

1

There is one more way to solve this

const add = (item: Person): number => {
  const newValue = item.value || ''
  return newValue  + 1`
}

answered Nov 16, 2023 at 17:16

Vijeth Gowda

213 bronze badges

Collectives™ on Stack Overflow

Object is possibly undefined

5 Answers 5

Comments

Comments

3 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

3 Comments

Comments

Comments

Related