title: TypeScript error while accessing Proxy Object | Object[] in MobX
body: <p>I have a simple MobX Store:</p>
  <pre><code>import { observable, action, makeObservable } from &quot;mobx&quot;
  import { BoxShadow, ShadowValues } from &quot;./types&quot;
  import { boxShadow } from &quot;./constants&quot;
  
  interface IStore {
      shadow: BoxShadow
  }
  
  export class Store implements IStore {
      shadow: BoxShadow = {
          selected: &quot;DEFAULT&quot;,
          list: boxShadow,
      }
      constructor() {
          makeObservable(this, {
              shadow: observable,
              updateShadow: action.bound,
          })
      }
  
      updateShadow(selected: ShadowValues) {
          this.shadow.selected = selected
      }
  }
  
  export const store = new Store()
  </code></pre>
  <p>The <code>BoxShadow</code> &amp; <code>ShadowValues</code> type consists of:</p>
  <pre><code>type Point = {
      x: number
      y: number
  }
  
  export type ShadowValues =
      | &quot;none&quot;
      | &quot;sm&quot;
      | &quot;DEFAULT&quot;
      | &quot;md&quot;
      | &quot;lg&quot;
      | &quot;xl&quot;
      | &quot;2xl&quot;
      | &quot;3xl&quot;
  
  export type Shadow = {
      offset: Point
      blur: number
      shadow: number
      color: string
  }
  
  export type ShadowList = Record&lt;ShadowValues, Shadow[] | Shadow&gt;
  
  export type BoxShadow = {
      selected: ShadowValues
      list: ShadowList
  }
  </code></pre>
  <p>I am using HTML select &amp; updating the <code>boxShadow</code> values:</p>
  <pre><code>import * as React from &quot;react&quot;
  import { toJS } from &quot;mobx&quot;
  import { observer } from &quot;mobx-react&quot;
  
  import { useStore } from &quot;./context&quot;
  import { Select } from &quot;./Select&quot;
  import { shadows } from &quot;./constants&quot;
  
  import { ShadowValues } from &quot;./types&quot;
  
  export default observer(function App() {
      const { shadow, updateShadow } = useStore()
  
      console.log(toJS(shadow.list[shadow.selected])[0][&quot;offset&quot;])
      console.log(shadow.list[shadow.selected].offset)
  
      return (
          &lt;div className=&quot;w-full flex flex-col items-center&quot;&gt;
              &lt;h1 className=&quot;text-4xl&quot;&gt;Access MobX Proxy&lt;/h1&gt;
              &lt;Select
                  className=&quot;flex-1 w-56&quot;
                  label=&quot;Box Shadow&quot;
                  checkmark={true}
                  options={shadows}
                  selectedOption={
                      shadows.filter(({ value }) =&gt; value === shadow.selected)[0]
                  }
                  onChange={(selectedOption) =&gt; {
                      const selected = selectedOption.value as ShadowValues
                      updateShadow(selected)
                  }}
              /&gt;
          &lt;/div&gt;
      )
  })
  </code></pre>
  <p>However, I'm unable to access <code>selectedShadow.color</code> or <code>selectedShadow.offset</code> without TypeScript yelling at me.</p>
  <p>The <code>boxShadow</code> values consists of an object or an array of objects like:</p>
  <pre><code>export const boxShadow = {
      none: {
          offset: { x: 0, y: 0 },
          blur: 0,
          shadow: 0,
          color: &quot;rgba(0, 0, 0, 0)&quot;,
      },
      sm: {
          offset: { x: 0, y: 1 },
          blur: 2,
          shadow: 0,
          color: &quot;rgba(0, 0, 0, 0.05)&quot;,
      },
      DEFAULT: [
          {
              offset: { x: 0, y: 1 },
              blur: 3,
              shadow: 0,
              color: &quot;rgba(0, 0, 0, 0.1)&quot;,
          },
          {
              offset: { x: 0, y: 1 },
              blur: 2,
              shadow: 0,
              color: &quot;rgba(0, 0, 0, 0.06)&quot;,
          },
      ],
      md: [
          {
              offset: { x: 0, y: 4 },
              blur: 6,
              shadow: -1,
              color: &quot;rgba(0, 0, 0, 0.1)&quot;,
          },
          {
              offset: { x: 0, y: 2 },
              blur: 4,
              shadow: -1,
              color: &quot;rgba(0, 0, 0, 0.06)&quot;,
          },
      ],
      lg: [
          {
              offset: { x: 0, y: 10 },
              blur: 15,
              shadow: -3,
              color: &quot;rgba(0, 0, 0, 0.1)&quot;,
          },
          {
              offset: { x: 0, y: 4 },
              blur: 6,
              shadow: -2,
              color: &quot;rgba(0, 0, 0, 0.05)&quot;,
          },
      ],
      xl: [
          {
              offset: { x: 0, y: 20 },
              blur: 25,
              shadow: -5,
              color: &quot;rgba(0, 0, 0, 0.1)&quot;,
          },
          {
              offset: { x: 0, y: 10 },
              blur: 10,
              shadow: -5,
              color: &quot;rgba(0, 0, 0, 0.04)&quot;,
          },
      ],
      &quot;2xl&quot;: {
          offset: { x: 0, y: 25 },
          blur: 50,
          shadow: -12,
          color: &quot;rgba(0, 0, 0, 0.25)&quot;,
      },
      &quot;3xl&quot;: {
          offset: { x: 0, y: 35 },
          blur: 60,
          shadow: -15,
          color: &quot;rgba(0, 0, 0, 0.3)&quot;,
      },
  }
  </code></pre>
  <p>I am trying to access it using <code>toJS</code> but still can't access nested properties. The <code>.toJS</code> method however displays perfectly fine if I <code>console.log</code> it:</p>
  <pre><code>import * as React from &quot;react&quot;
  import { toJS } from &quot;mobx&quot;
  import { observer } from &quot;mobx-react&quot;
  
  import { useStore } from &quot;./context&quot;
  import { Select } from &quot;./Select&quot;
  import { shadows } from &quot;./constants&quot;
  
  import { ShadowValues } from &quot;./types&quot;
  
  export default observer(function App() {
      const { shadow, updateShadow } = useStore()
  
      console.log(toJS(shadow.list[shadow.selected])[0][&quot;offset&quot;])
      console.log(shadow.list[shadow.selected].offset)
  
      return (
          &lt;div className=&quot;w-full flex flex-col items-center&quot;&gt;
              &lt;h1 className=&quot;text-4xl&quot;&gt;Access MobX Proxy&lt;/h1&gt;
              &lt;Select
                  className=&quot;flex-1 w-56&quot;
                  label=&quot;Box Shadow&quot;
                  checkmark={true}
                  options={shadows}
                  selectedOption={
                      shadows.filter(({ value }) =&gt; value === shadow.selected)[0]
                  }
                  onChange={(selectedOption) =&gt; {
                      const selected = selectedOption.value as ShadowValues
                      updateShadow(selected)
                  }}
              /&gt;
          &lt;/div&gt;
      )
  })
  </code></pre>
  <p>Check out the <code>console.log</code> above. I want to access those values somehow.</p>
  <p>If I do <code>shadow.list[shadow.selected][0].color</code>, I get:</p>
  <blockquote>
  <p>TS7053: Element implicitly has an 'any' type because expression of type '0' can't be used to index type 'string | Shadow[] | Shadow'.
  Property '0' does not exist on type 'string | Shadow[] | Shadow'.</p>
  </blockquote>
  <p>And if I do <code>shadow.list[shadow.selected].color</code>, I get:</p>
  <blockquote>
  <p>TS2339: Property 'color' does not exist on type 'string | Shadow[] | Shadow'.
  Property 'color' does not exist on type 'string'.</p>
  </blockquote>
  <p>Which is correct but I don't know how to solve it :(</p>
  <p>I have made <a href="https://codesandbox.io/s/listbox-headlessui-react-tailwind-mobx-access-proxy-p1j6r" rel="nofollow noreferrer">a minimal Codesandbox</a> to see the demo. Note that it sometimes <code>console.log</code>'s on Codesandbox but doesn't locally but it does give TS errors on Codesandbox too.</p>
  <p>How can I solve the issue? I want to access the object value <code>sm.offset</code> plus the array of objects too <code>DEFAULT[0].offset</code> &amp; <code>DEFAULT[1].offset</code> :)</p>