TypeScript 검사와 고장 복구
최소 타입 예제로 검사·빌드·실행을 구분하고, 고장 난 프로젝트를 한 단계씩 복구합니다.
만들 결과물: 값의 타입을 맞춘 짧은 코드와, 세 가지 오류를 설명하며 복구한 작은 프로젝트.
이 페이지에는 의도적으로 실패하는 실험이 따로 있습니다. 정상 예제를 먼저 확인하세요. 단원 루트에서 npm ci --ignore-scripts를 마친 상태로 진행합니다.
미션 6 · 같은 함수에 타입 붙이기
앞서 사용한 formatNote에 객체의 모양과 반환 타입을 붙였습니다.
export type Note = { id: number; text: string };
export function formatNote(note: Note): string {
return `${note.id}. ${note.text}`;
}이 예제는 번호 생성이나 입력 검증을 하지 않습니다. 숫자 id와 문자열 text를 가진 객체를 받아 문자열로 바꿉니다.
npm run typecheck
npm run build
npm run typed정상 출력은 1. Hello TypeScript입니다. 05-typescript/src/notes.ts와 생성된 05-typescript/dist/notes.js를 비교해 사라진 타입 표기를 찾습니다.
| 명령 | 하는 일 |
|---|---|
typecheck | 타입 검사, 출력 파일 생성 없음 |
build | 검사 후 JavaScript 파일 생성 |
typed | 생성된 JavaScript 실행 |
main.ts의 문장을 바꾸고 다시 빌드·실행합니다. typed만 실행하면 이전에 빌드한 코드가 실행됩니다.
일부러 잘못 넣은 값 고치기
npm run lab:types처음에는 타입 오류 두 건으로 실패하는 것이 정상입니다. 05-typescript/broken/wrong-call.ts를 읽습니다.
formatNote({ id: "1", text: "Hello" });
formatNote({ id: 2, text: 42 });각 속성에 필요한 타입을 확인하고 값만 바꿉니다. any, as, @ts-ignore로 검사를 숨기지 않습니다. 같은 명령을 다시 실행해 오류가 사라졌는지 확인합니다. broken 폴더는 정상 typecheck·build에서 제외되어 있습니다.
힌트: 숫자 1과 문자열 "1"은 어떻게 다를까요?
따옴표가 있는 값은 문자열입니다. Note가 요구하는 id와 text의 타입을 각각 읽고 비교하세요.
미션 7 · 고장 난 프로젝트 복구
아래 하위 프로젝트는 처음부터 고장 나 있습니다. 설치할 외부 패키지는 없으므로 npm install로 해결되지 않습니다.
cd 06-recovery
npm start매번 명령 → 오류 핵심 → 의심 파일 → 수정 이유 → 다시 실행한 결과를 남깁니다. 한 오류를 고치면 다음 오류가 보일 수 있습니다.
| 명령 | 복구 완료 후 목표 |
|---|---|
npm start | Count: 3 |
npm start -- 7 | Count: 7 |
첫 번째 힌트: 어떤 파일을 실행하나요?
현재 폴더의 package.json에서 start가 실행하는 파일을 확인합니다. 실제 파일 이름과 확장자를 비교하세요.
두 번째 힌트: 파일이 있는데 import가 실패해요
오류에 나온 파일의 import를 읽습니다. 이 예제의 ESM 상대 경로에 실제 파일 확장자가 포함되어 있는지 확인하세요.
세 번째 힌트: 명령줄의 7은 처음에 어떤 타입인가요?
명령줄 인자는 문자열입니다. 숫자의 toFixed를 사용하기 전에 Number로 바꾸는 줄이 필요한지 생각하세요.
완료 후 cd ..로 단원 루트에 돌아옵니다. 잘못된 입력을 거절하는 기능은 이번 필수 과제가 아닙니다. 선택으로 abc를 넣으면 NaN이 되는 것을 관찰하고, 나중에 어떤 처리를 요구할지 메모합니다.
선택 확장 · 타입 검사를 통과해도 실패할까?
검사·빌드·실행을 이해했다면 나중에 해도 됩니다. 빌드 후 각각 실행합니다.
npm run lab:runtime
npm run safe-input첫 명령은 의도적인 TypeError, 두 번째는 Not a string을 출력합니다.
unsafe-input.ts의 as string은 실제 숫자 42를 문자열로 바꾸지 않습니다. safe-input.ts는 unknown으로 받은 뒤 typeof로 한 가지 조건을 확인합니다. 여러 입력의 검증·예외 처리를 구현하는 일은 이후 AI 코딩 단계로 이어갑니다.
여기까지 되면 성공
- 타입 검사·빌드·실행을 구분합니다.
- 타입 오류를 읽고 실제 값을 고쳤습니다.
- 오류를 한 가지씩 고치고 이유를 설명합니다.
- 문자열을 숫자로 바꾸는 위치를 찾았습니다.
다음: 내 컴퓨터에서 친구 컴퓨터로 연결하기.