TypeScript 시작하기 (6) - 타입도 변수에 담아쓰세요 type 키워드 써서 & readonly

---

지난 시간에는 타입을 확정하는 Narrowing 과 Assertion 에 대해 알아보았습니다. 오늘은, 타입을 변수에 담아쓰는 방법과 readonly 에 대해 알아보겠습니다.

---

1. 타입이 너무 길고 복잡하면 변수에 담아 쓸 수 있습니다. type alias 는 union type 등 복잡한 타입의 변수도 담아서 저장해 둘 수 있습니다. 아래의 두 코드는 동일한 동작을 합니다.

   let animals: string | number;

   type Animal = string | number;
   let animals: Animal;

---

2. object 타입도 가능합니다. 아래의 두 코드 역시 동일한 동작을 합니다. type alias 의 작명은 대문자로 시작하는 것이 관습입니다.

   let animals: { name: string; age: number } = { name: "kim", age: 20 };

   type Animal = { name: string; age: number };
   let animals: Animal = { name: "kim", age: 20 };

---

3. typescript 를 쓰면 object 자료의 수정도 막을 수 있습니다. readonly 키워드를 사용하면 됩니다. 추가로 알아두면 좋은 것은, 타입스크립트 에러는 에디터와 터미널에서만 존재하는 것으로, 실제 변환된 js 파일에는 에러가 발생하지 않습니다.

   type Girlfriend = {
     readonly name: string;
   };
   
   const person: Girlfriend = { name: "Ember" };
   
   person.name = "Yura"; // 에러 발생

---

4. type 변수는 union type 으로 합치는 것도 가능합니다.

   type Name = string;
   type Age = number;
   type Person = Name | Age;

---

5. & 연산자로 object 타입을 합치는 것도 가능합니다. 전문적인 용어로는 extend 라고 합니다. 참고로, 같은 이름의 type 변수는 재정의가 불가능합니다.

   type PositionX = { x: number };
   type PositionY = { y: number };
   
   type NewType = PositionX & PositionY;
   let position: NewType = { x: 10, y: 20 };

---

6. object 타입을 정의한 type alias 두 개를 & 기호로 합칠 때 중복된 속성이 있으면 어떻게 될까? 중복된 속성이 같은 타입이면 문제가 없지만, 다른 타입이면 불가능한 타입이라는 뜻의 'never' 를 발생시킵니다.

   type Practice1 = { name: string };
   type Practice2 = { name: string };
   
   type NewType = Practice1 & Practice2; // type NewType = { name: string }
   let position: NewType = { name: "kim" }; // 정상

   type Practice1 = { name: string };
   type Practice2 = { name: number };
   
   type NewType = Practice1 & Practice2; // type NewType = { name: never }
   let position: NewType = { name: "kim" }; // 'string' 형식은 'never' 형식에 할당할 수 없습니다.ts(2322)

---

7. 다음 조건을 만족하는 타입을 만들어봅시다.
   a. 이 타입은 object 자료형이어야 합니다.
   b. 이 타입은 color 라는 속성을 가질 수도 있으며 항상 문자가 들어와야 합니다.
   c. 이 타입은 size 라는 속성이 있어야하며 항상 숫자가 들어와야합니다.
   d. 이 타입은 position 이라는 변경 불가능한 속성이 있어야하며 항상 숫자가 담긴 array 자료가 들어와야 합니다.

   type Condition1 = { color?: string };
   type Condition2 = { size: number };
   type Condition3 = {
     readonly position: number[];
   };
   
   type Context = Condition1 & Condition2 & Condition3;

---

8. 다음을 만족하는 type alias 를 연습삼아 간단히 만들어봅시다.
   a. 대충 이렇게 생긴 object 자료를 다룰 일이 많습니다. {name: ‘kim’, phone: 123, email: ‘abc@naver.com’}
   b. object 안에 있는 이름, 전화번호, 이메일 속성이 옳은 타입인지 검사하는 type alias 를 만들어 봅시다.
   c. 각 속성이 어떤 타입일지는 자유롭게 정해봅시다.

   type User = { name: string; phone: number; email: string };

---

9. 다음을 만족하는 type alias 를 만들어봅시다.
   a. 7번과 똑같지만 이번엔 이름, 전화번호, 이메일, 미성년자여부 속성을 옳은 타입인지 검사하는 type alias 를 만들어봅시다.
   b. 미성년자 여부 속성은 true/false 만 들어올 수 있습니다.
   c. 8번에서 만든 type alias 를 재활용해봅시다.

   type User = { name: string; phone: number; email: string; adult: boolean };

---

지금까지 type alias 와 readonly 에 대해 알아보았습니다. 다음 시간에는 Literal Types 에 대해 알아보겠습니다.