TypeScript 베스트 프랙티스

TypeScript는 JavaScript에 정적 타입 시스템을 추가하여 개발 시점에 오류를 잡아내고 코드의 안정성을 높여주는 언어입니다.

기본 타입 시스템

TypeScript의 기본 타입들을 이해하는 것이 중요합니다:

// 기본 타입들
let name: string = "홍길동";
let age: number = 25;
let isActive: boolean = true;
let hobbies: string[] = ["독서", "운동"];
let user: { name: string; age: number } = { name: "홍길동", age: 25 };

인터페이스 활용

인터페이스를 사용하여 객체의 구조를 정의하세요:

interface User {
  id: number;
  name: string;
  email: string;
  createdAt: Date;
}

const user: User = {
  id: 1,
  name: "홍길동",
  email: "hong@example.com",
  createdAt: new Date(),
};

함수 타입 정의

함수의 매개변수와 반환값에 타입을 명시하세요:

function greet(name: string): string {
  return `안녕하세요, ${name}님!`;
}

const greetArrow = (name: string): string => {
  return `안녕하세요, ${name}님!`;
};

제네릭 활용

재사용 가능한 타입을 만들 때 제네릭을 활용하세요:

interface ApiResponse<T> {
  status: "success" | "error";
  data?: T;
  error?: string;
}

const userResponse: ApiResponse<User> = {
  status: "success",
  data: user,
};

유니온 타입과 타입 가드

여러 타입을 조합하여 사용하세요:

type Status = "loading" | "success" | "error";

interface LoadingState {
  status: "loading";
}

interface SuccessState<T> {
  status: "success";
  data: T;
}

interface ErrorState {
  status: "error";
  error: string;
}

type State<T> = LoadingState | SuccessState<T> | ErrorState;

// 타입 가드 함수
function isSuccess<T>(state: State<T>): state is SuccessState<T> {
  return state.status === "success";
}

유틸리티 타입 활용

TypeScript의 내장 유틸리티 타입들을 적극 활용하세요:

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

// 일부 속성만 선택
type PublicUser = Pick<User, "id" | "name" | "email">;

// 일부 속성 제외
type CreateUserRequest = Omit<User, "id" | "createdAt">;

// 모든 속성을 선택적로
type UpdateUserRequest = Partial<User>;

// 모든 속성을 필수로
type RequiredUser = Required<User>;

실무 팁

1. 엄격한 설정 사용

tsconfig.json에서 엄격한 설정을 활성화하세요:

{
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true
  }
}

2. 타입 정의 파일 분리

복잡한 타입들은 별도 파일로 분리하여 관리하세요.

3. 점진적 마이그레이션

기존 JavaScript 프로젝트를 TypeScript로 마이그레이션할 때는 점진적으로 진행하세요:

1. allowJs: true 설정으로 시작
2. 파일을 하나씩 .ts로 변환
3. any 타입을 구체적인 타입으로 교체
4. 엄격한 설정 점진적 활성화

마무리

TypeScript는 초기 학습 비용이 있지만, 장기적으로 코드의 품질과 개발 생산성을 크게 향상시킵니다. 꾸준한 연습과 베스트 프랙티스 적용을 통해 TypeScript의 진정한 가치를 경험해보세요!

TypeScript 공식 문서의 핸드북을 통해 더 깊이 있는 내용을 학습할 수 있습니다.