Vue 3 - Typescript - Object is possibly null issue

Question

I checked other threads but couldn't find the solution.

setup() {
  const processingData = ref(null)
}

Function:

function create() {
  let field = JSON.parse(processingData.value.fields)

  for (let i = 0; i < field.length; i++) {
    console.log(i)
  }
}

Error on JSON.parse(processingData.value.fields): Object is possibly 'null'.Vetur(2531) const processingData: Ref<null>

processingData is 100% accessable, as It's being set with another function already.

try printing processingData.value in the first line inside create function and check if that contains attribute called fields? — Amaarockz
– Amaarockz, Commented Oct 13, 2021 at 11:04
Yes, the function is inside setup(). If I console.log(processingData.value). It provides an Object, with set: fields. So should work. But as it is TypeScript in my opinion, it is standard null. No idea how to handle this error. — nhatimme
– nhatimme, Commented Oct 13, 2021 at 11:04
As you are saying you did see an Object with set: fields, did you see any value for the fields? — Amaarockz
– Amaarockz, Commented Oct 13, 2021 at 11:10

Andres Abadia · Accepted Answer · 2021-10-13 11:47:48Z

2

In Typescript there is a Non-null assertion operator you can add to let your code know that the value won't be null when your using it:

let field = JSON.parse(processingData.value!.fields)

This should help. But as I see your processingData has no type. This will lead to another problem. TS can't find the property fields. So either parse it as any or add the type to your ref.

ref type:

setup() {
  const processingData: Ref<{ fields: any }> = ref({fields: null})
}
...
let field = JSON.parse(processingData.value!.fields)

or parse it as any like:

let field = JSON.parse((processingData.value as any).fields)

Otherwise you can logically make sure that the value is not null.

if(processingData.value){
  field = JSON.parse(processingData.value.fields) 
}

edited Oct 13, 2021 at 11:47

answered Oct 13, 2021 at 11:17

Andres Abadia

8338 silver badges16 bronze badges

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

Collectives™ on Stack Overflow

Vue 3 - Typescript - Object is possibly null issue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related