코딩애플 Typescript - 타입도 변수에 담아쓰세요 type 키워드 써서 & readonly

타입이 너무 길고 복잡하면 변수에 담아서 사용할수 있다.

type alias 만드는 법

이렇게 type이라는 문법에 내가 원하는 타입을 저장해 놓고 변수에 저장한 타입을 넣어주는 방식이다. 이렇게 타입키워드로 변수를 만드는것을 type alias이라고 한다. 번역하면 type별칭이라고 하는데 그냥 type 변수라고 생각하자.

타입 변수에는 여러가지를 다 넣을수 있다. union 타입부터 object 타입까지 저장해 둘수 있다.

이런 타입을 선언해 두었다고 가정해보자. 이렇게 길어질 변수 타입을 두번째 이미지 처럼 해줄수 있게된다.조금더 편리하게 저장해서 사용할수 있게 된다.

type 변수 작명을 할때는 항상 영어대문자로 시작하는게 국룰이라고 생각하자. 일반 변수와 차별을 주기 위한것이다. 뒤에 Type이라고 붙여도 좋다 . 이러한 관습을 지키도록 하자.

---

const 변수는 선언하면 값을 변경할수 없다. 하지만 위처럼 object수정은 자유롭게 가능하다. const 변수는 등호로 재할당만 막는 역할이지 object수정은 자유롭게 가능하다. 위 그림처럼 변경을해도 아무런 에러가 나지 않는다.이게 const변수의 특징 혹은 단점이라고 볼수있는데 안에있는 objcet 자료 수정은 막지 못한다는것이다.
하지만 ts에서는 object안에 자료 수정도 막을수 있다. 하지만 ts안에서만 동작하는것이지 실제 js에서는 막아줄수는 없다.

이렇게 type변수를 사용해서 미리 object의 값을 지정해줄수 있다. 하지만 readonly라는 설정을 해주지 않으면 js와 마찬가지로 object안에 값을 수정할수 있는데 readonly를 설정해주면 읽기 전용이라는 뜻으로 수정을 할수 없게 lock을 걸어주는것이다.실수로 수정을 하면 에러를 발생해줄것이다.하지만 명심해야할 것은 이러한 에러는 타입스크립트에서만 존재한다.ts의 에디터&터미널에만 에러가 존재한다는 것이다.
실제로 js파일에서는 에러를 잡아주지 않는다.일종의 경고라고 보면 될거같다.

이런식으로 ? 를 붙일수도 있다. name속성이 들어올수도있고 안들어올수도있다 라는 뜻이다. ? 는 string | undefined 라고 보면 된다고 했다.

그리고 위처럼 타입을 합칠수 도 있다.union type으로 합쳐지는 것이다.

위처럼 2개의 objcet타입을 합치고 싶다면 위 그림처럼 & 기호를 사용하여 합치면 옆에 모양처럼 object타입이 합쳐지게 된다. 이런 합쳐주는 과정을 extend라고 한다.

type 변수를 사용할떄 주의할점은 type 변수는 재정의 할수 없다. 재정의가 불가능 하다는것이다. 그래서 엄격하게 사용할수있다.

---

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

-> 키값이 중복일때는 이렇게 에러를 발생해준다.

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

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

type alias로 만들어보셈

나의 풀이

type New ={color?: string ,size :number ,readonly position : number[]}

센세 풀이

type MyType = {
    color? : string,
    size : number,
    readonly position : number[]
}

let 테스트용변수 :MyType = {
    size : 123,
    position : [1,2,3]
}

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

1. 대충 이렇게 생긴 object 자료를 다룰 일이 많습니다. { name : 'kim', phone : 123, email : 'abc@naver.com' }

2. object 안에 있는 이름, 전화번호, 이메일 속성이 옳은 타입인지 검사하는 type alias를 만들어봅시다.

3. 각 속성이 어떤 타입일지는 자유롭게 정하십시오.

나의 풀이

type T2 ={ name : string, phone : number, email : string};

센세 풀이

type User = { name : string, email? : string, phone : number } 
let 회원가입정보 :User = {
  name : 'kim',
  phone : 123,
}

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

1. 숙제2와 똑같은데 이번엔 이름, 전화번호, 이메일, 미성년자여부 속성을 옳은 타입인지 검사하는 type alias를 만들어봅시다.

2. 미성년자 여부 속성은 true/false만 들어올 수 있습니다.

3. 멋있게 숙제3에서 만들어둔 type alias를 재활용해봅시다.

나의 풀이

type T3 ={ name : string , phone :number , email : string , adult : boolean }

타입 합치는것을 안해본거같다.

센세 풀이

type User = { name : string, email? : string, phone : string } 
type Adult = { adult : boolean }

type NewUser = User & Adult;

let 회원가입정보 :NewUser = {
  name : 'kim',
  adult : false,
  phone : 1234
}