title: Alpine.js interop - set variable to TypeScript app
body: <p>I would like to have a checkbox that will set a variable to <code>true</code> when it is clicked</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;input @click="settings.advancedMode = true"&gt; type="checkbox" id="AdvancedMode" &gt;
  &lt;label for="AdvancedMode"&gt;Advanced Mode&lt;/label&gt;
  </code></pre>
  
  <p>In my separate app I initialize a variable like this:</p>
  
  <pre class="lang-js prettyprint-override"><code>export var settings = {
      advancedMode: false,
  }
  </code></pre>
  
  <p>but when I try clicking on the input, I get an error:</p>
  
  <pre class="lang-js prettyprint-override"><code>Uncaught ReferenceError: settings is not defined
      at eval (eval at saferEvalNoReturn (big.ts:3400), &lt;anonymous&gt;:3:21)
      at saferEvalNoReturn (big.ts:3400)
      at Component.evaluateCommandExpression (evented.js:172)
      at runListenerHandler (evented.js:9)
      at HTMLInputElement.handler
  </code></pre>
  
  <p>I should probably use x-bind but I don't know the right syntax for checkbox. As a beginner it would be helpful to have <a href="https://gist.github.com/chapmanjacobd/f51e41b2d4c36b33803be0ca5e2e8e3e" rel="nofollow noreferrer">more examples</a></p>