TypeScript 타입을 택배 상자 라벨처럼 읽는 첫 연습

AI가 만든 코드에서 ‘Type string is not assignable to type number’ 같은 문장을 보면 고장이 크게 난 것처럼 느껴집니다. 그러나 이 메시지는 프로그램을 실행하기 전에 값의 종류가 맞지 않는 곳을 발견했다는 안내에 가깝습니다. 오류를 숨기기보다 어떤 약속이 어긋났는지 읽으면 수정 범위를 좁힐 수 있습니다.

TypeScript는 JavaScript 코드에 타입 정보를 더해 검사하는 언어입니다. 타입은 값이 문자열인지 숫자인지, 어떤 속성을 가진 객체인지 설명하는 규칙입니다. 택배 상자에 ‘깨지는 유리’나 ‘냉장 보관’ 라벨을 붙여 잘못 다루는 일을 미리 막는 것처럼 생각하면 됩니다.

타입은 값 자체가 아니라 값에 대한 약속이다

‘"15"’는 숫자처럼 보여도 따옴표 안에 있으므로 문자열입니다. ‘15’는 계산할 수 있는 숫자입니다. 화면 입력칸에서 받은 값은 대개 문자열이어서 가격 계산 전에 변환과 검증이 필요합니다.

TypeScript 공식 핸드북은 흔한 프로그래밍 오류가 기대한 종류와 다른 값을 쓴 타입 오류라고 설명합니다. TypeScript의 목표는 코드가 실행되기 전에 이런 관계를 검사하는 것입니다. 따라서 타입 오류는 사용자가 이미 겪은 장애가 아니라 배포 전에 고칠 기회일 수 있습니다.

기본 타입은 가장 단순한 라벨이다

‘string’은 글자 묶음, ‘number’는 숫자, ‘boolean’은 참 또는 거짓을 뜻합니다. 배열은 같은 종류의 값을 순서대로 담고, 객체 타입은 이름과 값의 구조를 적습니다. 처음부터 모든 고급 문법을 외울 필요는 없습니다.

function addPrice(price: number, fee: number) {
  return price + fee;
}

addPrice(10000, 3000);   // 13000
addPrice("10000", 3000); // 타입 오류

두 번째 호출은 문자열과 숫자를 섞습니다. JavaScript에서는 예상과 다른 이어 붙이기가 일어날 수 있지만 TypeScript는 호출 위치에서 먼저 알려 줍니다. 오류 문장에서 기대한 타입, 실제 타입, 문제가 난 변수 이름을 차례로 읽습니다.

타입 추론은 라벨을 자동으로 붙이는 기능이다

타입 추론은 TypeScript가 초기값과 사용 문맥을 보고 타입을 알아내는 기능입니다. ‘const count = 3’이라고 쓰면 보통 ‘number’를 따로 적지 않아도 됩니다. 공식 문서도 시작할 때 필요 이상으로 타입 주석을 쓰지 말고 추론을 활용할 수 있다고 안내합니다.

함수의 입력과 반환값, 여러 형태가 섞이는 객체처럼 약속을 분명히 해야 하는 곳에는 타입을 적는 편이 읽기 쉽습니다. 반대로 모든 변수에 라벨을 반복하면 실제 규칙보다 문법이 더 눈에 띌 수 있습니다. AI에게 ‘모든 곳에 any를 붙여 오류를 없애 줘’라고 요청하면 검사의 장점을 스스로 꺼 버릴 수 있습니다.

타입 검사는 실제 데이터 검증을 대신하지 않는다

정적 타입 검사는 실행 전에 코드를 살펴보는 검사입니다. 하지만 서버 응답, 주소창 값, 사용자가 입력한 글은 실행 중에 들어옵니다. TypeScript 타입 표시는 컴파일 뒤 사라지므로 외부 데이터가 약속대로 왔는지 자동 보증하지 않습니다.

예를 들어 결제 금액이 number라고 적혀 있어도 음수인지, 허용 통화인지, 서버가 승인한 값인지 따로 확인해야 합니다. 타입 단언인 ‘as User’는 개발자가 ‘이 값은 User라고 믿겠다’고 검사기에 알리는 표현이지 실제 값을 검사하는 보안문이 아닙니다. 공식 문서도 타입 단언은 실행 중 검사 동작을 만들지 않는다고 설명합니다.

타입 오류는 세 부분으로 나눠 읽는다

• 오류가 난 파일과 줄 번호를 확인합니다.
• ‘기대한 타입’과 ‘실제 타입’을 따로 적습니다.
• 값이 어디에서 시작돼 해당 줄까지 왔는지 따라갑니다.
• 문자열을 숫자로 바꿀 때 실패와 빈 입력을 처리합니다.
• ‘any’나 강제 단언으로 덮기 전에 원래 데이터 구조를 확인합니다.
• 수정 뒤 타입 검사와 실제 기능 테스트를 모두 실행합니다.

이 순서는 병원 접수표에서 환자 이름과 예약 진료과가 어긋난 지점을 찾는 것과 비슷합니다. 메시지 전체를 없애는 게 목표가 아니라 잘못 연결된 약속을 바로잡는 게 목표입니다.

오늘 바로 해볼 작은 실습

TypeScript 공식 Playground처럼 저장이나 결제가 없는 연습 화면에서 아래 순서만 따라 합니다.

1. ‘const age: number = 20’을 입력하고 오류가 없는지 봅니다.
2. 20을 ‘"20"’으로 바꿔 기대 타입과 실제 타입을 읽습니다.
3. ‘const name = "민지"’를 쓰고 편집기가 추론한 타입을 확인합니다.
4. 숫자 두 개를 받는 작은 더하기 함수를 만듭니다.
5. 문자열을 한 번 넣어 어느 호출에서 오류가 나는지 확인합니다.
6. 원래 코드로 되돌리고 타입 검사와 실행 결과가 모두 정상인지 봅니다.

실제 결제 금액, 개인정보, API 응답을 연습 데이터로 붙여 넣지 마세요. 타입 오류를 없애려고 비밀값을 로그에 출력하거나 ‘any’와 강제 단언을 한꺼번에 추가하지 않습니다. 타입은 좋은 경고 표지이지만 권한 확인, 입력 검증, 테스트를 대신하지 않는다는 경계를 지키면 AI가 만든 TypeScript 코드도 더 차분하게 검토할 수 있습니다.