Skip to content

TypeScript: The 80-20 Guide#

Welcome to the TypeScript 80-20 Guide - covering the 20% of TypeScript features you'll use 80% of the time.

🎯 What is TypeScript?#

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. It adds optional static typing, classes, and interfaces to help you build more robust applications.

// JavaScript
function greet(name) {
  return "Hello, " + name;
}

// TypeScript
function greet(name: string): string {
  return "Hello, " + name;
}

🚀 Quick Start#

Installation#

# Install TypeScript globally
npm install -g typescript

# Or in your project
npm install --save-dev typescript

# Initialize a TypeScript project
npx tsc --init

Your First TypeScript File#

Create app.ts:

const message: string = "Hello, TypeScript!";
console.log(message);

Compile and run:

# Compile to JavaScript
tsc app.ts

# Run the compiled file
node app.js

📚 Core Concepts#

This guide covers the essential TypeScript features:

1. Basic Types#

Learn about primitive types, arrays, tuples, and enums.

2. Functions#

Type your function parameters, return values, and learn about function overloads.

3. Interfaces & Types#

Define contracts for objects and understand when to use interfaces vs type aliases.

4. Classes#

Object-oriented programming with TypeScript classes, access modifiers, and inheritance.

5. Generics#

Write reusable, type-safe code with generic functions and classes.

6. Utility Types#

Master built-in utility types like Partial, Pick, Omit, and Record.

7. Type Guards & Narrowing#

Safely work with union types and handle runtime type checking.

8. Modules & Namespaces#

Organize your code with ES6 modules and TypeScript namespaces.

🎓 Best Practices#

  1. Enable strict mode in tsconfig.json
  2. Use interface for objects, type for unions/intersections
  3. Avoid any - use unknown when type is truly unknown
  4. Leverage type inference - don't over-annotate
  5. Use readonly for immutability

🔧 Essential tsconfig.json#

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "lib": ["ES2020"],
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

🛠️ Common Use Cases#

React with TypeScript#

import React, { FC } from 'react';

interface Props {
  name: string;
  age?: number;
}

const UserCard: FC<Props> = ({ name, age }) => {
  return (
    <div>
      <h2>{name}</h2>
      {age && <p>Age: {age}</p>}
    </div>
  );
};

Express with TypeScript#

import express, { Request, Response } from 'express';

const app = express();

app.get('/api/users/:id', (req: Request, res: Response) => {
  const userId = req.params.id;
  res.json({ id: userId, name: 'John Doe' });
});

app.listen(3000);

Async/Await with Types#

async function fetchUser(id: string): Promise<User> {
  const response = await fetch(`/api/users/${id}`);
  const data: User = await response.json();
  return data;
}

📖 Additional Resources#

🎯 Next Steps#

Start with Basic Types and work your way through each section. Each guide includes practical examples and common patterns you'll use in real projects.

Pro Tip: The best way to learn TypeScript is to start using it in your projects. Begin with basic type annotations and gradually adopt more advanced features as you become comfortable.