Simple TypeScript

Write TypeScript, save, and run JavaScript in your browser.
TypeScript 6.0.3 is included and runs inside VS Code. No Node.js, npm, or compiler setup is required.

Save and preview

1. Keep index.html in your project root. On the first .ts save, the extension creates tsconfig.json beside it if missing, then compiles the project. JavaScript is generated beside TypeScript unless your config specifies otherwise.
2. Load the generated JavaScript in your HTML page:

   <script type="module" src="./main.js"></script>
   

3. For automatic browser reload, install Live Server and use Open with Live Server.

HTML and CSS work exactly as in a vanilla JavaScript project.

Imports of your own files, starting with ./, ../, or @/, can leave out .js.
Generated JavaScript gets the full browser path:
@/utils becomes @/utils.js; an existing @/utils.js stays unchanged.
./scripts/utils becomes ./scripts/utils.js; an existing ./scripts/utils.js stays unchanged.
./game.config becomes ./game.config.js, and the folder import ./components becomes ./components/index.js.

Package imports, including CDN modules listed in an import map, are left exactly as written.

@/ remains an alias in generated JavaScript.
Use a matching browser import map when your page runs @/ imports.

Edit the .ts sources. Their generated .js files are overwritten after successful saves. Generated JavaScript uses two-space indentation and has no final newline.

A .ts file with no code to run, such as one that only declares types or interfaces, gets no .js file, and an earlier one is deleted.
Imports that would only load such a file are left out of the generated JavaScript.
The file is still generated when your code uses it, such as import * as types from './types', or when an HTML page beside tsconfig.json names it.

Generated configuration

When missing, tsconfig.json is created beside the nearest parent index.html:

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "Preserve",
    "lib": [
      "ESNext",
      "DOM",
      "DOM.Iterable"
    ],
    "verbatimModuleSyntax": true,
    "paths": {
      "@/*": [
        "./scripts/*"
      ]
    }
  }
}

@/* lets TypeScript resolve aliases such as @/utils.
Edit tsconfig.json to change compiler options.

Unlisted options use the bundled TypeScript compiler defaults, including strict checking.

In VS Code Settings, search Generated JavaScript Semicolons.
Choose Remove (default) or Keep to retain TypeScript's emitted semicolons.

Check Problems and fix type errors before relying on the generated code.

Licence

Offered by neostream under the PolyForm Strict License 1.0.0.