타입스크립트(TypeScript) 배운 내용 정리

출처 : 구글이미지

1. 컴파일러

 컴파일러란 고급언어로 쓰여진 프로그램을 어떤 특정한 컴퓨터에서 직접 실행가능한 형태의 프로그램으로 번역해주는 컴퓨터 프로그램을 말한다. 

 컴퓨터는 0과 1로 구성괸 기계어를 사용한다. 이 기계어는 저급언어이다. 프로그래머들이 개발을 할 때는 0과 1로 되어있는 기계어로 프로그래밍을 하기에는 ... (🤦🏻상상만 해도.. 으악) 어렵다. 그래서 사람들이 프로그램을 짜기 위해서 사람을 중심으로 한 고급언어가 나왔다. 고급언어중에 하나가 JavaScript이다. 

 프로그래머들이 작성한 텍스트를 컴파일러가 파싱해서 AST(Abstract Syntax tree)라는 추상 문법 트리를 자료구조로 변환한다. 이 때, 공백이나 주석의 결과들을 다 무시한다. 그리고 컴파일러는 AST를 하위수준의 바이트코드(bytecode)라는 하위 수준의 표현으로 변환한다. 그리고 바이트 코드가 만들어지면 런타임(runtime)이라는 프로그램에 바이트코드를 입력하고 평가하고 결과를 얻을 수 있다.

1. 고급언어 -> 컴파일러 -> AST변환
2. AST -> 바이트코드
3. 런타임 -> 바이트코드 평가

 타입스크립트는 컴파일러가 코드를 바이트 코드대신 자바스크립트로 변환한다. 타입스크립트의 컴파일러는 AST를 만들어 결과코드를 내놓기 전에 타입확인을 거친다. 타입스크립트는 컴파일 타임에 문법 에러와 타입에 관련된 에러를 다 검출한다. 

let a = 7;
let b = [77];
let c = a + b;

// 자바스크립트
console.log(c); // "777"

// 타입스크립트 
// Operator '+' cannot be applied to types 'number' and 'number[]'
// 숫자와 숫자배열을 더할 수 없다는 에러 발생

 자바스크립트의 경우에는 조용히 슬쩍 a와 b를 문자열로 바꾸어서 두개의 값을 더한다. 하지만 타입스크립트의 경우는 잘못되었다고 말해준다. 

---

2. 타입리터럴(type literal)

let a = 1;
var b = 2;
const c = 3;
let d: number = 4;
let e: 5 = 5;
let f: 6 = 666; // 666은 6이라는 타입에 할당할 수 없음 에러메세지 등장

 a와 b의 경우에는 타입스크립트가 값을 추론한다. c의 경우에는 타입스크립트가 해당 변수의 값이 절대 변하지 않는다는 것을 알게되었고, 그 변수가 가질 수 있는 가장 좁은 타입으로 추론한다. d는 타입을 지정했고, 해당 타입의 값을 할당했다. e, f의 경우에는 각각 5와 6이 특정 타입이라는 것을 알려주었다. 이 때 e의 경우에는 'e는 5라는 특정 타입을 가지고 있다.'라고 말해주는 것이다. 이 기능을 타입리터럴 이라고 부른다. 타입리터럴은 오직 하나의 값을 나타내는 타입이다.

---

3. 인덱스 시그니처(index signature)

// [key: T]: U

let reservationRoom : {
  [roomNumber: number]: string,
} 

reservationRoom = {
    1301: "Booked",
    1302: "Empty",
    1303: "Empty",
    1304: "Booked",
    1305: "Booked",
    1306: "Booked"
}

인덱스 시그니처는 타입스크립트에 어떤 객체가 여러개의 키(key)를 가질 수 있다는 것을 알려준다. 위의 코드를 보면 해당 객체는 number라는 타입의 키를 가지고 string의 타입의 값을 가진다는 의미로 [roomNumber: number]: string으로 작성되었다. 인덱스 시그니처를 사용하면 정의한 키외에 다른 키들을 객체에 추가할 수 있다. 그리고 지켜야할 규칙이 있다. 키로 들어가는 타입은 number나 string타입에 할당할 수 있는 타입이어야 한다. 

---

4. 객체 readonly

let person : {
  readonly name: string,
  city: string
};

person = {
    name: 'SERENA',
    city: "NY"
};

person.city = "LA";
person.name = "YERENA" // 읽기 전용 프로퍼티이기 떄문에 할당 할 수 없다는 에러메세지 등장

---

5. Union과 Intersection

type Human = { name: string, homeTown: string };
type Robot = { name: string, battery: number, manufature: string };
type HumanOrRobot = Human | Robot;
type HumanAndRobot = Human & Robot;

let a: HumanOrRobot;

// 사람
a  = {
    name: 'Donny',
    homeTown: "Seoul",
};

// 로봇
a = {
    name: 'Xavis',
    battery: 83,
    manufacture: 'StarkINC',
};

// ???
a = {
    name: 'æ-Donny',
    homeTown: 'POS',
    battery: 100,
    manufacture: 'Nævis'
};

// ??????????
let b: HumanAndRobot = {
    name: 'æ-Xavis',
    hometown: 'POS',
    battery: 111,
    manufacture: "Black-Mamba"
};

 Union타입의 경우에는 사람 또는 로봇 타입을 쓸 수 있고, 다 포함해서 값을 할당할 수 있다. Intersection의 경우에는 하나의 타입이 아니라 다 합친 타입만 사용할 수 있다.