JSX元素上的严格Null检查打字稿错误

Question

I am creating a React component with Typescript which has a div JSX element with a 'style' attribute. One of the values is background color, and I'm pulling that value from a Mobx State Tree, like this:

style={{backgroundColor: css.primaryColor}}

However, this creates an error that the value might be undefined.

Normally when calling from the Mobx tree in TS, I set the path equal to a variable, then add an if statement to satisfy this null check, like this:

const { store } = this.props
const currentBot = store.bots.current
if (currentBot) {
    do something
}

So in the render function, I tried creating a variable called css, from which I can reference the different keys on the object (primaryColor in the above example). This didn't work, because css could still be undefined, so I also tried adding an OR operator with a default hexcode.

const { store } = this.props
const currentBot = store.bots.current
let css
if (currentBot) {
  css = currentBot.theme.css
}

...

<div
  style={{backgroundColor: css.primaryColor || '#707070'}}
/>

I'm still getting 'Object is possibly undefined' on the 'css' in the style attribute in VSCode.

How can I satisfy that null check? Do I need to put the entire return statement inside of an if statement?

Answer 1

If the intention is to just remove the error, add ! after the variable which you know is not null to quell this error.This tells the Typescript that the object is not null.

eg

<div
  style={{backgroundColor: css!.primaryColor || '#707070'}}
/>

If you wish to learn how to use inline styles with Typescript, see the following links-

1. https://medium.com/@zvona/react-native-and-typescript-meets-styles-b727ecf7e677
2. https://blog.blueberry.io/how-we-handle-inline-styles-with-typescript-and-react-2c257e039f2b