2장 타입
2.1 타입이란?
1. 자료형으로서의 타입
변수란 값을 저장하는 공간이자 상징적인 이름 (공간 = 메모리)
컴퓨터의 메모리는 한정적 -> 효율적인 저장을 위해 차지할 공간 계산 필요
최신 ECMASCript 표준의 7가지 자료형
- undefined
- null
- boolean
- string
- numeric (Number와 BigInt)
- object
- symbol
-> numeric 빼고 안 보고 써봤음 대단하쥬?
2. 집합으로서의 타입
프로그래밍에서의 타입은 수학의 집합과 유사 (타입 = 값이 가질 수 있는 유효한 범위의 집합)
3. 정적 타입과 동적 타입
타입을 결정하는 시점에 나뉘는 것을 말하는 말
정적
컴파일 타임에 결정됨
개발자가 타입을 명시해줘야하는 C, 자바, TS가 정적 타입 언어에 속함
번거롭지만 안정성보장
동적
런타임에서 결정
파이썬, JS가 대표적인 동적 타입 언어 / 직접 타입을 정의해줄 필요없음
프로그램을 돌릴 때 에러가 발생
편하지만 언제 오류가 생길지 모르는 불안감
컴파일? 런타임?
컴파일 - 코드를 기계가 이해할 수 있도록 기계어로 변환되는 시점
런타임 - 컴파일을 거쳐 변환된 파일이 메모리에 적재되어 실행되는 시점
4, 강타입과 약타입
타입이 결정되는 시점은 다르지만 모든 프로그래밍 언어에는 값의 타입이 존재
런타임에서 자동으로 타입이 변경되는 것을 "암묵적 타입 변환" 이라고 함
여기에서 암묵적 타입 변환 여부에 따라 타입 시스템을 강타입과 약타입으로 분류 가능
강타입 -> 서로 다른 타입끼리 연산 X
약타입 -> 컴파일러나 인터프리터가 판단해서 특정 값의 타입을 변환하여 연산
약타입 언어 - 자바스크립트 자동 변환 연산
강타입 언어 - 타입스크립트 (계산 불가)
타입스크립트는 자동 타입 추론도 있고 명시적도 있음
5. 컴파일 방식
타입스크립트를 컴파일하면 타입이 모두 제거된 자바스크립트 소스코드만이 남음
자바는 그 자체로 언어이지만 타입스크립트를 자바스크립트에 타입이라는 레이어를 끼얹은 일종의 템플릿 언어 또는 확장으로 해석
2.2 TS의 타입 시스템
1. 타입 어노테이션 (type annotation)
타입 어노테이션 : 값에 타입을 명시적으로 지정
int ~ = 1;
String ~ = 'Hello world';
2. 구조적 타이핑
타입은 이름으로 구분되며 컴파일 타임 이후에도 남아있음 이것을 타입 시스템이라고 함
타입스크립트에서 타입을 구분할 땐 구조로 탕비을 구분함 이것을 구조적 타이핑이라고 함
3. 구조적 서브타이핑
타입스크립트의 타입시스템은 집합으로 이해가능 그렇기에 여러 타입을 동시에 가질 수 있음
이렇게 집합으로 나타낸다는 개념이 바로, 구조적 서브타이핑
interface Pet {
name: string;
}
interface Cat {
name: string;
age: numbner;
}
let pet: Pet;
let cat: Cat = { name" "Zag", age: 2 };
pet = cat; // 할당 가능
Cat은 Pet과 다른 타입이지만 Pet이 갖고 있는 name 속성을 가지고 있기에 할당 가능구조적 서브타이핑은 함수의 매개변수에도 적용 가능
타입스크립트의 다른 두 타입은 오로지 타입 내부 구조에 의해 결정됨
타입 A가 타입 B의 서브타입이라면 A 타입의 인스턴스는 B 타입이 필요한 곳에 언제든 위치 가능 -> 타입이 계층으로 부터 자유로움
4. 자바스크립트를 닮은 타입 스크립트
타입스크립트의 타입 시스템은 구조적 서브타이핑 (타입의 구조만 같으면 됨)
이와 대조적으로, 명목적 타이핑은 타입의 구조가 아닌 타입의 이름만을 가지고 구별하는 것 (C++, 자바)
명목적 타이핑은 타입의 동일성을 확인하는 구조가 훨씬 안전 -> 개발자가 의도하지 않았다면 변수에 타입을 명시하는 과정에서 에러를 내뱉음
구조적 타이핑시에 타입을 확정할 수 없으므로 타입스크립트에 명목적 타이핑 언어의 특징을 가미한 것이 유니온 타입
6. 타입스크립트의 점진적 타입 확인
TS는 JS의 슈퍼셋 언어이기 때문에 모든 JS코드는 TS라고 봐도 무방 (TS가 더 상위 개념이니)
하지만 반대로 모든 타입스크립트 코드가 자바스크립트 코드인 것은 아님
타입스크립트는 타입을 명시하는 문법을 가지고 있기 때문
8. 값 vs 타입
T타입과 값이 동시에존재하는 심볼도 있음 대표적인 것인 클래스와 Enum임
클래스는 타입으로도 사용되기 때문에, 클래스는 값과 타입 공간 모두에 포함될 수 있음
clas Developer {
name: string;
domain: string;
constructor(name: string, domain: string) {
this.name = name;
this.domain = domain;
}
}
const me: Developer = new Developer("zig", "front");이렇게 변수명 뒤에 me는 타입으로, new뒤에는 클래스의 생성자로 동작
enum 역시 런타임에 객체로 변환되는 값, enum은 런타임에 실제 객체로 존재하며 함수로 표현 가능
enum은 일반 객체처럼 동작도 가능함
트리쉐이킹 (tree-shaking)
JS-TS에서 사용하지 않는 코드를 삭제하는 방식 (나무를 흔들면 죽은 나뭇잎이 떨어지는 모습)
ES6이후 최신 개발 환경에서는 웹팩, 롤업 같은 모듈 번들러로 사용하지 않는 코드는 자동으로 삭제
9. 타입을 확인하는 방법
자바스크립트의 클래스는 결국 함수이기 때문에 typeof를 class에 하면 'function'이 도출됨
class Developer {
~
}
type T = typeof Developer // 타입이 typeof Developer;심지어 이렇게 type T에 할당된 Developer는 인스턴스 타입이 아니라 new 키워들르 사용할 때 볼 수 있는 생성자기때문
2.3 원시 타입
자바스크립트에서 값은 타입을 가지지만 변수는 별도의 타입을 가지지 않음
그렇기에 어떤 타입의 값이라도 자유롭게 할당 가능
자바스크립트 7개의 원시값은 원시타입임
원시 값과 원시 래퍼 객체
자바스크립트의 내장 타입은 파스칼 표기법
하지만 타입스크립트는 모두 소문자 -> 타입을 파스칼로 표기하면 자바스크립트에서 이것을 원시 래퍼 객체라고 부름 (null과 undefined 제외)
하지만 원시 래퍼객체는 원시값이 아닌 객체
결론
타입스크립트에서 컴파일러에 타입 추론을 온전히 맡길 것인지 명시적으로 타입을 선언할 것인지는 갱니의 취향 또는 팀의 컨벤션에 따라 다름!
