title: Reference TypeScript definition file from HTML `<script>` with VS Code
body: <p>I am able to use <code>JSDoc</code> in a <code>script</code> tag in HTML but am not able to reference a type definition file (<code>.d.ts</code>). I'm using <code>VS Code</code>. Is this possible and if so how do I do it? Here's some example code below:</p>
  <p>The <code>tsconfig.json</code> file (I'm not sure how to quite use this in my tests, it doesn't seem to be needed.):</p>
  <pre class="lang-json prettyprint-override"><code>{
      &quot;compilerOptions&quot;: {
          &quot;baseUrl&quot;: &quot;.&quot;,
          &quot;paths&quot;: {
              &quot;myLib&quot;: [&quot;types/MyLib/index.d.ts&quot;],
              &quot;myLib2&quot;: [&quot;types/MyLib/index2.d.ts&quot;]
          }
      }
  }
  </code></pre>
  <h2>Attempt 1:</h2>
  <p>In <code>types/MyLib/index.d.ts</code>:</p>
  <pre class="lang-js prettyprint-override"><code>declare namespace myLib {
    function makeGreeting(s: string): string
    let numberOfGreetings: number
  }
  </code></pre>
  <p>In the JS file <code>index.js</code> and works fine:</p>
  <pre class="lang-js prettyprint-override"><code>/// &lt;reference path=&quot;./types/MyLib/index.d.ts&quot; /&gt;
  // @ts-check
  
  var result = myLib.makeGreeting(&quot;Cheese&quot;)
  console.log(result)
  </code></pre>
  <p>In the HTML file (none of these work) <code>index.html</code>:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;script&gt;
      /// &lt;reference path=&quot;./types/MyLib/index.d.ts&quot; /&gt;
      // @ts-check
      var result = myLib.makeGreeting(&quot;Cheese&quot;)
  &lt;/script&gt;
  
  &lt;script&gt;
      // @ts-check
      /** @type {import(&quot;./types/MyLib/index&quot;).myLib} */
      var myLib = Window.myLib
      var result = myLib.makeGreeting(&quot;Orange&quot;)
  &lt;/script&gt;
  
  &lt;script&gt;
      // @ts-check
      /** @typedef {import(&quot;./types/MyLib/index&quot;).myLib} myLib */
      /** @type {myLib} */
      var myLib = Window.myLib
      var result = myLib.makeGreeting(&quot;Orange&quot;)
  &lt;/script&gt;
  </code></pre>
  <h2>Attempt 2:</h2>
  <p>In <code>types/MyLib/index2.d.ts</code>:</p>
  <pre class="lang-js prettyprint-override"><code>export declare module myLib {
    export function makeGreeting(s: string): string
  }
  </code></pre>
  <p>In the JS file <code>index2.js</code> and works fine:</p>
  <pre class="lang-js prettyprint-override"><code>/// &lt;reference path=&quot;./types/MyLib/index2.d.ts&quot; /&gt;
  // @ts-check
  
  var result = myLib.makeGreeting(&quot;Cheese&quot;)
  console.log(result)
  </code></pre>
  <p>In the HTML file (none of these work) <code>index2.html</code>:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;script&gt;
      /// &lt;reference path=&quot;./types/MyLib/index2.d.ts&quot; /&gt;
      // @ts-check
      var result = myLib.makeGreeting(&quot;Cheese&quot;)
  &lt;/script&gt;
  
  &lt;script&gt;
      // @ts-check
      /** @type {import(&quot;./types/MyLib/index2&quot;).myLib} */
      var myLib = Window.myLib
      var result = myLib.makeGreeting(&quot;Orange&quot;)
  &lt;/script&gt;
  
  &lt;script&gt;
      // @ts-check
      /** @typedef {import(&quot;./types/MyLib/index2&quot;).myLib} myLib */
      /** @type {myLib} */
      var myLib = Window.myLib
      var result = myLib.makeGreeting(&quot;Orange&quot;)
  &lt;/script&gt;
  </code></pre>