What is TypeScript? A Beginner's Guide to Static Typing for JavaScript

If you have shipped any non-trivial JavaScript app, you have hit the same class of bug at least once: a function gets called with undefined instead of a string, a property name is misspelled, an API response shape changes silently, and the whole thing blows up in production at 2 a.m. TypeScript is the layer that catches those bugs before they ever reach a user.

This guide explains what TypeScript actually is in 2026, what "static typing" really means in practice, how the compiler fits into your workflow, and how to get a real typed file running on your machine in the next ten minutes. By the end you will be able to read a TypeScript file with confidence and write your own.

What TypeScript Actually Is

TypeScript is a programming language built by Microsoft that adds an optional static type system on top of JavaScript. Anything that is valid JavaScript is also valid TypeScript, which means TypeScript is a strict superset of the language you already know (or are learning). You write .ts files instead of .js files, you annotate variables and function signatures with type information, and a tool called the TypeScript compiler (tsc) checks those annotations and then strips them out, leaving plain JavaScript that runs in any browser, in Node.js, in Bun, in Deno, or anywhere else JavaScript runs.

The key idea is that TypeScript exists at build time, not at runtime. The browser never sees : string or interface User. Those annotations live in your source files and in your editor, where they power autocomplete, refactoring, and red squiggles. When you ship, you ship plain JavaScript.

Why Static Typing Actually Matters

A static type system means types are checked before your program runs. JavaScript is the opposite: types are checked at the exact moment a value is used, which is usually too late. Three concrete things change when you adopt TypeScript:

1. Whole categories of bugs become impossible. Misspelled property names, wrong argument order, calling a method on undefined, treating a number as a string — all caught before you press Run.
2. Refactoring becomes safe. Rename a field, and the editor finds every caller. In plain JavaScript you would grep, hope, and pray.
3. The editor becomes a teacher. Autocomplete shows you exactly what a function expects, what an object holds, and what an API returns, without alt-tabbing to docs.

The cost is small: a little extra writing, a build step, and the occasional dance with a tricky type. The payoff is the reason TypeScript is now the default for almost every serious frontend or Node.js project in 2026.

A One-Minute Tour of the Type System

The basics look like this:

index.ts

let total: number = 0;
const name: string = "Sara";
const tags: string[] = ["react", "ts"];
 
function greet(user: { id: number; name: string }): string {
  return `Hello, ${user.name}`;
}
 
type Result<T> = { ok: true; value: T } | { ok: false; error: string };

Notice three patterns. Type annotations come after the name with a colon. Object types describe the shape of an object inline. Generics (<T>) let you write code that works with many types while still being type-safe. The pattern at the bottom — a discriminated union — is the idiomatic way to model success vs failure in modern TypeScript.

Most of the time you do not even write annotations. TypeScript infers types from how you use values. let total = 0 is already typed as number. Annotate the boundaries (function parameters, exported APIs, public types); let the compiler infer the rest.

How to Set Up TypeScript in 2026

You need Node.js 22 LTS (or newer) and any editor with a TypeScript plugin. VS Code has TypeScript support built in.

In a fresh folder, run:

bash

npm init -y
npm install -D typescript@latest tsx
npx tsc --init --target es2024 --module nodenext --strict

That generates a tsconfig.json with sensible 2026 defaults. The crucial flag is strict: true. Turn it on from day one. Tutorials that disable strict mode are setting you up for the exact bugs TypeScript exists to prevent.

Now create src/index.ts:

index.ts

type Order = { id: string; item: string; total: number };
 
const orders: Order[] = [
  { id: "A1", item: "Latte", total: 5.5 },
  { id: "A2", item: "Croissant", total: 4.0 },
];
 
const sum = orders.reduce((s, o) => s + o.total, 0);
console.log(`${orders.length} orders, $${sum.toFixed(2)} total`);

Run it directly with npx tsx src/index.ts. No separate compile step needed during development. For production you compile with npx tsc and run the generated JavaScript.

Where TypeScript Goes from Here for You

Once you can read and write basic types, the next step is understanding the difference between TypeScript Interfaces vs Types: When to Use Each. After that come generics in real depth, utility types (Partial, Pick, Omit, ReturnType), and then a real project — typically a React or Next.js app, a Node API, or a CLI tool. Building once is worth ten more tutorials.

Common Mistakes Beginners Make

• Disabling strict mode. Half of TypeScript's value comes from the strict checks. Leave them on.
• Reaching for any. It silently disables type-checking for that value. Use unknown if you truly do not know the type, then narrow it.
• Annotating every single thing. Trust inference. Annotate function signatures and exported types; let the compiler do the rest.
• Treating the compiler as the linter. TypeScript checks types; use ESLint for code-quality rules.
• Following pre-2023 tutorials. The language has changed a lot. Anything teaching module: commonjs for new Node projects is outdated; use module: nodenext.

Quick Reference

• Install: npm install -D typescript tsx
• Init config: npx tsc --init --strict
• Run a file directly: npx tsx file.ts
• Compile for production: npx tsc
• Annotate: let x: number, function f(x: number): string
• Object shapes: type T = { a: number; b: string }
• Optional fields with ?, read-only with readonly
• unknown over any; narrow with typeof, in, or instanceof