[코딩애플] ts part 1-6. Type Alias

type alias: 타입도 변수에 담아쓰세요 type 키워드 써서

type alias

• 타입 변수
• 타입이 너무 길어지는 경우에 변수로 만들어서 간단하게 사용함

type alias 만드는 법

type Animal = string | number | undefined;

let 동물 :Animal = 'kim';

object 타입을 변수에 담아보자.

let 동물 :{ name: string, age: number } = { name: 'kim', age: 20 }

type이 기니까 type으로 만들자. 훨씬 더 깔끔해진다.

type Animal = {name: string, age: number};
let 동물 :Animal = {name: 'kim', age: 20}

type 변수 작명 관습

• 일반 변수와 차별화두기를 위해 영어 대문자로 시작한다 (Animal)
• 뒤에 Type을 붙인다 (AnimalType)

readonly

const 변수 잠깐 설명시간

const 출생지역 = 'seoul';
출생지역 = 'busan'; // 에러 발생.

근데 만약 출생지역에 object가 오게 된다면 바꿀 수 있다.

const 출생지역 = {region: 'seoul'};

왜냐하면 **const는 등호로 재할당을 막는 역할이다. object 수정은 자유롭게 가능**하다.

readonly: 자료 수정 막기

readonly를 붙이고 실수로 수정하면 에러를 내준다. 이제 절대로 바꿀 수 없다.

type Girlfriend = {
    readonly name: string
}

const 여친 :Girlfriend = { // readonly가 됨
    name: '엠버'
}
여친.name = '유라'; // 에러 발생. 바꿀 수 없음

타입스크립트 에러는 에디터 & 터미널에서만 존재함

실제 자바스크립트 파일에 가면 바꿔주고 있다. 타입스크립트는 그냥 에디터에서 잡아주는 경고사항이지, 실제 변환된 js파일은 에러가 없다.

object 속성 안에도 ? 사용 가능

type Girlfriend = {
	name? :string
}

name 속성이 들어와도 되고, 안들어와도 된다.

name :string | undefined

이렇게 치는거랑 동일함.

type변수 -> 당연히 union type으로 합치기 가능

type Name = string;
type Age = number;

type Person = Name | Age; // union type

& 연산자로 object 타입 합치기(extend 하기)

type PositionX = { x: number };
type PositionY = { y: number };

type NewType = PositionX & PositionY // {x: number, y: number}

let position: NewType = {x: 10, y: 20}; //

같은 이름의 type 변수 재정의 불가능

type PositionX = {x: number};
type PositionX = number; // 에러 발생.

숙제

1. object 타입을 정의한 type alias 두 개를 & 기호로 합칠 때 중복된 속성이 있으면 어떻게 될까요?

➡️ 예제로 코드를 작성해봤다.

type A = {
  a: string;
  b: number;
};
type B = {
  b: string;
};
type C = A & B;

const c: C = { a: "1", b: 2 }; // 에러 발생

Type 'number' is not assignable to type 'never'.ts(2322)
06_assign-1.ts(3, 3): The expected type comes from property 'b' which is declared here on type 'C'

중복된 속성이 있을 때 합치면 안된다! 에러 발생함.

2. 다음 조건을 만족하는 타입을 만들어봅시다.

1. 이 타입은 object 자료형이어야합니다.
2. 이 타입은 color 라는 속성을 가질 수도 있으며 항상 문자가 들어와야합니다.
3. 이 타입은 size 라는 속성이 있어야하며 항상 숫자가 들어와야합니다.
4. 이 타입은 position 이라는 변경불가능한 속성이 있어야하며 항상 숫자가 담긴 array 자료가 들어와야합니다.

type alias로 만들어보셈

➡️

type Data = {
  color?: string;
  size: number;
  readonly position: number[];
};

3. 다음을 만족하는 type alias를 연습삼아 간단히 만들어보십시오.

1. 대충 이렇게 생긴 object 자료를 다룰 일이 많습니다. **{ name : 'kim', phone : 123, email : 'abc@naver.com' }**
2. object 안에 있는 **이름, 전화번호, 이메일** 속성이 옳은 타입인지 검사하는 type alias를 만들어봅시다.
3. 각 속성이 어떤 타입일지는 자유롭게 정하십시오.

➡️

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

4. 다음을 만족하는 type alias를 만들어보십시오.

1. 숙제2와 똑같은데 이번엔 **이름, 전화번호, 이메일, 미성년자여부** 속성을 옳은 타입인지 검사하는 type alias를 만들어봅시다.
2. 미성년자 여부 속성은 true/false만 들어올 수 있습니다.
3. 멋있게 숙제2에서 만들어둔 type alias를 재활용해봅시다.

➡️

type Person = {
  name: string;
  phone: number;
  email: string;
};
type Adult = {
  isAdult: boolean;
};

type Information = Person & Adult;