“에디터에 빨간 줄이 없으면 괜찮은 거 아냐?”

→ 사실, 런타임에서는 전혀 다를 수 있다.

💥 흔한 오해

“에디터에서 에러가 없으면, 데이터도 문제 없겠지!”

• VSCode에서 빨간 줄이 없고, 타입 에러도 안 보이니 안심하고 데이터를 넘긴다?

• 하지만... 실제로 실행하면 터진다.

  “NaN이 나왔네?” “왜 이게 undefined지?”

⚠️ 개념 분리: 컴파일 타임 vs 런타임

1. 에디터에서 보이는 에러 = 타입스크립트가 분석하는 “정적 타입 검사”

• 코드만 보고 판단한다
• 실행은 하지 않는다
• 즉, 컴파일 전에만 동작

let a: number = "hello"; // 빨간 줄 (에디터에서 바로 보임)

2. 실행 중 발생하는 에러 = 실제 데이터가 잘못 들어오는 “런타임 문제”

• 서버 응답, 사용자 입력 등은 타입스크립트의 관할이 아님
• 타입이 맞는지 보장 안 됨
• 따라서 버그는 실행 중에야 드러남

type User = { name: string; age: number };

const data = JSON.parse('{"name": "홍길동"}'); // age 빠짐

const user: User = data; // 타입스크립트는 OK라고 생각함

console.log(user.age + 1); // NaN 발생 (버그)

🔍 여기서 더 깊게 들어가 보면...