[JSTS-007][중급] TypeScript 타입으로 실수를 먼저 찾기 > IT 기술 공유

• 목록

[이번 수업]
JavaScript는 실행할 때 값의 타입을 확인하지만 TypeScript는 실행 전에 코드가 기대하는 값의 모양을 검사할 수 있습니다. 이번에는 타입 표기, 타입 추론, 객체 타입, 엄격 검사로 잘못된 함수 호출을 미리 발견합니다.

[선수지식]
JSTS-002의 JavaScript 타입과 함수, JSTS-003의 객체, JSTS-006의 npm 사용법을 알고 Node.js와 npm을 실행할 수 있어야 합니다.

[학습목표]
1. 정적 타입 검사와 실행 중 검사의 차이를 설명한다.
2. 타입 표기와 타입 추론을 알맞게 사용한다.
3. 객체 타입과 `strict` 검사로 함수의 계약을 확인한다.

[핵심개념]
TypeScript는 JavaScript에 정적 타입 검사기를 더한 언어입니다. 정적 타입 검사는 실행 전에 값의 예상 모양과 사용법이 맞는지 확인합니다. `name: string`, `quantity: number`처럼 직접 적는 것을 타입 표기라고 합니다. `const count = 3`처럼 값만 보고 `number`라고 알아내는 것은 타입 추론입니다. 분명한 지역 변수는 추론에 맡기고, 함수 입력·출력처럼 다른 코드와 만나는 경계에는 타입을 명시하면 계약을 읽기 쉽습니다.

`interface`는 객체가 가져야 할 속성과 각 속성의 타입을 설명합니다. TypeScript는 이름보다 구조를 비교하므로 필요한 속성이 올바른 타입으로 있으면 호환될 수 있습니다. 이 방식을 구조적 타입 시스템이라고 합니다. 편집기는 이 정보로 없는 속성, 잘못된 인자, 오타를 실행 전에 알려 줍니다.

타입은 컴파일할 때 검사되고 만들어진 JavaScript에서는 대부분 지워집니다. 따라서 타입 표기가 실행 중 값을 변환하거나 외부 JSON을 검증하지 않습니다. `any`는 검사를 사실상 끄며, `as` 타입 단언은 검사기에 개발자의 판단을 믿으라고 할 뿐 실제 값을 확인하지 않습니다. `--strict`는 여러 엄격 검사 옵션을 묶고, `--noEmitOnError`는 타입 오류가 있을 때 JavaScript 출력을 새로 만들지 않게 합니다.

[따라하기]
새 폴더에서 다음 명령으로 현재 안정 TypeScript를 개발 의존성으로 설치합니다. macOS·Linux 터미널과 Windows PowerShell에서 명령은 같습니다.

```text
mkdir ts-type-lab
cd ts-type-lab
npm init -y
npm install --save-dev typescript
```

아래 내용을 type_demo.ts로 저장합니다.

```typescript
interface Order {
  id: string;
  quantity: number;
  unitPrice: number;
}

function total(order: Order): number {
  return order.quantity * order.unitPrice;
}

const order = {
  id: "A-001",
  quantity: 3,
  unitPrice: 2000,
};

console.log("합계:", total(order));
```

두 운영체제 모두 아래 두 명령을 차례로 실행합니다.

```text
npx tsc type_demo.ts --strict --noEmitOnError --target ES2022 --outDir dist
node dist/type_demo.js
```

타입 오류가 없으면 첫 명령은 보통 출력 없이 dist/type_demo.js를 만듭니다. 두 번째 명령의 예상 결과는 `합계: 6000`입니다. `order`에는 타입 표기가 없지만 초기 객체에서 속성 타입을 추론하고 `total`의 `Order` 계약과 비교합니다.

[흔한 실수]
- 추론되는 모든 변수에 타입을 반복해 코드를 길게 만든다.
- 오류를 없애려고 `any`나 `as Order`를 먼저 붙여 검사를 우회한다.
- 타입 오류가 있는데도 예전 dist 파일을 실행해 수정됐다고 착각한다.
- TypeScript 타입이 실행 중 외부 입력도 자동 검사한다고 생각한다.

[보안 주의]
네트워크 응답, 파일, 사용자 입력은 실행 중에는 신뢰할 수 없는 값입니다. 형식·길이·범위를 실제 코드로 검증한 뒤 내부 타입으로 변환하세요. `any`와 무검증 타입 단언으로 외부 데이터를 통과시키지 않습니다. 타입 검사는 인증, 권한 검사, 출력 인코딩을 대신하지 않습니다. 패키지는 JSTS-006에서 배운 잠금 파일과 공식 배포 경로를 사용하고 실습은 본인 로컬 폴더에서만 진행합니다.

[직접 해볼 과제]
`quantity: 3`을 `quantity: "3"`으로 바꾸고 컴파일하세요. `string`을 `number`에 넣을 수 없다는 오류와 JavaScript가 새로 생성되지 않는지 확인합니다. 다시 숫자로 고친 뒤 `total`의 반환 타입을 `string`으로 바꿔 어떤 줄이 지적되는지도 기록하세요.

[확인문제]
1. 타입 추론은 어떤 정보로 변수의 타입을 알아내나요?
2. `interface Order`는 객체의 무엇을 설명하나요?
3. TypeScript 타입만으로 외부 JSON을 안전하다고 판단할 수 없는 이유는 무엇인가요?

[다음 학습]
다음 WEB-007에서는 브라우저 개발자 도구로 HTML·CSS·네트워크 문제를 조사합니다.

[공식 참고 자료]
- TypeScript 기본 개념: https://www.typescriptlang.org/docs/handbook/2/basic-types.html
- TypeScript 일상 타입: https://www.typescriptlang.org/docs/handbook/2/everyday-types.html
- TypeScript strict 옵션: https://www.typescriptlang.org/tsconfig/strict.html