Is there a way to work with an Object in Object typescript? [duplicate]

Question

I have worked with React and Typescript and fetch a data from API. After fetching data, it will be saved as coin object. And I absorb at the pending state, it may not have a data. So, coin can be null. If coin is null. Then it is no way we can get a field image of that object. Does anyone work on this before? Please give me some ideas. I don't have experienced with typescript. Here is my code:

import React, { Component } from 'react'
import axios from 'axios';
import CoinIcon from './CoinIcon';
interface CoinDetailProps{
    id:string;
}
interface CoinImage {
    thumb: string ;
    small: string ;
    large: string ;
  }
interface Coin {
    id: string,
    symbol: string,
    name: string,
    image: CoinImage | null,
    description: string
  }
  interface CoinState{
      coin : Coin;
      loaded: boolean;
  }
  
export class CoinDetail extends Component<CoinDetailProps,CoinState> {
    constructor(props) {
        super(props)
    
        
        const init = {} as Coin;
        this.state = {
             coin : init,
             loaded: false,
             
        }
    }
    loadData = () => {
        const {id} = this.props;
        const url = `https://api.coingecko.com/api/v3/coins/${id}`;
        
        axios.get(url)
          .then(response => {
            const data = response.data
            
            this.setState({
              coin: data,
              loaded: true
            })
          })
          .catch((error) => {console.log("Something went wrong. ", error)})
      }
      componentDidMount() {    
        this.loadData();
      }
    
      componentDidUpdate(prevProps, prevState) {    
        if (prevProps !== this.props) {
          this.loadData();
        }
      }
    render() 
    {
        const {loaded, coin} = this.state;
        console.log("coin image:" + coin.image.small)
        return (
            <div>
                <CoinIcon name={coin.name} symbol = {coin.symbol} image={coin.image.small} />
            </div>
        )
    }
}

export default CoinDetail

When I try to print out like :

console.log(coin.image.small) <=== error here: Object is possibly 'null'.

Answer 1

You can explicitly check:

if (coin.image) {
    console.log(coin.image.small);
} else {
    // Do something else
}

Or you can use optional chaining:

console.log(coin.image?.small);