사례 기반 자바스크립트 - 타입스크립트 심층 분석

1일차: 예측 가능한 소프트웨어-구현-타입 시스템 이해하기

The Type

1. 타입

자바스크립트에서 원시 값이란 객체가 아니면서 메서드 또는 속성도 가지지 않는 데이터입니다. 이에는 string, number, bigint, boolean, undefined, symbol, null이 포함됩니다.
date, map, set과 같은 응용 타입도 존재합니다.

예시로 티니핑에도 여러 타입이 있습니다, 이 또한 집합 분류 개념으로 타입이 사용되는 것과 유사한 것입니다.

2. 타입 캐스팅

타입 형변환이라고도 합니다, undefined가 Number로는 NaN으로 바뀌고, Boolean 값으로는 False가 되는 것이 그 예시입니다.

3. 정적 타이핑 vs 동적 타이핑

둘 간의 가장 큰 차이는 타입 체크가 어느 시점에 이루어지냐의 차이입니다.
정적 타이핑은 컴파일 단계, 동적 타이핑은 런타임 단계에서 타입 체크가 이뤄집니다.

왼쪽이 정적, 오른쪽이 동적 타이핑

4. 강타입 vs 약타입

강타입은 형변환이 제약되어있습니다, 타입스크립트는 컴파일 시점에 타입 검증을 완료하는 정적 타입 언어이기 때문에 컴파일 단계에서 오류를 찾아냅니다. 즉 런타임이 넘어가기 전에 암시적 타입 변환이 일어나는 연산을 막아줍니다.

약타입은 곧 자바스크립트로, 형 변환이 알아서 일어납니다. (암시적 형변환)

5. Overview

Q: 타입스크립트는 어디에 속하나?
A: 타입스크립트는 정적 언어이면서 강 타입 언어라고 할 수 있습니다. (C#, Java 라인)

Javascript-The safe way

자바스크립트를 안전하게 사용하는 방법으로 예전에는 flow라는 라이브러리를 활용하여 자바스크립트에서 타입 체크를 할 수 있었습니다, 하지만 flow 파일들 간의 타입 체크를 하는데 시간이 조금 걸리고 타입스크립트에 비하면 성능이 좋지 않다고 합니다.

---

2일차: 고급 유틸리티 활용 사례

The Modal

vite react-ts을 활용한 간단한 App 구현(Tailwind CSS)
show, handleClose 2개의 타입을 선언, 2개의 props를 넘겨받는 구조
이를 통해 간단한 Alert Modal을 구현할 수 있고, 이외에도 comfirm, selector modal 등을 구현할 수 있습니다.
참고 자료: https://github.com/Hunni-Devteam/2025-feb-wanted-pre-onboarding-challenge/

Type Narrowing

Guaranteed to have a specific type

1. Generic 사용

제네릭은 타입 파라미터라고도 합니다.
제네릭을 통해 넘겨받은 타입에 대해서만 강제하여 API에 적용할 수 있습니다.

2. Union Type 사용

Union Type은 여러 개의 타입 중 하나를 선택할 수 있도록 허용하는 것입니다.
이를 통해 컴포넌트 분기를 구현할 수 있고, 필드를 좁힐 수 있습니다.