[typescript] Type Aliases(type 키워드 & readonly)

Type Aliases

타입스크립트 코드 작성시 아래와 같이 길고 복잡하게 타입을 나열하는 경우가 많습니다.

let animal: string | number | undefined;

type 키워드 = 타입을 변수처럼 만드는 것
type 키워드를 사용하는 것을 type alias 라고 합니다.

일반적 선언 방법

type {변수명} = {타입종류1} | {타입종류2} ....

type Animal = string | number | undefined;
let animal:Animal = 1234;

typeof(animal)
// 결과 : 'number'

let animal2:Animal = 'Hello, animal';

typeof(animal2)
// 결과: 'string'

let animal3:Animal

typeof(animal3)
// 결과: 'undefined'

• 비정상 타입 적용시 에러 예제

let animal4:Animal = true

typeof(animal4)

Error: Line 1, Character 5

let animal4:Animal = true

____^

TS2322: Type 'boolean' is not assignable to type 'Animal'.

   ... 생략 ...

• type 키워드 특징: 재정의 불가
  • 상기에서 선언된 Animal 재정의에 따른 에러 케이스

type Animal = string;

Error: Conflict with a committed line: 

type Animal = string | number | undefined;

_____^

TS2300: Duplicate identifier 'Animal'.



Line 1, Character 6

type Animal = string;

_____^

TS2300: Duplicate identifier 'Animal'.

    ... 생략 ...

Object 타입

• object 타입도 선언이 가능 합니다.

type Person = {
    name: string,
    age: number,
}

let man: Person = {
    name: 'seo',
    age: 30,
}

typeof(man)
// 결과: 'object'

선택사항 속성 만들기

특정 object 변수는 color와 width속성 모두 필요하지만

color 속성이 없을 수도 있는 type을 선언 하고 싶다면 ? 연산자를 추가해 주면 됩니다.

type Square = {
    color?: string,
    width: number,
}

let box: Square = {
    width: 1000,
}

box
// 결과: { width: 1000 }

여러 타입의 병합(extend)

OR(|) 연산자를 사용해서 Union 타입을 만들 수 있습니다.

NumOne 타입을 string | number를 가지고 있는 타입 입니다.

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

let studentName: NewOne = '홍길동'

typeof(studentName)
// 결과: 'string'

Object type으로 된 type alias 2개 이상의 변수에

AND(&) 연산자 사용을 하게 되면 두 속성을 하나로 합쳐 적용이 가능 합니다.

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

type Position = PositionX & PositionY

let position: Position = { x: 1, y: 2 }

position
// 결과: { x: 1, y: 2 }

readonly(읽기전용 - 값 수정 불가)

• const 특징 : 재할당 불가, object 속성 변경 가능
  
  위와 같은 특징으로 object로 선언된 const 변수의 속성은 아래 코드와 같이 변경이 가능 합니다.

const studentInfo = {
    name: '길순'
}

studentInfo.name = '길자';

studentInfo

// 결과 : { name: '길자' }

• object로 선언 된 속성 변경을 막고 싶다면 readonly 속성을 적용하면 됩니다.

type stuType = {
    readonly name: string,
}

let personalInfo: stuType = {
    name: '길순'
}

personalInfo.name = '길자'

Error: Line 9, Character 14

personalInfo.name = '길자'

_____________^

TS2540: Cannot assign to 'name' because it is a read-only property.

    ... 생략 ...