🙈 TypeScript `any` 타입 남용: 타입스크립트를 쓰지 않는 것과 다름없는 코드

Why Wrong?

How to Fix?

// 🚨 문제가 되는 코드: any 타입 남용

// 외부 API에서 받아온 데이터를 처리하는 함수 (데이터 구조가 항상 일정하지 않다고 가정)
// '일단' any로 받아서 타입 검사를 회피합니다.
function processUserData(data: any) {
  console.log(`User ID: ${data.id}`);
  console.log(`User Name: ${data.name}`);
  
  // data에 'address' 속성이 없거나 'address'가 객체가 아니면 런타임 에러 발생 가능성!
  console.log(`User Address: ${data.address.street}`); 

  if (data.status === 'active') {
    // data에 'lastLogin'이 없거나 숫자가 아니면 Date 객체 생성 및 toLocaleString에서 런타임 에러 발생 가능성!
    console.log(`Last login: ${new Date(data.lastLogin).toLocaleString()}`); 
  }
  return data.id;
}

// 유효한 데이터 (이 경우는 문제가 없어 보입니다)
processUserData({ 
  id: '123', 
  name: 'Alice', 
  status: 'active', 
  lastLogin: 1678886400000, 
  address: { street: 'Main St', city: 'Anytown' }
});

// ✨ 하지만, 필드가 누락되거나 타입이 다른 데이터가 들어와도 any 때문에 컴파일 시점에 오류를 감지하지 못합니다.
processUserData({ id: '456', username: 'Bob', status: 'inactive' }); // 'name', 'lastLogin', 'address' 필드 없음
processUserData({ id: '789', name: 'Charlie', status: 'pending', lastLogin: 'yesterday' }); // 'lastLogin'이 string

// 위 호출들은 런타임에 에러를 발생시키거나 예상치 못한 동작을 할 수 있습니다.

// ✨ 개선된 코드: 명시적인 타입과 unknown, 제네릭 활용

interface UserProfile {
  id: string;
  name: string;
  email?: string; // 선택적 속성
  status: 'active' | 'inactive' | 'pending';
  lastLogin?: number; // 타임스탬프 (선택적)
  address?: { // 주소도 선택적, 내부 구조 명시
    street: string;
    city: string;
  }
}

// 명확한 인터페이스를 사용하여 타입 안정성 확보
function processStrictUserData(data: UserProfile): string {
  console.log(`User ID: ${data.id}`);
  console.log(`User Name: ${data.name}`);
  
  // 옵셔널 체이닝과 타입 가드를 사용하여 안전하게 접근합니다.
  if (data.address?.street) {
    console.log(`User Address: ${data.address.street}`);
  }

  if (data.status === 'active' && data.lastLogin) {
    // lastLogin이 number로 보장되므로 안전하게 사용합니다.
    console.log(`Last login: ${new Date(data.lastLogin).toLocaleString()}`);
  }
  return data.id;
}

// ✨ 이제 컴파일 시점에 타입 에러를 감지합니다!
processStrictUserData({ 
  id: '123', 
  name: 'Alice', 
  status: 'active', 
  lastLogin: 1678886400000, 
  address: { street: 'Main St', city: 'Anytown' }
});

// Error: Argument of type '{ id: string; username: string; status: string; }' is not assignable to parameter of type 'UserProfile'.
// Object literal may only specify known properties, and 'username' does not exist in type 'UserProfile'.
// processStrictUserData({ id: '456', username: 'Bob', status: 'inactive' }); 

// unknown 타입을 사용하여 더 안전한 데이터 처리 (외부에서 오는 불확실한 데이터에 적합)
function processUnknownUserData(rawData: unknown) {
  // rawData가 UserProfile 타입인지 런타임에 엄격하게 검증합니다.
  if (
    typeof rawData === 'object' && rawData !== null &&
    'id' in rawData && typeof rawData.id === 'string' &&
    'name' in rawData && typeof rawData.name === 'string' &&
    'status' in rawData && (rawData.status === 'active' || rawData.status === 'inactive' || rawData.status === 'pending')
  ) {
    const userData: UserProfile = rawData as UserProfile; // 타입 가드를 통과했으므로 안전하게 단언
    console.log(`Processing unknown user: ${userData.name}, Status: ${userData.status}`);
  } else {
    console.warn('Received invalid user data format or missing required fields.');
  }
}

processUnknownUserData({ id: '111', name: 'David', status: 'active' });
processUnknownUserData({ userId: '222', userName: 'Eve' }); // 'id'와 'name', 'status' 필드 검증에 실패하여 경고 메시지 출력

// 제네릭 활용 예시 (더 유연하게 타입 안전한 함수 작성)
interface ApiResponse<T> {
  statusCode: number;
  message: string;
  data: T;
}

function handleApiResponse<T>(response: ApiResponse<T>): T {
  if (response.statusCode === 200) {
    return response.data; 
  } else {
    throw new Error(response.message);
  }
}

interface Product {
  productId: string;
  productName: string;
  price: number;
}

const productResponse: ApiResponse<Product> = {
  statusCode: 200,
  message: 'Success',
  data: { productId: 'P001', productName: 'Laptop', price: 1200 }
};

const product = handleApiResponse(productResponse);
console.log(product.productName); // 'product'는 Product 타입으로 추론됩니다.

// const errorResponse: ApiResponse<Product> = {
//   statusCode: 404,
//   message: 'Product not found',
//   data: { productId: 'P002', productName: 'Monitor', price: 300 } // T가 Product이므로 data는 Product 타입이어야 함
// };
// try {
//   handleApiResponse(errorResponse);
// } catch (e) {
//   console.error(e.message);
// }

You Might Also Like