What Is TypeScript? A Beginner's Introduction with Examples

TypeScript is JavaScript with static types. You add type annotations to variables, parameters and return values, the TypeScript compiler checks them before the program runs, and it outputs plain JavaScript with the types removed. That JavaScript runs anywhere JavaScript runs: browsers, Node.js, Deno and Bun.

Here is a small TypeScript program. Press Run.

interface User {
    name: string;
    age: number;
}

function describe(user: User): string {
    return `${user.name} is ${user.age} years old`;
}

const ada: User = { name: "Ada", age: 36 };
console.log(describe(ada));

const scores: number[] = [90, 72, 85];
const total = scores.reduce((sum, s) => sum + s, 0); // total is inferred as number
console.log(total / scores.length);

Output:

Ada is 36 years old
82.33333333333333

Apart from the parts after the colons (: string, : User, : number[]) and the interface, this is JavaScript. Those additions tell the compiler what each value is allowed to be. Notice that total has no annotation: TypeScript works out that it is a number on its own. Most TypeScript code annotates function boundaries and lets the compiler infer the rest.

What the Type Checker Catches

The point of the annotations is that mistakes show up while you are writing code instead of when a user hits them. Run this block and read the output:

// This does not compile: two mistakes the compiler finds before anything runs.
interface User {
    name: string;
    age: number;
}

function describe(user: User): string {
    return `${user.name} is ${user.age} years old`;
}

const grace: User = { name: "Grace", age: "85" };
console.log(describe({ name: "Linus" }));

The program never starts. The compiler prints two errors instead:

index.ts(11,38): error TS2322: Type 'string' is not assignable to type 'number'.
index.ts(12,22): error TS2741: Property 'age' is missing in type '{ name: string; }' but required in type 'User'.

Each error names the file, the line and column, an error code (TS2322) and what is wrong. In plain JavaScript, both lines would run, and the second would print Linus is undefined years old without any warning. In an editor such as VS Code, the same errors appear as red underlines while you type, together with autocompletion that knows user has exactly a name and an age.

Typical bugs the checker catches:

• A misspelled property or method name (user.nmae, list.lenght).
• Calling a function with too few or too many arguments, or arguments of the wrong type.
• Using a value that might be null or undefined without checking it first.
• Forgetting to handle one case of a union such as "loading" | "done" | "error", when the code uses an exhaustive check.
• Code that breaks when a function you depend on changes its signature.

Types Disappear at Runtime

TypeScript's types exist only at compile time. The compiler checks them and then strips them out: the JavaScript it emits has no annotations and no interfaces, and it runs exactly like JavaScript you wrote by hand.

This input:

function double(n: number): number {
    return n * 2;
}

becomes this output:

function double(n) {
    return n * 2;
}

So TypeScript cannot check values that arrive while the program runs. Here the JSON text claims to be a User, the compiler has to trust that claim, and nothing complains at run time either:

interface User {
    name: string;
    age: number;
}

const json = '{"name": "Ada", "age": "thirty-six"}';
const user: User = JSON.parse(json); // JSON.parse returns any, so this is accepted

console.log(typeof user.age); // string, even though the type says number
console.log(user.age + 1);    // string concatenation, not addition

Output:

string
thirty-six1

Data from outside the program (API responses, form input, files) needs a runtime check, for example a type guard function that inspects the value. TypeScript then trusts the check and narrows the type for you.

Who Made TypeScript and Why

TypeScript was created at Microsoft, with Anders Hejlsberg (the designer of C#) leading the design. It was released to the public in October 2012 as version 0.8, and 1.0 followed in April 2014. It is open source under the Apache 2.0 license and developed on GitHub. By GitHub's count of monthly contributors, TypeScript became the most used language on GitHub in August 2025, ahead of Python and JavaScript.

The motivation was large JavaScript codebases. JavaScript has no way to say "this function takes a user object", so renaming a property or changing a function meant searching the whole codebase and hoping the tests covered every caller. TypeScript adds that information in a way that keeps full compatibility with JavaScript:

• It is a superset. Valid JavaScript is valid TypeScript syntax, so a project can switch one file at a time.
• It follows JavaScript. Apart from a few early additions such as enum and namespace, TypeScript adds no runtime features of its own; new syntax comes from the JavaScript standard.
• The types cost nothing at runtime. They are erased, so the output is as fast as hand-written JavaScript.

The current major version is TypeScript 7, whose compiler was rewritten in Go as a native program and type-checks large projects roughly ten times faster than the JavaScript-based compiler it replaced. The TypeScript 7 page covers what changed.

What Is TypeScript Used For? Frontend and Backend

TypeScript is used for the same software as JavaScript, on both the frontend and the backend. Because the output is JavaScript, TypeScript goes wherever JavaScript goes:

The same language covers both sides of a web app, which is why many teams share type definitions (for example the shape of an API response) between the server and the browser code.

How TypeScript Code Becomes JavaScript

There are two separate jobs, and different tools do each:

1. Type checking. Only the TypeScript compiler does this, usually as the tsc command (Deno's deno check runs a copy of the same compiler). It reads your .ts files, reports errors, and by default also writes .js files.
2. Removing the types. tsc can do it, and so can faster tools that skip type checking entirely: esbuild, SWC, Babel, and the type stripping built into Node.js, Deno and Bun.

A common setup uses a fast tool to run the code and tsc --noEmit (check only, write nothing) in the editor and in CI. Installing tsc and running a .ts file each have their own page in this chapter.

The Core Features in One Example

Day-to-day TypeScript uses a small set of features. This block has the main ones together:

type Status = "active" | "banned"; // a union of two string values

interface Account {
    id: number;
    name: string;
    status: Status;
    email?: string; // optional: may be missing
}

// A generic function: T is filled in from the argument
function first<T>(items: T[]): T | undefined {
    return items[0];
}

const accounts: Account[] = [
    { id: 1, name: "Ada", status: "active", email: "ada@example.com" },
    { id: 2, name: "Linus", status: "banned" },
];

const account = first(accounts); // inferred as Account | undefined
if (account !== undefined) {
    console.log(account.name, account.email ?? "no email"); // narrowed to Account
}

for (const a of accounts) {
    console.log(a.status === "active" ? `${a.name} can log in` : `${a.name} is banned`);
}

Output:

Ada ada@example.com
Ada can log in
Linus is banned

• Type annotations (name: string) state what a variable, parameter, property or return value holds.
• Type inference fills in the types you leave out: account gets its type from what first returns.
• Interfaces and type aliases (interface Account, type Status) give names to the shape of your data.
• Union types ("active" | "banned", T | undefined) describe a value that is one of several things.
• Narrowing: after a check such as account !== undefined, the compiler knows which case applies inside the block.
• Optional properties (email?: string) may be missing, so their type includes undefined.
• Generics (first<T>) let one function or type work with many types while keeping them connected: an array of Account in, an Account out.

Do You Need to Learn JavaScript First?

It helps, but you can learn both at once. Everything about how TypeScript code behaves at runtime (variables, functions, objects, arrays, promises, classes) is JavaScript, and TypeScript adds a layer that describes those values. If you already know JavaScript, the new material is the type system: annotations, interfaces, unions, generics and narrowing. If you are new to both, start with the basics of JavaScript values and functions, then add types as you go; the compiler's error messages are a good teacher, because they point at the exact line where a value is used the wrong way.

A practical order for learning TypeScript: install it and run a first file, learn the basic types and object types, then union types and narrowing, and after that functions and generics. That covers most application code.