정중식의 개발공부로그

타입 변수에 담기(type 키워드 써서 & readonly)

13 Apr 2023 | typeScript

코딩애플강의를 보고 정리했습니다.

Type Aliases

  • 타입을 변수에 담아서 사용

  • type 타입변수명 = 타입종류

  • 관습적으로 대문자로 시작한다.

  • 재정의가 불가능하다.

type Animal = string | number | undefined;

let 동물: Animal;
  • type키워드를 유니온 타입처럼 사용 가능하다.
type Name = string;
type Age = number;
type NewOne = Name | Age;
  • 이런것도 가능 (extend)
type PositionX = { x: number };
type PositionY = { y: number };
type XandY = PositionX & PositionY;
let 좌표: XandY = { x: 1, y: 2 };

// Type alias & { name : string }도 가능

object 타입에도 적용 가능

type 사람 = {
  name: string,
  age: number,
};

let teacher: 사람 = { name: 'john', age: 20 };
  • 이렇게 물음표연산자로 속성이 undefined 라는 타입도 가질 수 있다라는거를 명시해줄수 있다.
type Square = {
  color?: string,
  width: number,
};

let 네모2: Square = {
  width: 100,
};

참고로, type 키워드를 안쓰면 이렇게 만들어야한다.

// 그리 가독성 좋은 코드는 아닌듯
let teacher: {
  name: string,
  age: number,
} = { name: 'john', age: 20 };

readonly

자바스크립트 기초를 살펴보자면, const 변수는 상수 값을 할당하는 변수이므로 재할당이되면 에러를 낸다.

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

하지만 예외는 있는법 const로 할당해준 오브젝트객체안의 내용은 변경이 가능하다.

const 여친 = {
  name: '엠버',
};
여친.name = '유라';

const 변수는 재할당만 막아줄뿐 그 안에 있는 object속성 바꾸는 것 까지는 관여하지 않기 때문이다.
object 속성을 바뀌지 않게 막고싶을때, readonly타입을 사용하자.

  • readonly 키워드는 속성 왼쪽에 붙일 수 있다.
  • 특정 속성을 변경불가능하게 잠궈준다.

(참고로 readonly는 컴파일시 에러를 내는 것일 뿐 변환된 js 파일 보시면 잘 바뀌긴 한다고함)

type Girlfriend = {
  readonly name : string,
}

let 여친 :Girlfriend = {
  name : '엠버'
}

여친.name = '유라' //readonly라서 에러남

Related Posts