TypeScript 실무 로드맵

TypeScript는 무엇을 추가하는가

JavaScript는 값을 실행할 때 오류를 발견하는 경우가 많습니다.

function toggleTask(task) {
  return {
    ...task,
    completed: !task.complete,
  };
}

complete라는 오타가 있어도 JavaScript는 문법 오류로 막지 않습니다.

TypeScript에서는 Task 구조를 먼저 정의할 수 있습니다.

type Task = {
  id: string;
  title: string;
  completed: boolean;
};


function toggleTask(
  task: Task,
): Task {
  return {
    ...task,
    completed: !task.completed,
  };
}

존재하지 않는 property를 사용하면 실행 전에 오류를 확인할 수 있습니다.

TypeScript 학습 순서

1단계: 실행 환경과 기본 타입

TypeScript 개념
→ 설치
→ tsconfig
→ strict
→ string / number / boolean
→ 배열 / 객체 / 함수

2단계: 안전한 값 처리

type vs interface
→ union
→ null / undefined
→ unknown
→ narrowing
→ keyof / typeof
→ as const
→ satisfies

3단계: 타입 재사용

generics
→ constraints
→ Partial / Pick / Omit / Record
→ mapped type
→ conditional type
→ infer

4단계: 상태와 외부 데이터

discriminated union
→ never exhaustive check
→ unknown API response
→ type guard

5단계: React 연결

tsx
→ props
→ events
→ form
→ useRef
→ optional props
→ children
→ public type design

strict 기준으로 학습하는 이유

TypeScript 7에서는 strict가 기본값입니다.

strict는 다음과 같은 검사를 묶어서 더 안전한 타입 검사를 제공합니다.

noImplicitAny
strictNullChecks
strictFunctionTypes
strictPropertyInitialization
useUnknownInCatchVariables
...

학습 과정에서 오류가 많아 보이더라도 strict를 끄기보다 왜 오류가 발생했는지 이해하는 것이 중요합니다.

타입은 runtime에 없습니다

다음 type은 JavaScript 실행 결과에 존재하지 않습니다.

type Task = {
  id: string;
  title: string;
};

컴파일 후 type 선언은 제거됩니다.

따라서 fetch JSON이 정말 Task인지 runtime에서 확인하려면 별도 검증이 필요합니다.

이 내용은 16회차에서 다룹니다.

React를 뒤에서 배우는 이유

TypeScript를 React와 동시에 시작하면 다음 두 종류의 문제를 구분하기 어려워집니다.

TypeScript 타입 시스템 문제
React API 사용 문제

먼저 일반 함수와 객체에서 타입을 익히면 React props, event 타입도 훨씬 쉽게 이해할 수 있습니다.

자주 하는 실수

any로 오류를 없앱니다

function parse(value: any) {
  return value.title;
}

오류는 사라지지만 타입 검사도 사라집니다.

외부 입력은 unknown에서 검증하는 습관을 들입니다.

모든 곳에 타입을 직접 씁니다

TypeScript는 타입 추론을 잘합니다.

const count = 0;

굳이 다음처럼 쓸 필요는 없습니다.

const count: number = 0;

함수 경계, 객체 모델, 외부 API 같은 중요한 계약을 중심으로 타입을 작성합니다.

어려운 고급 타입부터 공부합니다

conditional type이나 infer는 기본 타입과 generic을 이해한 뒤 배우는 편이 좋습니다.

5분 시작점 진단

작은 변형: Task 타입의 completed를 done으로 바꾸고 함수는 그대로 두세요. 이번에는 completed가 없는 속성이라는 오류가 나야 합니다. 타입 정의와 사용하는 코드가 같은 계약을 따라야 함을 확인합니다.

독자 질문: 나는 이 과정의 어디서 시작하고, TypeScript가 실제로 무엇을 막아 주는지 어떻게 확인할까요?

설치 없이 TypeScript Playground에 아래 코드를 붙여 넣어 보세요.

type Task = { id: string; completed: boolean };
function toggleTask(task: Task): Task {
  return { ...task, completed: !task.complete };
}

기대 결과: Task에 complete 속성이 없다는 오류가 표시됩니다. 마지막 줄의 task.complete를 task.completed로 고치면 그 오류가 사라집니다. 이 진단은 타입 검사가 실행 전에 속성 오타를 잡는다는 것만 확인합니다. 외부에서 받은 JSON이 실제 Task인지는 보장하지 않으므로 16회차에서 별도 검증을 다룹니다.

