title: How to compile typescript for the browser
body: <p>I have an existing project that I would like to add TypeScript and React support to.  Because the project already exists, I can't use a scaffolding project and have been having trouble configuring <code>tsconfig.json</code> properly.</p>
  
  <p>I have been having various issues depending on which settings I use, but generally I have errors from different code in <code>/node_modules/**</code> and often in <code>/node_modules/@types/**</code>.  I've included my <code>tsconfig.json</code> with comments as to what errors each setting fixes.</p>
  
  <p>How can I compile my TypeScript + React project without import/module issues?</p>
  
  <p><strong>Current relevant <code>tsconfig.json</code> settings</strong></p>
  
  <pre><code>"module": "amd", // must be 'amd' or 'system' to use 'outFile'
  "lib": ["es2015", "dom", "es5", "es6"], // must include some of these to suppress certain errors; adds the 'Set' type
  "jsx": "react", // compile jsx to js
  "sourceMap": true, // ensure debuggable
  "outFile": "./static/js/app.js", // must be under /static/ to be served
  "rootDir": "./static/ts",
  "moduleResolution": "node", // suppresses issue with `default` or `export`
  "esModuleInterop": true
  </code></pre>
  
  <p><strong>Current Error</strong></p>
  
  <p><code>ReferenceError: define is not defined</code> (In the browser)</p>