TypeScript Development
Modern TypeScript patterns and type-safe development.
Type Fundamentals
Basic Types
// Primitives
const name: string = 'John';
const age: number = 30;
const isActive: boolean = true;
const nothing: null = null;
const notDefined: undefined = undefined;
// Arrays
const numbers: number[] = [1, 2, 3];
const strings: Array<string> = ['a', 'b', 'c'];
const mixed: (string | number)[] = [1, 'two', 3];
// Tuples
const tuple: [string, number] = ['hello', 42];
const namedTuple: [name: string, age: number] = ['John', 30];
// Objects
const user: { name: string; age: number } = { name: 'John', age: 30 };
// Any vs Unknown
const dangerous: any = getData(); // Avoid - no type checking
const safe: unknown = getData(); // Prefer - requires type narrowing
if (typeof safe === 'string') {
console.log(safe.toUpperCase()); // Now TypeScript knows it's string
}Interfaces vs Types
// Interface - extendable, for objects
interface User {
id: number;
name: string;
email: string;
}
interface AdminUser extends User {
role: 'admin';
permissions: string[];
}
// Type - more flexible
type ID = string | number;
type Callback = (data: string) => void;
type Status = 'pending' | 'active' | 'inactive';
// Intersection types
type UserWithTimestamps = User & {
createdAt: Date;
updatedAt: Date;
};
// Use interface for objects, type for unions/primitivesOptional & Readonly
interface Config {
required: string;
optional?: string; // May be undefined
readonly immutable: string; // Can't be reassigned
}
// Readonly utility
type ReadonlyUser = Readonly<User>;
// Partial - all optional
type PartialUser = Partial<User>;
// Required - all required
type RequiredUser = Required<User>;Generics
Basic Generics
// Generic function
function identity<T>(value: T): T {
return value;
}
const num = identity(42); // T inferred as number
const str = identity('hello'); // T inferred as string
// Generic interface
interface Response<T> {
data: T;
status: number;
message: string;
}
const userResponse: Response<User> = {
data: { id: 1, name: 'John', email: 'john@example.com' },
status: 200,
message: 'Success',
};
// Generic class
class Queue<T> {
private items: T[] = [];
enqueue(item: T): void {
this.items.push(item);
}
dequeue(): T | undefined {
return this.items.shift();
}
}
const numberQueue = new Queue<number>();
numberQueue.enqueue(1);Constraints
// Constrain to specific shape
interface HasId {
id: number;
}
function findById<T extends HasId>(items: T[], id: number): T | undefined {
return items.find(item => item.id === id);
}
// Multiple constraints
function merge<T extends object, U extends object>(a: T, b: U): T & U {
return { ...a, ...b };
}
// keyof constraint
function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
return obj[key];
}
const user = { name: 'John', age: 30 };
const name = getProperty(user, 'name'); // string
const age = getProperty(user, 'age'); // numberUtility Types
// Pick - select specific properties
type UserPreview = Pick<User, 'id' | 'name'>;
// Omit - exclude properties
type UserWithoutEmail = Omit<User, 'email'>;
// Record - map keys to values
type UserRoles = Record<string, 'admin' | 'user' | 'guest'>;
// Extract / Exclude
type Status = 'pending' | 'active' | 'deleted';
type ActiveStatus = Extract<Status, 'pending' | 'active'>; // 'pending' | 'active'
type WithoutDeleted = Exclude<Status, 'deleted'>; // 'pending' | 'active'
// ReturnType / Parameters
function createUser(name: string, email: string): User {
return { id: 1, name, email };
}
type CreateUserReturn = ReturnType<typeof createUser>; // User
type CreateUserParams = Parameters<typeof createUser>; // [string, string]
// NonNullable
type MaybeString = string | null | undefined;
type DefinitelyString = NonNullable<MaybeString>; // stringType Guards
// typeof guard
function process(value: string | number) {
if (typeof value === 'string') {
return value.toUpperCase();
}
return value * 2;
}
// instanceof guard
class Dog {
bark() { console.log('Woof!'); }
}
class Cat {
meow() { console.log('Meow!'); }
}
function speak(animal: Dog | Cat) {
if (animal instanceof Dog) {
animal.bark();
} else {
animal.meow();
}
}
// in guard
interface Bird { fly(): void; }
interface Fish { swim(): void; }
function move(animal: Bird | Fish) {
if ('fly' in animal) {
animal.fly();
} else {
animal.swim();
}
}
// Custom type guard
interface ApiError {
code: string;
message: string;
}
function isApiError(error: unknown): error is ApiError {
return (
typeof error === 'object' &&
error !== null &&
'code' in error &&
'message' in error
);
}
// Usage
try {
await fetchData();
} catch (error) {
if (isApiError(error)) {
console.log(error.code); // TypeScript knows it's ApiError
}
}Advanced Patterns
Discriminated Unions
interface LoadingState {
status: 'loading';
}
interface SuccessState<T> {
status: 'success';
data: T;
}
interface ErrorState {
status: 'error';
error: string;
}
type AsyncState<T> = LoadingState | SuccessState<T> | ErrorState;
function handleState<T>(state: AsyncState<T>) {
switch (state.status) {
case 'loading':
return 'Loading...';
case 'success':
return state.data; // TypeScript knows data exists
case 'error':
return state.error; // TypeScript knows error exists
}
}Template Literal Types
type EventName = 'click' | 'focus' | 'blur';
type EventHandler = `on${Capitalize<EventName>}`; // 'onClick' | 'onFocus' | 'onBlur'
type HTTPMethod = 'GET' | 'POST' | 'PUT' | 'DELETE';
type Endpoint = `/api/${string}`;
function request(method: HTTPMethod, url: Endpoint) {
// ...
}
request('GET', '/api/users'); // OK
request('GET', '/users'); // Error: doesn't start with /api/Mapped Types
// Make all properties optional
type Optional<T> = {
[K in keyof T]?: T[K];
};
// Make all properties nullable
type Nullable<T> = {
[K in keyof T]: T[K] | null;
};
// Prefix keys
type Prefixed<T, P extends string> = {
[K in keyof T as `${P}${string & K}`]: T[K];
};
type PrefixedUser = Prefixed<User, 'user_'>;
// { user_id: number; user_name: string; user_email: string }Conditional Types
// Basic conditional
type IsString<T> = T extends string ? true : false;
type A = IsString<string>; // true
type B = IsString<number>; // false
// Extract array element type
type ElementOf<T> = T extends (infer E)[] ? E : never;
type StringElement = ElementOf<string[]>; // string
// Function return type
type AsyncReturnType<T> = T extends (...args: any[]) => Promise<infer R> ? R : never;
async function fetchUser(): Promise<User> {
return { id: 1, name: 'John', email: 'john@example.com' };
}
type FetchedUser = AsyncReturnType<typeof fetchUser>; // UserReact TypeScript
Component Types
import { FC, ReactNode, ComponentProps } from 'react';
// Props interface
interface ButtonProps {
variant: 'primary' | 'secondary';
size?: 'sm' | 'md' | 'lg';
children: ReactNode;
onClick?: () => void;
}
// Function component
function Button({ variant, size = 'md', children, onClick }: ButtonProps) {
return (
<button className={`btn-${variant} btn-${size}`} onClick={onClick}>
{children}
</button>
);
}
// With FC (includes children)
const Card: FC<{ title: string; children: ReactNode }> = ({ title, children }) => (
<div className="card">
<h2>{title}</h2>
{children}
</div>
);
// Extending HTML element props
interface InputProps extends ComponentProps<'input'> {
label: string;
error?: string;
}
function Input({ label, error, ...props }: InputProps) {
return (
<div>
<label>{label}</label>
<input {...props} />
{error && <span className="error">{error}</span>}
</div>
);
}Hooks
import { useState, useEffect, useRef, useCallback, useMemo } from 'react';
// useState with type
const [user, setUser] = useState<User | null>(null);
const [items, setItems] = useState<string[]>([]);
// useRef
const inputRef = useRef<HTMLInputElement>(null);
const countRef = useRef<number>(0);
// useCallback with types
const handleClick = useCallback((id: number) => {
console.log(id);
}, []);
// useMemo
const expensiveValue = useMemo(() => {
return items.filter(item => item.length > 5);
}, [items]);
// Custom hook
function useLocalStorage<T>(key: string, initialValue: T) {
const [value, setValue] = useState<T>(() => {
const stored = localStorage.getItem(key);
return stored ? JSON.parse(stored) : initialValue;
});
useEffect(() => {
localStorage.setItem(key, JSON.stringify(value));
}, [key, value]);
return [value, setValue] as const;
}Configuration
tsconfig.json
{
"compilerOptions": {
"target": "ES2022",
"module": "ESNext",
"moduleResolution": "bundler",
"lib": ["ES2022", "DOM", "DOM.Iterable"],
"strict": true,
"noUncheckedIndexedAccess": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"declaration": true,
"declarationMap": true,
"sourceMap": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"baseUrl": ".",
"paths": {
"@/*": ["src/*"],
"@components/*": ["src/components/*"]
},
"outDir": "dist",
"rootDir": "src"
},
"include": ["src/**/*"],
"exclude": ["node_modules", "dist"]
}Strict Mode Benefits
// strictNullChecks - catches null/undefined errors
const user: User | null = getUser();
user.name; // Error: user might be null
user?.name; // OK: optional chaining
// noImplicitAny - requires explicit types
function process(data) { } // Error: implicit 'any'
function process(data: unknown) { } // OK
// strictPropertyInitialization - ensures class properties are initialized
class User {
name: string; // Error: not initialized
name: string = ''; // OK
}