[2장] 타입
2.1 타입이란
1️⃣ 자료형으로서의 타입
데이터 타입은 여러 종류의 데이터를 식별하는 분류 체계로 컴파일러에 값의 형태를 알려준다.
- undefined
- null
- Boolean
- String
- Symbol
- Numeric(Number와 BigInt)
- Object
2️⃣ 집합으로서의 타입
프로그래밍에서 타입은 수학의 집합과 유사하며 값이 가질 수 있는 유효한 범위의 집합을 말한다.
const num: number = 123;
const str: string = "abc";
function func(n: number) {
// ...
}
func(num);
func(str); // 🚨 Argument of type 'string' is not assignable to parameter of type 'number' - 어떤 값이 T타입이라면 컴파일러(또는 개발자)는 이 값으로 어떤 일을 할 수 있고, 어떤 일을 할 수 없는지를 사전에 알 수 있다.
- 타입 시스템은 코드에서 사용되는 유효한 값의 범위를 제한해서 런타임에 발생할 수 있는 유효한 값에 대한 에러를 방지해준다.
3️⃣ 정적 타입과 동적 타입
타입을 결정하는 시점에 따라 정적 타입, 동적 타입으로 분류할 수 있다.
- 정적 타입 시스템: 모든 변수의 타입이 컴파일타임에 결정, 코드 수준에서 타입을 명시 (C, 자바, 타입스크립트 등)
- 동적 타입 시스템: 변수 타입이 런타임에서 결정 (파이썬, 자바스크립트 등)
4️⃣ 강타입과 약타입
암묵적 타입 변환 여부에 따라 타입 시스템을 강타입과 약타입으로 분류할 수 있다.
- 강타입: 서로 다른 타입을 갖는 값끼리 연산을 시도하면 컴파일러 또는 인터프리터에서 에러가 발생 (파이썬, 루비, 타입스크립트 등)
- 약타입: 서로 다른 타입을 갖는 값끼리 연산할 때는 컴파일러 또는 인터프리터가 내부적으로 판단해서 특정 값의 타입을 변환하여 연산을 수행 (C++, 자바, 자바스크립트 등)
5️⃣ 컴파일 방식
컴파일의 일반적인 이미는 사람이 이해할 수 있는 방식으로 작성한 코드를 컴퓨터가 이해할 수 있는 기계어로 바꿔주는 과정
- 타입스크립트는 자바스크립트의 컴파일타입에 런타임 에러를 사전에 잡아내기 위해 만들어진 것으로 타입스크립트를 컴파일하면 타입이 모두 제거된 자바스크립트 소스코드만이 남게 된다.
2.2 타입스크립트의 타입 시스템
1️⃣ 타입 애너테이션 방식
변수나 상수 혹은 함수의 인자와 반환 값에 타입을 명시적으로 선언해서 어떤 타입 값이 저장될 것인지를 컴파일러에 직접 알려주는 문법
변수 이름 뒤에 :type 구문을 붙여 데이터 타입을 명시해준다.
let isDone: boolean = false;
let decimal: number = 6;
let color: string = "blue";
let list: number\[\] = \[1,2,3\];
let x: \[string, number\]; // tuple 2️⃣ 구조적 타이핑
명목적으로 구체화한 타입 시스템은 값이나 객체가 하나의 구체적인 타입을 가지고 있으며 이름으로 타입을 구분
- 컴파일타임 이후에도 남아있다.
- 서로 다른 클래스끼리 명확한 상속 관계나 공통으로 가지고 있는 인터페이스가 없다면 타입은 서로 호환되지 않는다.
타입스크립트는 명목적인 타입 언어와 달리 구조로 타입을 구분
interface Developer {
faceValue: number;
}
interface BankNote {
faceValue: number;
}
let developer: Developer = { faceValue: 52 };
let bankNote: BankNote = { faceValue: 10000 };
developer = bankNote; // ✅ OK
bankNote = developer; // ✅ OK 3️⃣ 구조적 서브타이핑
객체가 가지고 있는 속성(프로퍼티)을 바탕으로 타입을 구분하는 것
- 이름이 다른 객체라도 가진 속성이 동일하다면 타입스크립트는 서로 호환이 가능한 동일한 타입으로 여김
// 구조적 서브타이핑은 함수의 매개변수에도 적용됨
interface Pet {
name: string;
}
let cat = { name: "Zag", age: 2 };
function greet(pet: Pet) {
console.log("Hello, "+pet.name);
}
greet(cat); // ✅ OK // 타입의 상속 역시 구조적 타이핑을 기반으로 하고 있다.
class Person {
name: string;
age: number;
constructor(name: string, age: number) {
this.name = name;
this.number = number;
}
}
class Developer {
name: string;
age: number;
sleepTime: number;
constructor(name: string, age: number, sleepTime: number) {
this.name = name;
this.age = age;
this.sleepTime = sleepTime;
}
}
function greet(p: Person) {
console.log(\`Hello, I'm ${p.name}\`);
}
const developer = new Developer("zig", 20, 7);
greet(developer); // Hello, I'm zig
// 타입이 계층 구조로부터 자유롭다. 4️⃣ 자바스크립트를 닮은 타입스크립트
명목적 타이핑
- 이름으로 타입을 구분하기 때문에 구조가 같더라도 이름이 다르면 다른 타입으로 취급
- 타입의 동일성을 확인하는 과정에서 구조적 타이핑에 비해 조금 더 안전
(객체의 속성을 다른 객체의 속성과 호환되지 않도록 하여 안전성을 추구)
타입스크립트가 구조적 타이핑을 채택한 이유는 타입스크립트가 자바스크립트를 모델링한 언어이기 때문
덕 타이핑과 구조적 타이핑 모두 객체 변수, 메서드 같은 필드를 기반으로 타입을 검사한다는 점에서 동일하지만, 타입을 검사하는 시점이 다르다.
구조적 타이핑
- 컴파일타임에 타입체커가 타입을 검사
- 주로 정적 타이핑에서 사용
덕 타이핑
- 런타임에 타입을 검사
- 주로 동적 타이핑에서 사용
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;
}
} 🚨 c에 들어올 객체는 Cube의 width, height, depth 외에도 어떤 속성이든 가질 수 있기 때문에 c[axis]의 타입이 string일 수도 있어 에러가 발생
예를들어 아래와 같은 상황에서!
const namedCube = {
width: 6,
height: 5,
depth: 4,
name: "SweetCube",
};
addLines(namedCube); 📢 타입스크립트의 구조적 타이핑 특징으로 Cube 타입 값이 들어갈 곳에 name과 같은 추가 속성을 가진 객체도 할당할 수 있기 때문에 발생하는 문제!
✅ 이러한 한계를 극복하고자 유니온과 같은 방법이 생겨남
6️⃣ 타입스크립트의 점진적 타입 확인
- 컴파일타임에 타입을 검사하면서 필요에 따라 타입 선언 생략을 허용하는 방식
- 타입 선언이 생략하면 암시적 타입 변환이 일어나 동적으로 검사를 수행
function add(x, y) {
return x+y;
}
// 위 코드는 아래와 같이 암시적 타입 변환이 일어남
// function add(x: any, y: any): any; 타입스크립트에서는 필요에 따라 타입을 생략할 수도 있고 타입을 점진적으로 추가할 수도 있다.
7️⃣ 자바스크립트 슈퍼셋으로서의 타입스크립트
타입스크립트는 기존 자바스크립트 코드에 정적인 타이핑을 추가한 것으로 자바스크립트의 상위 집합이다.
8️⃣ 값 vs 타입
- 값은 프로그램이 처리하기 위해 메모리에 저장하는 모든 데이터
타입스크립트는 변수, 매개변수, 객체 속성 등에 : type 형태로 타입을 명시
또는, type이나 interface 키워드로 커스텀 타입을 정의할 수도 있다.
- 값 공간과 타입 공간의 이름은 서로 충돌하지 않기 때문에 타입과 변수를 같은 이름으로 정의 할 수 있다. (타입스크립트 문법인 type으로 선언한 내용은 자바스크립트 런타임에서 제거되기 때문에)
타입스크립트는 값과 타입 공간에 동시에 존재하는 심볼도 있다.
대표적인 것이 클래스와 enum
클래스
클래스는 타입으로도 사용된다.
class Developer {
name: string;
domain: string;
constructor(name: string, domain: string) {
this.name = name;
this.domain = domain;
}
}
const me: Developer = new Developer("zig", "frontend"); **enum**
// enum이 타입으로 사용된 예시
enum WeekDays {
MON = "Mon",
TUES = "Tues",
WEDNES = "Wednes",
THURS = "Thurs",
FRI = "Fri",
}
// 'MON' | 'TUES' | 'WEDNES' | 'THURS' | 'FRI'
type WeekDaysKey = keyof typeof WeekDays;
function printDay(key: WeekDaysKey, message: string) {
const day = WeekDays\[key\];
if(day <= WeekDays.WEDNES) {
console.log(\`It's still ${day}day, ${message});
}
}
printDay("TUES", "wanna go home"); // enum이 값 공간에서 사용된 경우
enum MyColors {
BLUE = "#0000FF",
YELLOW = "#FFFF00",
MINT = "#2AC1BC",
}
function whatMintColor(palette: { MINT: string}) {
return palette.MINT;
}
whatMintColor(MyColors); **타입스크립트에서 자바스크립트의 키워드가 해석되는 방식**
| 키워드 | 값 | 타입 |
|---|---|---|
| class | Y | Y |
| const, let, var | Y | N |
| enum | Y | Y |
| function | Y | N |
| interface | N | Y |
| type | N | Y |
| namespace | Y | N |
9️⃣ 타입을 확인하는 방법
**`typeof`**
연산하기 전에 피연산자의 데이터 타입을 나타내는 문자열을 반환
- 값에서 사용: 자바스크립트 런타임의 `typeof` 연산자
- 타입에서 사용: 값을 읽고 타입스크립트 타입을 반환
interface Person {
first: string;
last: string;
}
const person: Person = { first: "zig", last: "song" };
function email(options: { person: Person; subject: string; body: string }) {}
// 값으로 사용
const v1 = typeof person; // 값은 'object'
const v2 = typeof email; // 값은 'function'
// 타입으로 사용
type T1 = typeof person; // 타입은 Person
type T2 = typeof email; // 타입은 (options: { person: Person; subject: string; body: string; }) => void 자바스크립트 클래스는 typeof 연산자를 쓸 때 주의해야 한다.
class Developer {
name: string;
sleepingTime: string;
constructor(name: string, sleepingTime: string) {
this.name = name;
this.sleepingTime = sleepingTime;
}
}
const d = typeof Developer; // 값이 'function'
type T = typeof Developer; // 타입이 typeof Developer 타입 공간에서 `typeof Developer`는 type T에 할당된 `Developer`는 인스턴스의 타입이 아니라 new 키워드를 사용할 때 볼 수 있는 생성자 함수이기 때문이다.
const zig: Developer = new Developer("zig", 7);
type ZigType = typeof zig; // 타입이 Developer `Developer` 클래스로 생성한 `zig` 인스턴스는 `Developer`가 인스턴스 타입으로 생성되었기 때문에 typeof zig는 `Developer`를 반환
그러나, `Developer`는 `Developer` 타입의 인스턴스를 만드는 생성자 함수이다. 따라서 typeof Developer 타입도 그 자체인 typeof Developer가 된다.
// typeof Deveoper
new (name: string, sleepingTime: number): Developer **`instanceof`**
프로토타입 체이닝 어딘가에 생성자의 프로토타입 속성이 존재하는지 판단할 수 있다.
let error = unknown;
if(error instanceof Error) {
showAlertModal(error.message);
} else {
throw Error(error);
} 2.3 원시 타입
1️⃣ boolean
오직 `true`와 `false` 값만 할당할 수 있는 boolean 타입
2️⃣ undefined
정의되지 않았다는 의미의 타입으로 오직 `undefined` 값만 할당할 수 있다.
3️⃣ null
오직 `null`만 할당할 수 있다.
4️⃣ number
숫자에 해당하는 모든 원시 값을 할당할 수 있다.
5️⃣ bigInt
`number` 타입과 `bigInt` 타입은 엄연히 다른 타입이기 때문에 상호 작용은 불가능
6️⃣ string
문자열을 할당할 수 있는 타입
7️⃣ symbol
`Symbol()` 함수를 사용하면 어떤 값과도 중복되지 않는 유일한 값을 생성할 수 있다.
타입스크립트에는 symbol 타입과 const 선언에서만 사용할 수 있는 unique symbol 타입이라는 symbol의 하위 타입도 있다.
2.4 객체 타입
1️⃣ object
가급적 사용하지 말도록 권ㄴ장!
2️⃣ {}
중괄호 안에 객체의 속성 타입을 지정해주는 식으로 사용
3️⃣ array
타입스크립트 배열 타입은 하나의 타입 값만 가질 수 있다.
- 튜플 타입도 대괄호로 선언
4️⃣ type과 interface 키워드
객체를 타이핑하기 위해 사용하는 키워드
5️⃣ function
타입스크립트에서도 함수를 별도 함수 타입으로 지정할 수 있다.
**주의해야 할 점**
- 자바스크립트에서 `typeof` 연산자로 확인한 `function`이라는 키워드 자체를 타입으로 사용하지는 않는다.
- 타입스크립트에서는 매개변수도 별도 타입으로 지정해야 한다.
- 함수가 반환하는 값이 있다면 반환 값에 대한 타이핑도 필요하다.
function add(a: number, b: number) {
return a+b;
}
// 호출 시그니처
type add = (a: number, b: number) => number;