Development

TypeScript Basics for Beginners: Types, Interfaces, and Why It Beats Plain JavaScript

A beginner-friendly guide to TypeScript fundamentals — types, interfaces, enums, and generics — and why learning it in 2026 is one of the best investments you can make as a developer.

Endless Forge
Endless Forge
Apr 9, 20268 min read
TypeScript Basics for Beginners: Types, Interfaces, and Why It Beats Plain JavaScript
Image source: TypeScript Basics for Beginners: Types, Interfaces, and Why It Beats Plain JavaScript

TypeScript Basics for Beginners: Types, Interfaces, and Why It Beats Plain JavaScript

TypeScript is JavaScript with a safety net. It adds a type system on top of JavaScript — meaning your editor and compiler can catch mistakes before your code ever runs. In 2026, TypeScript is no longer optional for serious web development: it’s the default choice at most companies, required by most modern frameworks, and expected in most developer job listings.

If you’ve been putting off learning TypeScript because it looks intimidating, this guide will show you it’s much simpler to get started than you think.

What is TypeScript and why does it exist?

JavaScript was designed for small scripts in the 1990s. It was never meant to power million-line codebases shared across hundreds of developers. TypeScript was created by Microsoft to fix JavaScript’s core weakness: it gives you the productivity of JavaScript with the safety of a typed language.

TypeScript code gets compiled down to plain JavaScript, which runs in any browser or Node.js environment. You write TypeScript — the compiler handles the rest.

Setting up TypeScript

You need Node.js installed. Then:

npm install -g typescript
tsc --version

To start a project:

mkdir my-ts-project
cd my-ts-project
tsc --init

This creates a tsconfig.json file that configures the TypeScript compiler for your project.

Basic Types: The Foundation of TypeScript

TypeScript lets you declare what type of value a variable holds. The most common basic types are:

let name: string = "Developer";
let age: number = 25;
let isActive: boolean = true;
let score: number[] = [10, 20, 30];
let anything: any = "flexible but avoid this";

The any type turns off type checking — it’s an escape hatch, not a feature to rely on. The goal of TypeScript is to have as few any types as possible.

TypeScript can also infer types automatically:

let city = "Madrid"; // TypeScript infers: string
let count = 0;       // TypeScript infers: number

You don’t always need to annotate — TypeScript is smart enough to figure it out from assignment.

Functions with Types

In plain JavaScript, a function can receive any argument and return anything. TypeScript lets you specify exactly what goes in and what comes out:

function greet(name: string): string {
  return "Hello, " + name + "!";
}

function add(a: number, b: number): number {
  return a + b;
}

function logMessage(message: string): void {
  console.log(message);
  // void means the function returns nothing
}

If you call greet(42), TypeScript will show an error before your code even runs. This is the core value proposition: catch mistakes at development time, not in production.

Interfaces: Describing the Shape of Objects

An interface defines the structure an object must have. Think of it as a contract: if you say an object implements this interface, it must have all the specified properties and types.

interface User {
  id: number;
  name: string;
  email: string;
  isAdmin?: boolean; // The ? makes this property optional
}

function displayUser(user: User): void {
  console.log(`User: ${user.name} — ${user.email}`);
}

const newUser: User = {
  id: 1,
  name: "Developer",
  email: "[email protected]",
};

displayUser(newUser); // Works perfectly

Interfaces are especially powerful when working with APIs, since you can define exactly the shape of data you expect to receive and TypeScript will warn you if something doesn’t match.

Type Aliases: Flexible Alternatives to Interfaces

Type aliases let you create named types for anything — not just objects:

type Status = "active" | "inactive" | "pending";
type ID = string | number;

let userStatus: Status = "active";
let userId: ID = 42;

The "active" | "inactive" | "pending" is called a union type — it means the variable can only hold one of those specific string values. TypeScript will warn you if you try to assign "deleted" or any other value not in the list.

Enums: Named Sets of Constants

Enums are a way to define a set of named constants that belong together:

enum Direction {
  Up = "UP",
  Down = "DOWN",
  Left = "LEFT",
  Right = "RIGHT",
}

function move(direction: Direction): void {
  console.log(`Moving ${direction}`);
}

move(Direction.Up);    // "Moving UP"
move(Direction.Left);  // "Moving LEFT"

Enums make your code more readable and prevent typos — you reference Direction.Up rather than the raw string "UP", so the editor can autocomplete it and catch errors.

Generics: Reusable Code for Any Type

Generics let you write functions and structures that work with any type, while still maintaining type safety. This sounds advanced but the basic idea is straightforward:

function getFirstItem<T>(items: T[]): T {
  return items[0];
}

const firstNumber = getFirstItem([1, 2, 3]);       // TypeScript knows it's a number
const firstName = getFirstItem(["Alice", "Bob"]);   // TypeScript knows it's a string

The T is a placeholder for “whatever type you pass in.” TypeScript figures out the actual type from the argument and enforces it throughout.

Why TypeScript Is Worth Learning in 2026

TypeScript is now the default in most serious JavaScript environments:

  • React projects are almost universally TypeScript in professional settings
  • Node.js projects increasingly ship TypeScript out of the box
  • Next.js, Vite, Astro all have first-class TypeScript support
  • Most AI-generated code suggestions assume TypeScript types
  • Job listings regularly require TypeScript as a non-negotiable skill

The learning curve is real but short. If you know JavaScript, you can write basic TypeScript in a day and be productive in a week. The payoff — fewer runtime bugs, better editor support, much easier refactoring — compounds over the life of every project you build.

Final Thoughts

TypeScript fundamentals you should internalize first:

  • Basic types (string, number, boolean, arrays) to annotate variables and parameters
  • Functions with typed parameters and return types
  • Interfaces to describe the shape of objects and API responses
  • Type aliases and union types for flexible, readable constraints
  • Generics for reusable logic that stays type-safe

Once you’re comfortable with these, exploring TypeScript’s more advanced features — utility types, decorators, conditional types — becomes straightforward and genuinely enjoyable.

Upcoming articles will cover TypeScript with React, working with third-party library types, and writing TypeScript that’s designed to be maintainable at scale.

Back to Blog