TypeScript in the Browser

Browsers run JavaScript, not TypeScript type annotations. A typical web project type-checks TypeScript and emits JavaScript that a page loads using a script tag or bundler. The DOM is a browser API: it is not created by compiling TypeScript. Begin with a small function that can be tested without a browser, then connect it to an actual heading element in the browser example.

The type annotations help the compiler verify that greeting accepts and returns strings. They vanish from the emitted JavaScript; the resulting function returns the text that the browser could display.

A .ts file cannot be loaded by every browser as ordinary JavaScript: emit JavaScript or use a development tool that transforms it.

Save as the-browser.ts. The following program passed strict TypeScript compilation, and the displayed output was captured by executing its emitted JavaScript with Node.js 22.16.0.

TypeScript source

function greeting(name: string): string { return `Welcome, ${name}!`; }
console.log(greeting("Asha"));

Verified output

Welcome, Asha!

Compile: npx tsc --strict --target es2022 --module commonjs the-browser.ts; run: node the-browser.js. For Node.js API examples, install @types/node first. For browser projects, use the browser-specific instructions below.

The example runs in Node.js 22.16.0; if it reads runtime environment details, your displayed values may differ.

The type annotations help the compiler verify that greeting accepts and returns strings. They vanish from the emitted JavaScript; the resulting function returns the text that the browser could display.

Predict what changes if you alter one input. Then run the code to compare your reasoning with the real output.

Real browser lab: This TypeScript targets actual DOM APIs and was successfully type-checked against the DOM library. It requires a browser; its runtime interaction was not simulated in Node.js. Save the two files together, compile the TypeScript, and serve this folder through a local HTTP server such as python3 -m http.server 8000 (especially important for modules and workers).

index.html

<!doctype html>
<html lang="en"><head><meta charset="utf-8"><title>TypeScript browser lab</title></head><body>
<h1 id="title">TypeScript lesson</h1><button id="action">Run</button><p id="output"></p>
<script type="module" src="./app.js"></script>
</body></html>

app.ts

const heading = document.querySelector<HTMLHeadingElement>("#title");
if (heading) heading.textContent = "Welcome to TypeScript";

Compile: npx tsc --strict --target es2022 --module es2022 --lib es2022,dom app.ts. For the worker example also compile worker.ts with --lib es2022,webworker. Then open the served HTML page in a browser to interact with it.

A .ts file cannot be loaded by every browser as ordinary JavaScript: emit JavaScript or use a development tool that transforms it.

Identify whether the failure is a type-checking issue, a configuration issue, or a runtime behavior issue before choosing a fix.

Change the greeting to include a lesson number. Compile it, compare the .ts and emitted .js, and connect it to a <h1> in an HTML page.

Write down your expected result first. For configuration examples, compare compiler output and diagnostics; for test examples, make the assertion fail deliberately to verify that the tool reports it.

Browsers run JavaScript, not TypeScript type annotations.

Run the primary example, then complete the practice task or environment-specific lab.