# TypeScript for JavaScript Developers: Your 5-Minute Crash Course

If you write JavaScript, you've probably heard the hype around TypeScript. The good news? TypeScript **is** JavaScript—with a smart type system layered on top. All your existing JS code works perfectly in TypeScript. The magic happens when TypeScript catches bugs before they reach production.

This guide walks you through TypeScript basics, focusing on its type system that makes your code more reliable and your editor smarter.

## TypeScript = JavaScript + Types

JavaScript lets you mix types freely:

```javascript
let value = "Hello";  // string
value = 42;           // Now a number? No problem!
```

TypeScript flags these inconsistencies:

```typescript
let value: string = "Hello";
value = 42;  // ❌ Error: Type 'number' is not assignable to type 'string'
```

**Key benefit**: Your JS code runs unchanged, but TypeScript gives you early warnings about potential bugs.

## Types by Inference (The Easy Way)

TypeScript is smart—it guesses types from your code without extra typing.

```javascript
let helloWorld = "Hello World";
// TypeScript infers: let helloWorld: string
console.log(helloWorld.toUpperCase()); // ✅ Autocomplete works!
```

This powers VS Code's JavaScript IntelliSense. No config needed—TypeScript understands JS deeply.

## Defining Types Explicitly (When Needed)

For complex objects or dynamic patterns, explicitly declare types using `interface`:

```typescript
interface User {
  name: string;
  id: number;
}

const user: User = {
  name: "Hayes",
  id: 0
};
```

**What happens if you mess up?**

```typescript
const wrongUser: User = {
  username: "Hayes",  // ❌ Error: 'username' does not exist in type 'User'
  id: 0
};
```

TypeScript catches these at edit-time, not runtime.

## Types Work Everywhere

## With Classes

```typescript
interface User {
  name: string;
  id: number;
}

class UserAccount {
  name: string;
  id: number;

  constructor(name: string, id: number) {
    this.name = name;
    this.id = id;
  }
}

const user: User = new UserAccount("Murphy", 1);  // ✅ Matches interface
```

## With Functions

```typescript
function deleteUser(user: User) {
  console.log(`Deleting ${user.name}`);
}

function getAdminUser(): User {
  return { name: "Admin", id: 1 };
}
```

## Built-in Primitive Types

TypeScript adds safety to JS primitives:

* `string`, `number`, `boolean`, `bigint`, `null`, `undefined`, `symbol`
    
* Bonus: `any` (anything goes), `unknown` (prove what it is), `never` (impossible), `void`
    

```typescript
function greet(name: string): string {
  return `Hello ${name}`;
}
```

## Composing Complex Types

## Unions: "This OR That"

```typescript
type WindowStates = "open" | "closed" | "minimized";

let windowState: WindowStates = "open";  // ✅
windowState = "maximized";  // ❌ Not in union
```

**Practical example**—handle multiple input types:

```typescript
function getLength(input: string | string[]) {
  if (typeof input === "string") {
    return input.length;
  }
  return input.length;
}
```

## Generics: Types with Variables

Arrays are generics in disguise:

```typescript
type StringArray = Array<string>;
type NumberArray = Array<number>;
```

Build reusable components:

```typescript
interface Backpack<ItemType> {
  add: (item: ItemType) => void;
  get: () => ItemType;
}

declare const backpack: Backpack<string>;
const item = backpack.get();     // ✅ TypeScript knows it's string
backpack.add(42);                // ❌ Error: number ≠ string
```

## Structural Typing (Duck Typing on Steroids)

TypeScript cares about **shape**, not names. If it walks like a duck and quacks like a duck...

```typescript
interface Point {
  x: number;
  y: number;
}

function logPoint(p: Point) {
  console.log(`${p.x}, ${p.y}`);
}

const point = { x: 12, y: 26 };
logPoint(point);  // ✅ Works! Same shape

const rect = { x: 33, y: 3, width: 30, height: 80 };
logPoint(rect);   // ✅ Still works (ignores extra props)

const color = { hex: "#187ABF" };
logPoint(color);  // ❌ Missing x, y
```

**Classes work too**:

```typescript
class VirtualPoint {
  constructor(public x: number, public y: number) {}
}

logPoint(new VirtualPoint(13, 56));  // ✅ Perfect match
```

## Interface vs Type: Quick Rule

* **Use** `interface` for object shapes (most cases)
    
* **Use** `type` for unions, primitives, or complex intersections
    

```typescript
// Good
interface User { name: string; id: number; }

// Also good (unions)
type Status = "active" | "inactive";
```

## Why JavaScript Devs Love TypeScript

1. **Gradual adoption**—rename `.js` to `.ts`, get benefits immediately
    
2. **Better refactoring**—VS Code understands your entire codebase
    
3. **Team scale**—catches bugs in large codebases
    
4. **Framework friendly**—React, Angular, Vue all love TypeScript
    

**Start today**: Install TypeScript globally (`npm i -g typescript`), rename a JS file to `.ts`, and watch the magic. Your future self will thank you.