TypeScript in Modern Development: Tips and Best Practices

// Primitive types
const name: string = 'VETAP';
const age: number = 5;
const isActive: boolean = true;
const data: null = null;
const value: undefined = undefined;

// Arrays
const numbers: number[] = [1, 2, 3];
const names: Array<string> = ['John', 'Jane'];

// Objects
const user: { name: string; age: number } = {
  name: 'John',
  age: 30
};

// Functions
function greet(name: string): string {
  return `Hello, ${name}!`;
}

// Optional and default parameters
function createUser(
  name: string,
  age?: number,
  isAdmin: boolean = false
): User {
  return { name, age: age ?? 0, isAdmin };
}

// Interface (preferred for objects)
interface User {
  id: string;
  name: string;
  email: string;
  age?: number; // Optional
  readonly createdAt: Date; // Read-only
}

// Type alias (more flexible)
type Status = 'pending' | 'approved' | 'rejected';
type UserWithStatus = User & { status: Status };

// Extending interfaces
interface AdminUser extends User {
  permissions: string[];
  role: 'admin' | 'super-admin';
}

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

// Partial: Make all properties optional
type PartialUser = Partial<User>;
// { id?: string; name?: string; ... }

// Pick: Select specific properties
type UserPreview = Pick<User, 'id' | 'name'>;
// { id: string; name: string }

// Omit: Exclude specific properties
type UserWithoutId = Omit<User, 'id'>;
// { name: string; email: string; age: number }

// Required: Make all properties required
type RequiredUser = Required<Partial<User>>;

// Record: Create object type
type UserMap = Record<string, User>;
// { [key: string]: User }

// Generic function
function identity<T>(arg: T): T {
  return arg;
}

// Generic interface
interface Repository<T> {
  findById(id: string): Promise<T | null>;
  save(entity: T): Promise<T>;
  delete(id: string): Promise<void>;
}

// Generic component (React)
function List<T>({ items, render }: {
  items: T[];
  render: (item: T) => React.ReactNode;
}) {
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{render(item)}</li>
      ))}
    </ul>
  );
}

// Type guard function
function isString(value: unknown): value is string {
  return typeof value === 'string';
}

// Usage
function processValue(value: unknown) {
  if (isString(value)) {
    // TypeScript knows value is string here
    console.log(value.toUpperCase());
  }
}

// tsconfig.json
{
  "compilerOptions": {
    "target": "ES2020",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

// Server Component
interface PageProps {
  params: Promise<{ id: string }>;
  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
}

export default async function Page({ params, searchParams }: PageProps) {
  const { id } = await params;
  const { query } = await searchParams;
  // ...
}

// Client Component
'use client';

interface ButtonProps {
  children: React.ReactNode;
  onClick?: () => void;
  variant?: 'primary' | 'secondary';
  disabled?: boolean;
}

export function Button({ 
  children, 
  onClick, 
  variant = 'primary',
  disabled = false 
}: ButtonProps) {
  return (
    <button
      onClick={onClick}
      disabled={disabled}
      className={`btn btn-${variant}`}
    >
      {children}
    </button>
  );
}

// app/api/users/route.ts
import { NextRequest, NextResponse } from 'next/server';
import { z } from 'zod';

const userSchema = z.object({
  name: z.string().min(2),
  email: z.string().email(),
});

type UserInput = z.infer<typeof userSchema>;

export async function POST(req: NextRequest) {
  try {
    const body: UserInput = await req.json();
    const validated = userSchema.parse(body);
    // ...
    return NextResponse.json({ success: true });
  } catch (error) {
    return NextResponse.json(
      { error: 'Invalid input' },
      { status: 400 }
    );
  }
}

// tsconfig.json
{
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "strictBindCallApply": true,
    "strictPropertyInitialization": true,
    "noImplicitThis": true,
    "alwaysStrict": true
  }
}

// Good: Interface for object shape
interface User {
  id: string;
  name: string;
}

// Good: Type for unions/primitives
type Status = 'active' | 'inactive';

// Bad
function process(data: any) {
  // ...
}

// Good
function process<T>(data: T): T {
  // ...
}

// Or use unknown
function process(data: unknown) {
  if (typeof data === 'string') {
    // TypeScript knows it's string
  }
}

// Only when you're certain
const element = document.getElementById('app') as HTMLDivElement;

// Better: Type guard
function isHTMLElement(el: Element): el is HTMLElement {
  return el instanceof HTMLElement;
}