TypeScript Advanced Types

Master TypeScript's advanced type system for building robust, type-safe applications.

Generics

// Basic generic function
function identity<T>(value: T): T {
  return value;
}

// Generic with constraint
interface HasLength { length: number; }

function logLength<T extends HasLength>(item: T): T {
  console.log(item.length);
  return item;
}

// Multiple type parameters
function merge<T, U>(obj1: T, obj2: U): T & U {
  return { ...obj1, ...obj2 };
}

Conditional Types

// Basic conditional
type IsString<T> = T extends string ? true : false;

// Extract return type
type ReturnType<T> = T extends (...args: any[]) => infer R ? R : never;

// Nested conditions
type TypeName<T> =
  T extends string ? "string" :
  T extends number ? "number" :
  T extends boolean ? "boolean" :
  "object";

Mapped Types

// Make all properties readonly
type Readonly<T> = { readonly [P in keyof T]: T[P] };

// Make all properties optional
type Partial<T> = { [P in keyof T]?: T[P] };

// Key remapping
type Getters<T> = {
  [K in keyof T as `get${Capitalize<string & K>}`]: () => T[K]
};

// Filter by type
type PickByType<T, U> = {
  [K in keyof T as T[K] extends U ? K : never]: T[K]
};

Template Literal Types

type EventName = "click" | "focus" | "blur";
type EventHandler = `on${Capitalize<EventName>}`;
// "onClick" | "onFocus" | "onBlur"

// String manipulation
type Upper = Uppercase<"hello">;      // "HELLO"
type Lower = Lowercase<"HELLO">;      // "hello"
type Cap = Capitalize<"john">;        // "John"

Utility Types

// Built-in utilities
type PartialUser = Partial<User>;              // All optional
type RequiredUser = Required<PartialUser>;      // All required
type ReadonlyUser = Readonly<User>;             // All readonly
type NameEmail = Pick<User, "name" | "email">;  // Select props
type NoPassword = Omit<User, "password">;       // Remove props

type T1 = Exclude<"a" | "b" | "c", "a">;        // "b" | "c"
type T2 = Extract<"a" | "b" | "c", "a" | "b">;  // "a" | "b"
type T3 = NonNullable<string | null>;           // string
type PageInfo = Record<"home" | "about", { title: string }>;

React TypeScript Patterns

Generic Components

interface ListProps<T> {
  items: T[];
  renderItem: (item: T) => React.ReactNode;
  keyExtractor: (item: T) => string;
}

function List<T>({ items, renderItem, keyExtractor }: ListProps<T>) {
  return (
    <ul>
      {items.map(item => (
        <li key={keyExtractor(item)}>{renderItem(item)}</li>
      ))}
    </ul>
  );
}

Typed Hooks

type ApiState<T> =
  | { status: 'idle' }
  | { status: 'loading' }
  | { status: 'success'; data: T }
  | { status: 'error'; error: string };

function useApiState<T>() {
  const [state, setState] = useState<ApiState<T>>({ status: 'idle' });
  return { state, setLoading, setSuccess, setError };
}

Context with Type Safety

interface AuthContextValue {
  user: UserDto | null;
  login: (credentials: LoginDto) => Promise<void>;
  logout: () => void;
}

const AuthContext = createContext<AuthContextValue | null>(null);

function useAuth(): AuthContextValue {
  const context = useContext(AuthContext);
  if (!context) throw new Error('useAuth must be used within AuthProvider');
  return context;
}

Event Handler Types

// Form submit
const handleSubmit: React.FormEventHandler<HTMLFormElement> = (e) => {
  e.preventDefault();
};

// Input change
const handleChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
  console.log(e.target.value);
};

// Button click
const handleClick: React.MouseEventHandler<HTMLButtonElement> = (e) => {
  console.log(e.currentTarget.name);
};

Common Event Types

Ref Types

const inputRef = useRef<HTMLInputElement>(null);

// Forward ref
const Input = forwardRef<HTMLInputElement, InputProps>(
  ({ label, ...props }, ref) => (
    <input ref={ref} {...props} />
  )
);

Children Props

interface CardProps {
  children: React.ReactNode;
  title: string;
}

// Render prop
interface DataFetcherProps<T> {
  url: string;
  children: (data: T, loading: boolean) => React.ReactNode;
}

Type Guards

function isString(value: unknown): value is string {
  return typeof value === "string";
}

function assertIsString(value: unknown): asserts value is string {
  if (typeof value !== "string") throw new Error("Not a string");
}

Best Practices

1. Use unknown over any - Enforce type checking
2. Prefer interface for objects - Better error messages
3. Use type for unions - More flexible
4. Leverage inference - Let TypeScript infer when possible
5. Create helper types - Build reusable utilities
6. Use const assertions - Preserve literal types
7. Avoid type assertions - Use guards instead
8. Enable strict mode - All strict options

Detailed References

For comprehensive patterns, see:

• references/advanced-patterns.md
• references/type-challenges.md

Resources

• TypeScript Handbook: https://www.typescriptlang.org/docs/handbook/
• Type Challenges: https://github.com/type-challenges/type-challenges