TypeScript 기초 학습 – 실무 타입 로드맵 – 프론트엔드 실무 코딩 랩

함수 파라미터와 반환 타입

함수 입력값과 결과값을 타입으로 고정합니다.

실무에서 어디에 쓰나가격 계산, API 값 변환, 폼 검증 함수에서 사용합니다.

자주 틀리는 이유매개변수 타입만 붙이고 반환 타입은 비워 두거나 any로 둡니다.

function add(a: number, b: number): number {
  return a + b;
}

객체 타입과 API 모델

객체 타입 문제 풀기

사용자, 상품, 응답 데이터처럼 반복해서 쓰는 객체 구조를 타입으로 고정합니다.

실무에서 어디에 쓰나회원 목록, 프로필 카드, 관리자 테이블의 데이터 모델에 사용합니다.

자주 틀리는 이유필드 이름을 화면마다 새로 적어 API 변경에 약한 코드를 만듭니다.

type User = {
  id: number;
  name: string;
  isActive: boolean;
};

선택 속성과 비어 있는 값

선택 속성 문제 풀기

없을 수 있는 값을 타입에 먼저 드러내고 기본값 또는 분기 처리를 준비합니다.

실무에서 어디에 쓰나닉네임, 썸네일, 소개글처럼 비어 있을 수 있는 API 값에 사용합니다.

자주 틀리는 이유값이 항상 있다고 가정하고 바로 메서드를 호출해 런타임 오류를 만듭니다.

type Profile = {
  id: number;
  nickname?: string;
};

유니온 타입으로 상태 제한

상태값 문제 풀기

가능한 상태값을 좁혀 오타와 잘못된 분기를 줄입니다.

실무에서 어디에 쓰나로딩, 성공, 실패, 빈 목록 같은 화면 상태 관리에 사용합니다.

자주 틀리는 이유status를 string으로 열어 두어 “sucess” 같은 오타를 놓칩니다.

type RequestStatus = "idle" | "loading" | "success" | "error";

타입 좁히기

타입 좁히기 문제 풀기

여러 타입이 들어올 수 있는 값을 사용 전에 검사해 안전하게 다룹니다.

실무에서 어디에 쓰나검색어, 숫자 ID, 외부 입력값처럼 형태가 달라질 수 있는 값에 사용합니다.

자주 틀리는 이유유니온 타입을 좁히지 않고 바로 length나 계산을 시도합니다.

function getSize(value: string | number): number {
  if (typeof value === "string") return value.length;
  return value;
}

배열 타입과 목록 가공

배열 타입 문제 풀기

배열 안의 객체 구조를 고정해 map, filter, reduce 코드를 안정적으로 작성합니다.

실무에서 어디에 쓰나상품 목록, 게시글 목록, 사용자 목록 화면에서 사용합니다.

자주 틀리는 이유배열 요소 타입을 비워 두어 map 내부 자동완성과 오류 검사를 잃습니다.

type Product = { id: number; name: string };
function getProductNames(products: Product[]): string[] {
  return products.map(product => product.name);
}

제네릭 API 응답

API 응답 문제 풀기

같은 응답 구조에 데이터 타입만 바뀌는 경우 제네릭으로 공통화합니다.

실무에서 어디에 쓰나목록, 상세, 검색 API의 응답 타입을 일관되게 관리할 때 사용합니다.

자주 틀리는 이유응답 구조를 any로 받아 화면에서 없는 필드를 접근합니다.

type ApiResponse = {
  data: T | null;
  error: string | null;
};

유틸리티 타입으로 필요한 필드만 사용

Pick 문제 풀기

Pick, Omit, Record 같은 도구로 기존 타입을 목적에 맞게 재사용합니다.

실무에서 어디에 쓰나목록 카드, 요약 테이블, 역할별 라벨, 설정 객체에 사용합니다.

자주 틀리는 이유기존 타입을 복사해 새 타입을 만들고 변경 사항을 여러 곳에서 놓칩니다.

type User = { id: number; name: string; email: string; role: string };
type UserSummary = Pick;

다음 행동

기초 모듈을 모두 봤다면 함수 타입, 상태값, API 응답 문제부터 순서대로 풀어보세요. 틀린 문제는 오답 원인과 실무 사용 위치를 함께 확인하는 것이 핵심입니다.

첫 문제 풀기 상태값 문제 풀기 API 응답 문제 풀기

TypeScript 기초 학습 – 실무 타입 로드맵

이 API 응답을 any로 받으면 어떤 화면 버그가 생기는지 먼저 봅니다