2.1 타입이란
1. 자료형으로서의 타입
- 컴퓨터 메모리는 유한하기 때문에 값의 크기와 형태를 알려주는 타입이 필요함
- 자바스크립트는 7가지 데이터 타입 제공:
- undefined
- null
- Boolean
- String
- Symbol
- Numeric(Number/BigInt)
- Object
- 타입은 값의 분류 체계이자 메모리 구조와 안전성에 관여함
2. 집합으로서의 타입
- 타입은 수학적 집합 개념처럼, 유효한 값들의 범위를 제한하는 역할
- 타입 시스템은 잘못된 값이 사용되지 않도록 런타임 에러를 컴파일 타임에 방지
- 예) 매개변수에 number 타입을 명시하면 string을 넣을 경우 에러 발생
3. 정적 타입 vs 동적 타입
- 정적 타입 시스템: 타입이 컴파일 시점에 결정됨 → 타입 안정성 높음
- 동적 타입 시스템: 런타임에 타입이 결정됨 → 유연하지만 에러 가능성 있음
4. 강타입 vs 약타입
- 강타입: 타입이 맞지 않으면 연산 불가
- 약타입: 타입이 달라도 내부적으로 변환하여 연산 가능
- JS는 약타입, TS는 강타입
5. 명시적 vs 추론적 타입 시스템
- 명시적: 타입을 직접 지정
- 추론적: 컴파일러가 문맥을 통해 추론
- 타입스크립트는 둘 다 지원함
6. 타입스크립트의 컴파일 방식
- 타입 정보는 컴파일 시 제거되고, 순수 자바스크립트 코드로 변환됨
2.2 타입스크립트의 타입 시스템
1. 타입 애너테이션
- 변수나 함수 등에 : 타입으로 명시하여 타입 선언
2. 구조적 타이핑
- 타입 이름이 아닌 구조(속성과 타입)로 타입 호환 여부를 판단함
- Developer와 BankNote가 속성이 같으면 상호 할당 가능
3. 구조적 서브타이핑
- 객체가 더 많은 속성을 가지더라도 요구하는 속성을 포함하면 할당 가능
4. 구조적 타이핑 vs 명목적 타이핑
- 명목적: 타입 이름이 중요 (Java 등)
- 구조적: 타입 구조가 중요 (TypeScript)
- TS는 자바스크립트의 덕 타이핑 개념을 수용한 구조적 시스템 채택
5. 구조적 타이핑의 함정
- 추가 속성이 있는 객체도 호환 가능하기 때문에 예기치 않은 타입 에러 발생 가능
interface Cube {
width: number;
height: number;
depth: number;
}
function addLines(c: Cube) {
let total = 0;
for (const axis of Object.keys(c)) {
// 🚨 Element implicitly has an 'any' type
// because expression of type 'string' can't be used to index type 'Cube'.
// 🚨 No index signature with a parameter of type 'string'
// was found on type 'Cube'
const length = c[axis];
total += length;
}
}
6. 점진적 타입 검사
- 타입 생략 시 any처럼 취급됨
- 명시된 타입은 정적으로 검사, 생략된 건 동적 검사됨
7. 값 vs 타입 공간
- 타입스크립트에서 타입과 값은 별개의 공간 (타입 공간 vs 값 공간)
- 동일한 이름 사용 가능
- type Developer, const Developer
- 클래스, enum은 타입 + 값 공간 모두 사용 가능
8. typeof 연산자
- 값 공간: JS typeof → "string", "number" 등 문자열 반환
- 타입 공간: 변수나 값의 타입을 추론함 → type T = typeof person
- 클래스에서 typeof 클래스는 생성자 타입을 의미함
- typeof Developer → new (...) => Developer
- typeof zig → Developer
9. instanceof
- 특정 클래스의 인스턴스인지 런타임에 검사하는 연산자
- if (x instanceof Error)처럼 타입 정제 가능
10. 타입 단언
- as 키워드로 개발자가 타입을 강제 지정
- 컴파일 타임에서만 유효하며 런타임에는 효과 없음
11. 타입 가드
- 조건문을 통해 타입을 좁히는 방법
- in, typeof, instanceof, 사용자 정의 타입가드 등
2.3 원시 타입
- 타입스크립트는 원시 값과 래퍼 객체를 구분함 (예: boolean vs Boolean)
주요 원시 타입
- boolean: true/false
- undefined: 할당되지 않은 값
- null: 값이 비어있음을 명시
- number: 숫자 값 (정수, 실수, NaN, Infinity 포함)
- bigint: 큰 정수 (ES2020)
- string: 문자열
- symbol: 유일한 식별자. unique symbol도 존재함
2.4 객체 타입
1. object
- 객체 타입 (함수, 배열, 클래스, 정규표현식 포함)
- 원시 타입은 제외됨
2. {}
- 속성이 없는 타입 (빈 객체)
- 하지만 Object.prototype 메서드는 사용할 수 있음
3. array
- 동일 타입 원소로 이루어진 배열
- 선언법: number[] or Array<number>
- 튜플과 구분: 튜플은 개수와 타입 고정됨 ([string, number] 등)
4. type과 interface
- 객체 타입 선언 방식 두 가지
- 대부분의 경우 호환되며, interface는 확장성과 선언 병합에 강점
5. function
- 자바스크립트에서 function은 typeof 연산 시 "function"으로 구분됨
- 타입스크립트에서는 함수 시그니처를 통해 타입 명시
- 예: (a: number, b: number) => number
- 이걸 호출 시그니처(call signature)라고 함
