TypeScript Fundamentals
TypeScript Fundamentals
JavaScript with Superpowers
🔧 Add type safety to your JavaScript
What is TypeScript?
- Superset of JavaScript
- Adds static type checking
- Compiles to JavaScript
- Developed by Microsoft
- Industry standard for large projects
Why TypeScript?
Benefits
- Catch errors at compile time
- Better IDE support
- Improved refactoring
- Self-documenting code
- Better team collaboration
Trade-offs
- Learning curve
- Build step required
- More verbose code
Basic Types
typescript
// Primitives
let name: string = "John";
let age: number = 30;
let isActive: boolean = true;
// Arrays
let numbers: number[] = [1, 2, 3];
let names: Array<string> = ["Alice", "Bob"];
// Any (avoid when possible)
let anything: any = "could be anything"; Object Types
typescript
// Object type annotation
let person: {
name: string;
age: number;
email?: string; // Optional property
} = {
name: "John",
age: 30
};
// Index signature
let scores: { [key: string]: number } = {
math: 95,
science: 87
}; Interfaces
typescript
interface User {
id: number;
name: string;
email: string;
isAdmin?: boolean;
}
const user: User = {
id: 1,
name: "Alice",
email: "alice@example.com"
}; --
Extending Interfaces
typescript
interface Person {
name: string;
age: number;
}
interface Employee extends Person {
employeeId: string;
department: string;
}
const emp: Employee = {
name: "Bob",
age: 25,
employeeId: "EMP001",
department: "Engineering"
}; Functions
typescript
// Function declaration
function greet(name: string): string {
return `Hello, ${name}!`;
}
// Arrow function
const add = (a: number, b: number): number => a + b;
// Optional parameters
function buildName(first: string, last?: string): string {
return last ? `${first} ${last}` : first;
}
// Default parameters
function greetUser(name: string = "Guest"): string {
return `Welcome, ${name}!`;
} Union Types
typescript
// Union types
type Status = "loading" | "success" | "error";
let currentStatus: Status = "loading";
// Function with union parameters
function formatValue(value: string | number): string {
if (typeof value === "string") {
return value.toUpperCase();
}
return value.toString();
} Type Aliases
typescript
// Type alias
type Point = {
x: number;
y: number;
};
type ID = string | number;
// Function type
type EventHandler = (event: Event) => void;
const onClick: EventHandler = (e) => {
console.log("Clicked!");
}; Classes
typescript
class Animal {
private name: string;
protected species: string;
constructor(name: string, species: string) {
this.name = name;
this.species = species;
}
public getName(): string {
return this.name;
}
}
class Dog extends Animal {
constructor(name: string) {
super(name, "Canine");
}
public bark(): void {
console.log(`${this.getName()} barks!`);
}
} Generics
typescript
// Generic function
function identity<T>(arg: T): T {
return arg;
}
const stringResult = identity<string>("hello");
const numberResult = identity<number>(42);
// Generic interface
interface Container<T> {
value: T;
getValue(): T;
}
const stringContainer: Container<string> = {
value: "hello",
getValue() { return this.value; }
}; Utility Types
typescript
interface User {
id: number;
name: string;
email: string;
password: string;
}
// Partial - makes all properties optional
type UserUpdate = Partial<User>;
// Pick - select specific properties
type UserPublic = Pick<User, 'id' | 'name' | 'email'>;
// Omit - exclude specific properties
type UserCreate = Omit<User, 'id'>; Type Guards
typescript
// typeof guard
function padLeft(value: string, padding: string | number) {
if (typeof padding === "number") {
return Array(padding + 1).join(" ") + value;
}
if (typeof padding === "string") {
return padding + value;
}
}
// Custom type guard
function isString(value: any): value is string {
return typeof value === "string";
} Modules
typescript
// math.ts
export function add(a: number, b: number): number {
return a + b;
}
export const PI = 3.14159;
// app.ts
import { add, PI } from './math';
const result = add(2, 3);
console.log(`PI is ${PI}`); Configuration
tsconfig.json
json
{
"compilerOptions": {
"target": "ES2020",
"module": "ESNext",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
},
"include": ["src/**/*"],
"exclude": ["node_modules", "dist"]
} Best Practices
- ✅ Enable strict mode
- ✅ Use interfaces for object shapes
- ✅ Prefer type unions over any
- ✅ Use meaningful type names
- ✅ Leverage type inference
- ❌ Avoid any type
- ❌ Don't over-engineer types
Start Using TypeScript
Better JavaScript through static typing