[TypeScript] 17. 변경 관련된 오류 방지를 위해 readonly 사용하기

📚 Effective TypeScript 책을 읽고 공부한 내용을 정리한 글입니다.

변경 관련된 오류 방지를 위해 readonly 사용하기

function arraySum(arr: number[]) {
  let sum = 0, num;
  while ((num = arr.pop()) !== undefined) {
    sum += num;
  }
  return sum;
}
function printTriangles(n: number) {
  const nums = [];
  for (let i = 0; i < n; i++) {
    nums.push(i);
    console.log(arraySum(nums));
  }
}

arraySum 함수

• 배열 안의 숫자들을 모두 합치고

• 계산이 끝나면 원래 배열이 전부 비게 된다.
  • 자바스크립트 배열은 내용을 변경할 수 있어서, 타입스크립트 역시 오류 없이 통과할 수 있다.

하지만 오류의 범위를 좁히기 위해, readonly 접근 제어자를 사용하여 arraySum이 배열을 변경하지 않는다는 선언을 한다.

function arraySum(arr: readonly number[]) {
  let sum = 0, num;
  while ((num = arr.pop()) !== undefined) {
                 // ~~~ 'pop' does not exist on type 'readonly number[]'
    sum += num;
  }
  return sum;
}

readonly number[] 는 ‘타입’이고, number[] 와 구분되는 특징들이 있다.

• 배열의 요소를 읽을 수 있지만, 쓸 수는 없다.

• length를 읽을 수 있지만, 바꿀 수 없다.

• 배열을 변경하는 pop을 비롯한 다른 메서드를 호출할 수 없다.

number[]는 readonly number[] 보다 기능이 많기 때문에, 서브타입이 된다.

따라서 변경 가능한 배열을 readonly 배열에 할당할 수 있지만, 그 반대는 불가능하다.

const a: number[] = [1, 2, 3];
const b: readonly number[] = a;
const c: number[] = b;
   // ~ Type 'readonly number[]' is 'readonly' and cannot be
   //   assigned to the mutable type 'number[]'

매개변수를 readonly로 선언할 경우

• 타입스크립트는 매개변수가 함수 내에서 변경이 일어나는지 체크한다.

• 호출하는 쪽에서는 함수가 매개변수를 변경하지 않는다는 보장을 받게 된다.

• 호출하는 쪽에서 함수가 readonly 배열을 매개변수로 넣을 수도 있다.

자바스크립트에서는 명시적으로 언급하지 않는 한, 함수가 매개변수를 변경하지 않는다고 가정한다.

• 하지만 암묵적인 방법은 타입 체크에 문제를 일으킴

• 명시적인 방법이 좋다 !

printTriangles가 이제 제대로 작동한다.

function arraySum(arr: readonly number[]) {
  let sum = 0;
  for (const num of arr) {
    sum += num;
  }
  return sum;
}

> printTriangles(5)
0
1
3
6
10

함수가 매개변수를 변경하지 않는다면, readonly로 선언해야 한다.

• 장점
  • 넓은 타입으로 호출 가능
  • 의도치 않은 변경이 방지된다.
  • 지역 변수와 관련된 모든 종류의 변경 오류 방지 가능

• 단점 (굳이 찾아보는 단점)
  • 매개변수가 readonly로 선언되지 않은 함수를 호출해야 할 경우도 있다.
    • 하지만 변경하지 않고도 제어가 가능하다면 readonly로 선언하면 된다.
  • 어떤 함수를 readonly로 만들면, 그 함수를 호출하는 다른 함수도 모두 readonly로 만들어야 한다.
    • 인터페이스를 명확히 하고 타입 안정성을 높일 수 있기 때문에 꼭 단점이라고 볼 수는 없다.

연속된 행에 대해 빈 줄을 기준으로 단락을 구분하는 프로그램

