본문 바로가기
Q&A해결2024년 11월 12일1분 읽기

TypeScript any 타입 없이 코드 짜는 팁

T
TS초보
조회 710댓글 2

TypeScript를 쓰기 시작했는데 타입 에러가 나면 자꾸 any를 붙이게 됩니다. any 없이 코드를 짜려면 어떻게 해야 하나요?

// 이런 식으로 any를 남발하게 됩니다...
const handleResponse = (data: any) => {
  const result: any = data.map((item: any) => ({
    name: item.name,
    value: item.value
  }));
  return result;
};

특히 API 응답 데이터나 외부 라이브러리 사용할 때 타입을 어떻게 정의해야 하는지 감이 안 잡힙니다. 실무에서 any를 완전히 안 쓸 수 있나요?

이전 글
Nginx 502 Bad Gateway 해결 방법
다음 글
Next.js ISR vs SSG 어떤 걸 선택해야 하나요

댓글 2

김김영삼1년 전

any 대신 쓸 수 있는 전략들을 알려드릴게요!


1. 인터페이스/타입 정의


interface ApiItem {
  name: string;
  value: number;
}

interface ApiResponse {
  data: ApiItem[];
  total: number;
}

const handleResponse = (data: ApiItem[]) => {
  return data.map(item => ({
    name: item.name,
    value: item.value
  }));
};

2. unknown 사용 (any보다 안전)


const parseData = (input: unknown) => {
  if (typeof input === 'string') {
    return JSON.parse(input);  // 타입 좁히기
  }
  throw new Error('Invalid input');
};

3. 제네릭 활용


async function fetchApi<T>(url: string): Promise<T> {
  const res = await fetch(url);
  return res.json() as T;
}
const users = await fetchApi<User[]>('/api/users');

4. 외부 라이브러리 타입: @types/라이브러리명을 설치하거나, declare module로 선언하세요.


실무에서 100% any 없이는 어렵지만, tsconfig에 "noImplicitAny": true를 켜두면 자연스럽게 줄어듭니다!

TTS초보(guest)김영삼1년 전
제네릭이랑 unknown은 몰랐는데 정말 유용하네요! noImplicitAny도 바로 켰습니다. 감사합니다! 🙌
Ctrl+Enter로 등록