TypeScript for JavaScript Developers: An Introduction

TypeScript adds static type checking to JavaScript. You can introduce it gradually, starting with function inputs, return values, and the shapes of objects your code uses.

What TypeScript Is and Is Not

TypeScript is JavaScript with a type layer on top. JavaScript syntax is the starting point, but code that runs as JavaScript may produce TypeScript checking errors. TypeScript compiles to JavaScript — the types are erased completely before execution. At runtime, your code is plain JavaScript.

What TypeScript adds is a static analysis step that runs before your code executes. It reads your code, infers the types of values, and checks that you are using them consistently. When it finds a problem, it reports an error at compile time — before a user hits the bug in production.

TypeScript does not:

• Make your code run faster
• Validate data at runtime (types are compile-time only)
• Eliminate the need for tests
• Prevent every bug — only the class of bugs that come from wrong types

It does, in practice:

• Catch undefined variable access, property typos, and wrong argument types before you run the code
• Make your IDE significantly more useful (autocomplete, go-to-definition, inline errors)
• Serve as lightweight documentation — function signatures tell you what the function expects and returns
• Help with refactoring by checking typed references and changed signatures

Writing Your First TypeScript

You likely already have Node installed. Add TypeScript to a project:

npm install --save-dev typescript
npx tsc --init

tsc --init creates a default tsconfig.json. For now, leave it as-is.

Create a file src/greet.ts:

function greet(name: string): string {
  return `Hello, ${name}`;
}
 
console.log(greet("Alice"));
console.log(greet(42)); // Error: Argument of type 'number' is not assignable to parameter of type 'string'

Run npx tsc and the compiler reports the error on greet(42) before the code runs. The check identifies that the argument does not match the declared parameter type.

Basic Types

TypeScript includes primitive types that map directly to JavaScript runtime values:

let name: string = "Alice";
let age: number = 30;
let active: boolean = true;
let nothing: null = null;
let missing: undefined = undefined;

You do not need to write the type annotation on every variable. TypeScript infers the type from the value:

let name = "Alice"; // TypeScript infers: string
let age = 30;       // TypeScript infers: number

Annotate when inference cannot work — function parameters, for instance:

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

Object Types and Interfaces

interface User {
  id: string;
  email: string;
  role: "admin" | "member";
  createdAt?: Date; // optional — can be undefined
}
 
function formatUser(user: User): string {
  return `${user.email} (${user.role})`;
}

The interface defines the shape. TypeScript checks that objects passed to formatUser have at least the required fields. The ? on createdAt means the property is optional.

Arrays and Union Types

const ids: string[] = ["abc", "def"];
const mixed: (string | number)[] = ["abc", 1, "def", 2];
 
// Union type: a value can be one of several types
type Status = "pending" | "active" | "cancelled";
let orderStatus: Status = "pending";
orderStatus = "shipped"; // Error: Type '"shipped"' is not assignable to type 'Status'

A union of string literal types limits a value to a listed set of strings. It is distinct from an enum; a discriminated union combines types that share a literal-valued distinguishing property. See the TypeScript handbook.

Topics to Learn Next

For JavaScript developers, the main adjustment period is:

Learning where to put types. The rule of thumb: annotate function parameters and return types. Let inference handle everything else.

Getting comfortable with null and undefined errors. With strictNullChecks on, TypeScript will tell you that a value might be undefined when you try to use it. This is correct — it means there is a real bug risk. Add a check, a default value, or a guard.

Understanding any. If you write let x: any, TypeScript stops checking x. It is the escape hatch that defeats the type system. Use it sparingly and only when necessary, usually at the edges where you are integrating with an untyped third-party library.

What to Do Next

Once you are writing basic TypeScript comfortably:

1. Enable strict: true in your tsconfig and work through the errors
2. Add noUncheckedIndexedAccess: true — it catches a common class of crash
3. Start typing your API response shapes and use a validation library at the boundary

Discuss TypeScript adoption with LinkIT.