function parseTaggedText(lines: string[]): string[][] {
  const paragraphs: string[][] = [];
  const currPara: string[] = [];

  const addParagraph = () => {
    if (currPara.length) {
      paragraphs.push(currPara);
      currPara.length = 0;  // Clear the lines
    }
  };

  for (const line of lines) {
    if (!line) {
      addParagraph();
    } else {
      currPara.push(line);
    }
  }
  addParagraph();
  return paragraphs;
}

[ [], [], [] ]

• 문제점
  • 별칭과 변경을 동시에 사용해 발생

    paragraphs.push(currPara);

    • currPara의 내용이 삽입되지 않고 배열의 참조가 삽입
    • currPara에 들어 있던 값이 지워짐
    • 동일한 객체를 참조하고 있는 paragraphs 요소에도 변경이 반영

    ⇒ 즉, 새 단락을 paragraphs에 삽입하고 바로 지워버림

currPara를 readonly로 선언하여 이런 동작을 방지할 수 있다.

선언을 바꾸는 즉시 코드 내에서 몇 가지 오류가 발생하게 된다.

function parseTaggedText(lines: string[]): string[][] {
  const currPara: readonly string[] = [];
  const paragraphs: string[][] = [];

  const addParagraph = () => {
    if (currPara.length) {
      paragraphs.push(
        currPara
     // ~~~~~~~~ Type 'readonly string[]' is 'readonly' and
     //          cannot be assigned to the mutable type 'string[]'
      );
      currPara.length = 0;  // Clear lines
            // ~~~~~~ Cannot assign to 'length' because it is a read-only 
            // property
    }
  };

  for (const line of lines) {
    if (!line) {
      addParagraph();
    } else {
      currPara.push(line);
            // ~~~~ Property 'push' does not exist on type 'readonly string[]'
    }
  }
  addParagraph();
  return paragraphs;
}

currPara를 let 으로 선언하고 변환이 없는 메서드를 사용함으로써 두 오류를 잡을 수 있다.

let currPara: readonly string[] = [];
// ...
currPara = []; // 배열을 비움
// ...
currPara = currPara.concat([line]);

• concat 은 push 와 달리 원본을 수정하지 않고 새 배열을 반환한다.

• 선언부를 const 에서 let으로 변경하고 readonly를 추가함으로써 한 쪽의 변경 가능성을 옮김
  • currPara 변수는 가리키는 배열을 자유롭게 변경할 수 있지만
    • 배열 자체는 변경 불가

여전히 존재하는 paragraphs에 대한 오류를 바로잡는 방법 3가지

1. currPara 복사본 만들기

   paragraphs.push([...currPara]);

   • currPara는 readonly로 유지, 복사본은 원하는대로 변경이 가능

2. paragraphs 를 readonly string[] 의 배열로 변경하기

   const paragraphs: (readonly string[])[] = [];

   readonly string[][]은

   • readonly 배열의 변경 가능한 배열이 아니라
   • 변경 가능한 배열의 readonly 배열이다

3. 배열의 readonly 속성을 제거하기 위해 단언문 사용하기

   paragraphs.push(currPara as string[]);

   • 바로 다음 문장에서 currPara를 새 배열에 할당함
     • 공격적인 단언문으로 보이지는 않음

💡

readonly는 얕게(shallow) 동작한다 !

const dates: readonly Date[] = [new Date()];
dates.push(new Date());
   // ~~~~ Property 'push' does not exist on type 'readonly Date[]'
dates[0].setFullYear(2037);  // OK

• 객체의 readonly 배열이 있다면, 그 객체 자체는 readonly가 아니다.

interface Outer {
  inner: {
    x: number;
  }
}
const o: Readonly<Outer> = { inner: { x: 0 }};
o.inner = { x: 1 };
// ~~~~ Cannot assign to 'inner' because it is a read-only property
o.inner.x = 1;  // OK
type T = Readonly<Outer>;
// Type T = {
//   readonly inner: {
//     x: number;
//   };
// }

• Readonly 제너릭에도 해당된다.
  • readonly 접근제어자는 x가 아니라 inner에 적용되는 것

현재 시점에는 깊은(deep) readonly 타입이 기본으로 지원되지 않음

Uploaded by N2T