시작점: JavaScript의 함수·객체·배열·Promise가 낯설다면 그 기초부터 보완합니다. 익숙하지만 TypeScript가 처음이라면 02 차이 설명 → 03 설치·strict 실행 → 04 기본 타입 순으로 갑니다. 타입 문법은 익숙한데 API 응답을 그대로 믿는 문제가 남았다면 16회차의 unknown·type guard를 확인합니다. React 타입이 목적이라도 04~16에서 필요한 기초를 점검한 뒤 17~21로 이동합니다.

완료 기준: 오류가 난 줄과 고친 줄을 직접 보여 줄 수 있고, ‘타입 검사가 막는 오타’와 ‘실행 시 외부 데이터 확인’을 구분하며 자신의 다음 회차를 고를 수 있습니다. TaskFlow 프로젝트 파일은 필요하지 않습니다.

학습 완료 체크리스트

• TypeScript가 JavaScript에 정적 타입 검사를 추가한다는 것을 설명할 수 있습니다.
• strict 기반 학습이 필요한 이유를 설명할 수 있습니다.
• 타입과 runtime 검증이 다른 문제라는 것을 이해했습니다.
• 코어 TypeScript를 먼저 배우고 React 타입으로 연결하는 순서를 이해했습니다.

typescript-step-00-js-base

tasks
addTask
toggleTask
deleteTask
filterTasks

JavaScript runtime 중심
객체 shape를 코드만 보고 추측
함수 인수 타입 제한 없음
외부 JSON 신뢰

Task
TaskFilter
CreateTaskInput
UpdateTaskInput
ApiResponse<T>
TaskLoadState
runtime type guard
React props/event/ref
public type boundary

→ 1. TypeScript 전체 로드맵
○ 2. JavaScript와 차이
○ 3. TypeScript 7 설치
○ 4~9. 기본 타입·narrowing·literal
○ 10~14. generic·타입 변환
○ 15~16. 상태·runtime 검증
○ 17~21. React 연결·공개 타입
○ 22. TypeScript 7 최종 점검

npm start
npm test

# TypeScript 마이그레이션

현재 JavaScript 최종판을 기준으로 Task의 id/title/completed 계약부터 전환합니다. 날짜·URL·요청취소가 있는 원본은 javascript.html에서 계속 실행할 수 있도록 보존합니다. 타입 학습용 화면은 기본 CRUD와 타입 경계를 단계별로 확장합니다. 이 글은 설계 단계이며 실행 코드의 전후 차이를 주장하지 않습니다.

typescript-step-01-roadmap

다음 학습

다음 글에서는 TypeScript가 JavaScript와 실제로 무엇이 다른지 컴파일 시점과 runtime 관점에서 설명합니다.

다음 글: TypeScript란 무엇인가: JavaScript와 차이 정리

글 소개·학습 준비·전체 목차

TypeScript · 1 / 22 · 필수 길잡이 · 실무 로드맵

TypeScript는 어디서 시작하고 어떤 순서로 실무에 연결할까요? JavaScript 함수·객체·배열을 읽을 수 있다면 실행 환경과 기본 계약부터 시작해 narrowing·타입 재사용·외부 입력 검증으로 진행합니다. 아래 Playground 속성 오타 진단으로 현재 시작점과 다음 학습을 고릅니다.

이 과정은 React props 타입만 빠르게 훑는 과정이 아닙니다. 먼저 프레임워크와 무관한 TaskFlow Core를 JavaScript에서 TypeScript로 바꾸면서 데이터·함수·상태·외부 입력을 안전하게 모델링합니다. 이후 후반부에서 React props, event, ref, children 타입으로 연결합니다.

이번 글에서 배우는 내용

• TypeScript 과정 전체 학습 순서
• JavaScript와 TypeScript의 역할 차이
• strict 기준으로 공부하는 이유
• 기본 타입에서 고급 타입으로 가는 흐름
• runtime 데이터 검증이 별도로 필요한 이유
• React TypeScript는 왜 후반부에 배우는지
• TaskFlow가 22회 동안 어떻게 바뀌는지

단독 학습 선수 지식

JavaScript 변수·함수·객체·배열을 알면 시작점 진단을 할 수 있습니다. Promise와 모듈은 해당 후속 주제를 읽기 전에 보완합니다.

선수 지식

다음 JavaScript 문법은 알고 시작하는 편이 좋습니다.

• 변수와 함수
• 객체와 배열
• 구조 분해
• map, filter
• import / export
• Promise와 async / await 기본
• null과 undefined

과정 전체의 누적 프로젝트는 JavaScript로 동작하는 TaskFlow입니다. 이 글의 로드맵과 아래 시작점 진단은 프로젝트 파일 없이도 따라갈 수 있습니다.

tasks 배열
addTask()
toggleTask()
deleteTask()
filterTasks()

처음부터 React를 사용하지 않습니다.

목차