TypeScript for JavaScript Developers: What You Need to Know to Get Started

I resisted TypeScript for two years. “It’s just JavaScript with extra steps” I told myself. Then I joined a team using it on a 200,000-line codebase and understood immediately why it exists. Let me save you the two years.

Why TypeScript Exists (The Real Reason)

JavaScript has no types. This is great for small scripts. It’s terrible for large applications where ten developers are working on the same codebase. Without types, you spend significant time debugging errors that TypeScript would catch before you even run the code.

// JavaScript - no warning until runtime
function getUsername(user) {
  return user.name.toUpperCase(); // crashes if user.name is undefined
}

// TypeScript - error at compile time
function getUsername(user: { name: string }): string {
  return user.name.toUpperCase(); // TypeScript guarantees name exists and is a string
}

The Basics You’ll Use Every Day

Primitive Types

let name: string = "Alice";
let age: number = 30;
let isActive: boolean = true;
let data: unknown = fetchData(); // when you don't know the type yet

Object Types and Interfaces

interface User {
  id: number;
  name: string;
  email: string;
  role?: string; // Optional with ?
}

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

Function Types

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

// Arrow function
const greet = (name: string): string => `Hello, ${name}!`;

// Function that doesn't return anything
function logError(message: string): void {
  console.error(message);
}

Arrays and Generics

const numbers: number[] = [1, 2, 3];
const users: User[] = [];

// Generic function - works with any type
function first(arr: T[]): T | undefined {
  return arr[0];
}

const firstNumber = first(numbers); // TypeScript knows this is number | undefined
const firstUser = first(users);     // TypeScript knows this is User | undefined

Union Types (Very Useful)

// A value that can be one of several types
type Status = "pending" | "active" | "inactive";
type Id = string | number;

function formatId(id: Id): string {
  return typeof id === 'number' ? id.toString() : id;
}

Type Assertions and Non-Null

// When you know more than TypeScript does
const element = document.getElementById('title') as HTMLElement;
const value = someValue!; // Tell TS this won't be null (use carefully)

Getting Started in an Existing Project

You don’t have to convert everything at once. TypeScript can be adopted incrementally:

npm install -D typescript @types/node
npx tsc --init  # Creates tsconfig.json

Start by renaming a few .js files to .ts. Fix the errors TypeScript finds. Gradually add types to function parameters. You’ll be fully typed before you know it.

tsconfig.json Settings That Matter

{
  "compilerOptions": {
    "strict": true,          // Enable all strict checks - do this
    "target": "ES2020",      // What JavaScript version to output
    "module": "commonjs",    // Module system (commonjs for Node, esnext for browsers)
    "outDir": "./dist",      // Where compiled files go
    "rootDir": "./src"       // Where your source files are
  }
}

Turn on strict mode from day one. It catches the most errors and is easier to start with than to add to an existing project later. TypeScript will feel like friction at first, then like a superpower. Give it two weeks.