TypeScript Best Practices for Modern Frontend Engineers

TypeScript has become an industry standard for building scalable frontend applications. Writing maintainable TypeScript requires leveraging type inference and avoiding common pitfalls.

---

1. Avoid any, Favor unknown

When dealing with dynamic data (like API responses), use unknown instead of any to force type narrowing before usage:

function parseResponse(data: unknown) {
  if (typeof data === 'string') {
    console.log(data.toUpperCase());
  }
}

---

2. Leverage Utility Types

Make use of built-in utility types:

• Partial<T>: Makes all properties optional.
• Pick<T, K>: Constructs a type by picking specific properties.
• Omit<T, K>: Constructs a type by omitting specific properties.

interface User {
  id: string;
  name: string;
  email: string;
}

type UserPreview = Pick<User, 'id' | 'name'>;

---

3. Enable Strict Compiler Options

Ensure tsconfig.json includes strict: true:

{
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true
  }
}

Why TypeScript in Frontend Development

TypeScript catches type errors at compile time rather than at runtime in the browser. For frontend teams, this means:

• Autocomplete and IntelliSense in editors without runtime cost
• Refactoring confidence — rename a type and every usage updates
• Self-documenting function signatures that reduce the need for inline comments
• Errors surfaced in CI before they reach production

Strict Mode

Always enable strict mode in tsconfig.json. It activates the most valuable compiler checks:

{
  "compilerOptions": {
    "strict": true,
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "jsx": "react-jsx",
    "noUncheckedIndexedAccess": true
  }
}

noUncheckedIndexedAccess is not part of strict but is highly recommended: it forces you to handle the case where an array index is out of bounds.

Prefer Interfaces for Object Shapes

// Prefer interface for object shapes
interface Article {
  id: string;
  title: string;
  pubDate: Date;
  tags: string[];
  author?: string;
}

// Use type for unions, intersections, and utility types
type ArticleStatus = 'draft' | 'published' | 'archived';
type ArticleWithStatus = Article & { status: ArticleStatus };

Avoid any — Use unknown Instead

any disables type checking. unknown is the type-safe alternative:

// Bad — disables all type safety
function parseConfig(input: any) {
  return input.port; // No error even if port doesn't exist
}

// Good — forces you to narrow the type before use
function parseConfig(input: unknown) {
  if (typeof input === 'object' && input !== null && 'port' in input) {
    return (input as { port: number }).port;
  }
  throw new Error('Invalid config');
}

Type Guards

Use type guards to narrow union types safely:

type SuccessResponse = { status: 'ok'; data: Article[] };
type ErrorResponse  = { status: 'error'; message: string };
type ApiResponse = SuccessResponse | ErrorResponse;

function isSuccess(res: ApiResponse): res is SuccessResponse {
  return res.status === 'ok';
}

async function loadArticles(): Promise<Article[]> {
  const res: ApiResponse = await fetchArticles();
  if (isSuccess(res)) {
    return res.data; // TypeScript knows this is Article[]
  }
  throw new Error(res.message);
}

Generic Functions

Generics keep functions reusable without sacrificing type safety:

// A type-safe array utility that returns undefined instead of throwing
function first<T>(arr: T[]): T | undefined {
  return arr[0];
}

const title = first(['Astro', 'Next.js', 'Remix']);
//    ^? string | undefined

Common Frontend Patterns

Typed event handlers

const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  const value = e.target.value; // string
};

Typed fetch wrapper

async function apiFetch<T>(url: string): Promise<T> {
  const res = await fetch(url);
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  return res.json() as Promise<T>;
}

const articles = await apiFetch<Article[]>('/api/articles');

Utility types

// All fields optional (for partial updates)
type ArticlePatch = Partial<Article>;

// All fields required and non-nullable
type ArticleRequired = Required<Article>;

// Pick specific fields
type ArticlePreview = Pick<Article, 'id' | 'title' | 'pubDate'>;

// Exclude a field
type ArticleWithoutId = Omit<Article, 'id'>;

Common Mistakes

Mistake	Problem	Fix
Using any for API responses	Silences all type errors	Use unknown and narrow
as cast without validation	Runtime error if data differs	Validate with Zod or similar
Not enabling strict	Misses null/undefined bugs	Add "strict": true to tsconfig
!. (non-null assertion) overuse	Can crash at runtime	Prefer proper null checks
Typing as object	Too broad; no property access	Use a specific interface