타입스크립트 readonly Immutability - 타입스크립트 TypeScript 강좌 10편

 

 

 

안녕하세요?

 

이번 시간에는 타입스크립트의 Immutability에 대해 알아 보겠습니다.

 

간혹가다가 코드를 짤 때 변경되지 않았으면 하는 데이터 타입이 있습니다.

 

이럴 때는 어떻게 해야 할까요?

 

const로 변수를 지정하면 변수값은 변경되지 않는데요.

 

객체의 경우에는 const 로 선언해도 객체의 내용이 변경될 수 있습니다.

 

다음 예를 들어 설명해 볼까요?

 

interface Cat {
    name: string;
    breed: string;
}

function makeCat(name: string, breed: string): Cat {
    return {
        name, breed
    }
}

const kihun = makeCat("squid cat", "squidGame")

kihun.name = "kihun"

 

Cat 이란 인터페이스를 만들었고 makeCat이란 함수로 Cat을 리턴했습니다.

 

그런데 분명히 const kihun 으로 선언했어도 kihun.name 으로 값을 변경할 수 있네요.

 

그러면 어떻게 하면 불변의 객체를 만들 수 있을 까요?

 

바로 타입스크립트의 readonly 지정자를 쓰면 됩니다.

 

interface Cat {
    readonly name: string;
    breed: string;
}

 

name 항목 앞에 readonly를 붙혔습니다.

 

 

이제 kihun.name을 변경하려고 하니까 에러가 뜨네요.

 

readonly 를 붙이는 방법말고 타입스크립트의 유틸리티 타입을 이용할 수 있는데요.

 

다음과 같이 하시면 됩니다.

 

interface Cat {
    name: string;
    breed: string;
}

type ReadonlyCat = Readonly<Cat>

function makeCat(name: string, breed: string): ReadonlyCat {
    return {
        name, breed
    }
}

const kihun = makeCat("squid cat", "squidGame")

kihun.name = "kihun" // error

 

 

유틸리티 타입인 Readonly를 이용하니까 모든 항목에 readonly 지정자가 붙은 타입이 새로 생겼네요.

 

그러면 객체에 readonly를 지정하는 방법을 알아봤는데요.

 

튜플에서는 어떻게 지정할까요?

 

function makeCoordinate(x: number, y: number): [number, number] {
    return [x, y]
}

const c1 = makeCoordinate(10, 20);
c1[0] = 50;

 

간단한 함수가 튜플을 리턴하는 형태인데요.

 

역시나 c1[0] = 50 이란 명령어로 튜플을 수정할 수 있는데요.

 

어떻게 readonly 를 지정할 수 있을까요?

 

리턴하는 곳에 readonly를 넣으면 됩니다.

 

function makeCoordinate(x: number, y: number): readonly [number, number] {
    return [x, y]
}

const c1 = makeCoordinate(10, 20);
c1[0] = 50; // error

 

이제 튜플을 건들 수 없는 Immutability 상태가 되었네요.

 

그럼 배열은 어떻게 readonly 상태로 만들 수 있을까요?

 

const reallyConst = [10, 20, 30]

 

다음과 같이 하면 배열을 readonly 상태로 만들 수 있습니다.

 

const reallyConst = [10, 20, 30] as const;

reallyConst[0] = 1; //error

예상한데로 reallyConst 배열은 수정이 불가능한 상태가 되었네요.

 

지금까지 타입스크립트에서의 readonly 와 Immutability 상태에 대해 알아 보았습니다.

 

그럼.