TypeScript 개발 생산성을 높이는 5가지 팁

// 굳이 타입을 명시하지 않아도 됩니다
const numbers = [1, 2, 3, 4, 5]; // number[]로 추론
const doubled = numbers.map(n => n * 2); // number[]로 추론

// 함수의 반환 타입도 자동으로 추론됩니다
function createUser(name: string, age: number) {
  return { name, age }; // { name: string; age: number }로 추론
}

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

// Partial: 모든 속성을 선택적으로 만들기
type UpdateUser = Partial<User>;

// Omit: 특정 속성 제외하기
type PublicUser = Omit<User, 'password'>;

// Pick: 특정 속성만 선택하기
type UserCredentials = Pick<User, 'email' | 'password'>;

// 사용자 정의 타입 가드
function isString(value: unknown): value is string {
  return typeof value === 'string';
}

// in 연산자를 활용한 타입 가드
interface Cat {
  meow: () => void;
}

interface Dog {
  bark: () => void;
}

function makeSound(animal: Cat | Dog) {
  if ('meow' in animal) {
    animal.meow(); // Cat으로 타입 좁히기
  } else {
    animal.bark(); // Dog로 타입 좁히기
  }
}

// 제네릭 함수
function getFirstElement<T>(arr: T[]): T | undefined {
  return arr[0];
}

// 제네릭 인터페이스
interface ApiResponse<T> {
  data: T;
  status: number;
  message: string;
}

// 사용 예시
const userResponse: ApiResponse<User> = {
  data: { id: 1, name: 'John', email: 'john@example.com', password: 'secret' },
  status: 200,
  message: 'Success'
};

type Theme = 'light' | 'dark';
type Size = 'sm' | 'md' | 'lg';

// 템플릿 리터럴 타입
type ButtonClass = `btn-${Theme}-${Size}`;
// 결과: "btn-light-sm" | "btn-light-md" | "btn-light-lg" | "btn-dark-sm" | "btn-dark-md" | "btn-dark-lg"

// 실제 사용
function getButtonClass(theme: Theme, size: Size): ButtonClass {
  return `btn-${theme}-${size}`;
}