14강. TypeScript 기초와 타입 추론

?1. 이번 강의에서 해결할 문제

API 점수를 문자열처럼 처리하거나 존재하지 않는 속성을 사용해도 JavaScript는 실행 전 알려 주지 않습니다. TypeScript로 데이터 계약을 코드에 기록합니다.

✓2. 학습 목표

• 기본 타입, 배열, 객체, 유니온을 사용한다.
• 타입 추론과 명시적 타입 표기의 기준을 세운다.
• unknown을 안전하게 좁힌다.

◇3. 핵심 개념

TypeScript는 JavaScript에 정적 타입 검사를 더합니다. 컴파일 뒤 타입은 사라지므로 런타임 API 데이터까지 자동 검증하지는 않습니다.

초깃값이 분명하면 const score = 94에서 number를 추론하므로 중복 표기를 생략합니다. 함수 경계, 빈 배열, 외부 데이터, 여러 상태가 가능한 값은 명시적 타입이 문서 역할을 합니다. any는 검사를 끄지만 unknown은 확인 후 사용하게 만듭니다.

</>4. 단계별 코드 예시

파일 경로: game-release-dashboard/src/types/game.ts

export type Platform = 'PC' | 'Console' | 'Mobile';

export type Game = {
  id: string;
  title: string;
  platform: Platform;
  score: number;
  isReleased: boolean;
};

export function formatScore(score: number): string {
  return score.toFixed(1) + '점';
}

파일 경로: game-release-dashboard/src/type-practice.ts

import type { Game } from './types/game';

const featured: Game = {
  id: 'star-harbor',
  title: 'Star Harbor',
  platform: 'PC',
  score: 94,
  isReleased: false,
};

const games: Game[] = [featured];
const message = games[0].title + ' · ' + games[0].score;

→5. 코드가 동작하는 이유

Platform 유니온은 세 문자열만 허용합니다. Game 타입을 객체와 배열 경계에 적용하면 속성 누락과 잘못된 값이 편집기와 build에서 발견됩니다. message는 연산의 입력으로부터 string으로 추론됩니다.

!6. 자주 하는 실수와 해결법

• 모든 곳에 타입을 반복: 추론이 분명한 지역 변수는 생략합니다.
• 오류를 피하려고 any 사용: 외부 값은 unknown으로 받고 검사해 좁힙니다.
• 타입 단언으로 실제 검증을 대신: as Game은 데이터를 바꾸지 않습니다. API 경계에는 런타임 검사가 별도로 필요합니다.
• 타입 import를 일반 import로만 사용: 값으로 쓰지 않는 타입은 import type으로 의도를 명확히 합니다.

✎7. 직접 실습

Game에 genre와 releaseDate를 추가하고 하나를 선택 속성으로 만들어 보세요. platform에 'Web'을 넣어 오류를 확인한 뒤 유니온을 바꿀지 데이터를 고칠지 판단하세요.

?8. 이해 점검 질문 3개

1. 타입 추론을 활용하면 어떤 중복을 줄일 수 있나요?
2. any와 unknown은 사용 전에 어떤 차이를 만드나요?
3. as Game이 서버 응답을 검증하지 못하는 이유는 무엇인가요?

■9. 핵심 요약

TypeScript는 값의 가능한 형태를 제한해 실행 전 실수를 찾습니다. 추론은 활용하되 컴포넌트와 API 같은 경계에는 계약을 명시합니다.