TypeScript for Beginners 2026: Getting Started

TypeScript has become the default language for serious web development in 2026. If you've been writing JavaScript and wondering what all the TypeScript hype is about - this guide is for you.

We'll start from zero, explain every concept with real examples, and by the end you'll know enough to use TypeScript in your own projects.

Why TypeScript in 2026?

JavaScript is flexible - sometimes too flexible. You can pass a string where a number is expected, call a function that doesn't exist, or access a property that was never defined. JavaScript won't complain until the code actually runs and crashes.

TypeScript fixes this by adding static types on top of JavaScript. Your editor catches mistakes before you even run the code.

Here's what makes TypeScript worth learning:

• Catch bugs early - errors show up in your editor, not in production
• Better autocomplete - your editor knows every property and method available
• Easier refactoring - rename a variable and TypeScript updates everything
• Industry standard - React, Next.js, Angular, and most modern frameworks prefer TypeScript
• Better documentation - types serve as built-in documentation for your code

If you've been following a JavaScript learning roadmap, TypeScript is the natural next step.

Setting Up TypeScript

Installation

You need Node.js installed first. Then install TypeScript globally:

npm install -g typescript

Check the version:

tsc --version

Create a Project

mkdir my-ts-project
cd my-ts-project
npm init -y
npm install typescript --save-dev
npx tsc --init

The tsconfig.json file controls how TypeScript compiles your code. The defaults are fine for now.

Your First TypeScript File

Create index.ts:

let greeting: string = "Hello, TypeScript!";
console.log(greeting);

Compile and run:

npx tsc index.ts
node index.js

Core Types in TypeScript

Primitive Types

let name: string = "Ali";
let age: number = 25;
let isActive: boolean = true;
let nothing: null = null;
let notDefined: undefined = undefined;

Arrays

let scores: number[] = [95, 87, 92];
let names: string[] = ["Ali", "Sara", "Ahmed"];

// Alternative syntax
let ids: Array<number> = [1, 2, 3];

Objects

let user: { name: string; age: number; email: string } = {
  name: "Ali",
  age: 25,
  email: "ali@example.com",
};

Type Inference

TypeScript is smart - you don't always need to write types explicitly:

let count = 10; // TypeScript knows this is a number
let message = "hello"; // TypeScript knows this is a string

Interfaces and Type Aliases

When you reuse the same object shape, define an interface:

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

function greetUser(user: User): string {
  return "Hello, " + user.name;
}

Type aliases work similarly:

type Status = "active" | "inactive" | "banned";

type Post = {
  title: string;
  content: string;
  status: Status;
};

When to Use Interface vs Type?

• Use interface for object shapes (classes, API responses)
• Use type for unions, primitives, and complex types
• Both work for most cases - pick one and stay consistent

Tip: When working with API data, paste a sample JSON response into a JSON to TypeScript converter to instantly generate accurate interfaces instead of writing them by hand.

Functions in TypeScript

// Typed parameters and return type
function add(a: number, b: number): number {
  return a + b;
}

// Arrow function
const multiply = (a: number, b: number): number => a * b;

// Optional parameters
function greet(name: string, title?: string): string {
  return title ? title + " " + name : "Hello, " + name;
}

// Default parameters
function createUser(name: string, role: string = "user") {
  return { name, role };
}

Generics - Write Reusable Code

Generics let you write functions that work with any type while keeping type safety:

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

const firstNumber = getFirst([10, 20, 30]); // type: number
const firstName = getFirst(["Ali", "Sara"]); // type: string

Generic Interfaces

interface ApiResponse<T> {
  data: T;
  success: boolean;
  message: string;
}

type UserResponse = ApiResponse<User>;
type PostResponse = ApiResponse<Post[]>;

This pattern is used everywhere in real projects - API calls, database queries, state management.

Enums

enum Role {
  Admin = "ADMIN",
  Editor = "EDITOR",
  Viewer = "VIEWER",
}

![Developer writing code on a laptop](https://images.pexels.com/photos/3760067/pexels-photo-3760067.jpeg?auto=compress&cs=tinysrgb&w=1600 "Good developer tools reduce friction without hiding how the code works.")

function checkAccess(role: Role): boolean {
  return role === Role.Admin;
}

Union and Intersection Types

// Union  - can be either type
type ID = string | number;

function findUser(id: ID) {
  // works with both "abc" and 123
}

// Intersection  - combines types
type Employee = User & {
  department: string;
  salary: number;
};

TypeScript with React

If you're building React apps with modern best practices, TypeScript is almost required in 2026.

interface ButtonProps {
  label: string;
  onClick: () => void;
  variant?: "primary" | "secondary";
  disabled?: boolean;
}

function Button({ label, onClick, variant = "primary", disabled }: ButtonProps) {
  return (
    <button
      onClick={onClick}
      disabled={disabled}
      className={variant === "primary" ? "btn-primary" : "btn-secondary"}
    >
      {label}
    </button>
  );
}

Typing useState and useEffect

import { useState, useEffect } from "react";

function UserProfile() {
  const [user, setUser] = useState<User | null>(null);
  const [loading, setLoading] = useState<boolean>(true);

  useEffect(() => {
    fetch("/api/user")
      .then((res) => res.json())
      .then((data: User) => {
        setUser(data);
        setLoading(false);
      });
  }, []);

  if (loading) return <p>Loading...</p>;
  if (!user) return <p>No user found</p>;

  return <h1>{user.name}</h1>;
}

TypeScript Project Setup with Next.js

Next.js has built-in TypeScript support. Create a new project:

npx create-next-app@latest my-app --typescript

That's it - no extra config needed. Every file uses .tsx or .ts automatically.

Using VS Code with the right extensions makes the TypeScript experience even better - you get instant error highlighting and intelligent suggestions.

Common Mistakes Beginners Make

1. Using any Everywhere

// BAD  - defeats the purpose of TypeScript
let data: any = fetchData();

// GOOD  - define the actual type
interface Product {
  id: number;
  name: string;
  price: number;
}
let data: Product[] = fetchData();

2. Not Using Strict Mode

In tsconfig.json, make sure strict mode is on:

{
  "compilerOptions": {
    "strict": true
  }
}

3. Ignoring Type Errors

Never use @ts-ignore unless you absolutely have to. Fix the type instead.

TypeScript Utility Types

TypeScript comes with built-in utility types:

// Make all properties optional
type PartialUser = Partial<User>;

// Make all properties required
type RequiredUser = Required<User>;

// Pick specific properties
type UserPreview = Pick<User, "name" | "email">;

// Omit specific properties
type UserWithoutId = Omit<User, "id">;

// Record type
type UserRoles = Record<string, Role>;

What to Learn Next

Once you're comfortable with the basics:

1. Advanced generics - conditional types, mapped types
2. Zod - runtime validation that generates TypeScript types
3. tRPC - end-to-end type safety for APIs
4. Drizzle ORM - type-safe database queries

If you're just starting your programming journey, learn JavaScript first, then move to TypeScript. The transition is smooth once you understand the fundamentals.

What to Build Next

Combine TypeScript with Tailwind CSS 4 for type-safe, beautifully styled apps. Then show off your TypeScript projects on a professional portfolio website.

Related Guides

• Top 10 Programming Languages 2026

Final Thoughts

TypeScript isn't just a trend - it's the standard for professional web development. The initial learning curve is small, and the payoff is massive: fewer bugs, better tooling, and code that's easier to maintain.

Start with a small project. Add types to your existing JavaScript code. Once you experience the power of TypeScript's autocomplete and error catching, you won't want to go back.