title: I'm struggling to start to use typescript
body: <p>This is my project structure.</p>
  <pre><code>/public
    /js
      const.js
      const.js.map
      index.js
      index.js.map
    index.html
  /src
    const.ts
    index.ts
  package.json
  tsconfig.json
  </code></pre>
  <p><em><strong>index.ts</strong></em></p>
  <pre><code>import * as Const from './const'
  
  const label = document.querySelector&lt;HTMLElement&gt;(&quot;#label&quot;)
  label!.innerHTML = Const.default
  </code></pre>
  <p><em><strong>const.ts</strong></em></p>
  <pre><code>const message = &quot;Hi&quot;
  
  export default message
  </code></pre>
  <p>tsconfig.json</p>
  <pre><code>{
    &quot;compilerOptions&quot;: {
      &quot;target&quot;: &quot;es5&quot;,
      &quot;lib&quot;: [
        &quot;es5&quot;,&quot;DOM&quot;
      ],             
      &quot;allowJs&quot;: true,
      &quot;sourceMap&quot;: true,
      &quot;outDir&quot;: &quot;./public/js&quot;,
      &quot;strict&quot;: true,
      &quot;esModuleInterop&quot;: true,
      &quot;skipLibCheck&quot;: true,
      &quot;forceConsistentCasingInFileNames&quot;: true
    },
    &quot;include&quot;: [&quot;src/**/*&quot;],
    &quot;exclude&quot;: [&quot;node_modules&quot;]
  }
  
  </code></pre>
  <p>When I set the module as &quot;commonjs&quot; I've got this error</p>
  <blockquote>
  <p>Uncaught ReferenceError: exports is not defined
  at index.js:21</p>
  </blockquote>
  <p>And if I set as &quot;es6&quot; I've got this.</p>
  <blockquote>
  <p>Uncaught SyntaxError: Cannot use import statement outside a module</p>
  </blockquote>
  <p>I'm really confusing. I'd searched about these error in web and StackOverflow, But most reply says just change the module, or use a webpack or babel.
  But I don't want to use pre-compiler.</p>
  <p>How can I solve this problem for my front-end dev?</p>