TypeScript for JavaScript Developers: Getting Started

TypeScript adds static types to JavaScript, catching bugs at compile time and improving editor autocomplete. For full stack developers moving between frontend and backend, it is one of the highest-leverage skills to adopt.

Installing and Configuring

npm install -D typescript @types/node
npx tsc --init

A sensible tsconfig.json for Node or React projects enables strict, esModuleInterop, and skipLibCheck.

Core Concepts

Interfaces describe object shapes. Generics make reusable components type-safe. Union types (string | number) model values that can be one of several types.

interface User {
  id: string;
  email: string;
  role: 'admin' | 'member';
}

async function fetchUser(id: string): Promise<User> {
  const res = await fetch(`/api/users/${id}`);
  if (!res.ok) throw new Error('Not found');
  return res.json();
}

Migrating JavaScript Projects

Rename files to .ts or .tsx incrementally. Use any sparingly during migration, then tighten types. @types/* packages provide types for most npm libraries.

Conclusion

TypeScript pays off quickly in larger codebases and team environments. Start strict early-even if it feels slower, you will ship fewer runtime surprises.