Typescript - 팁과 요령 - 읽기 전용 배열

function sortAndReverse(list: number[]): number[] {
  return list.sort().reverse();
}

const list = [1, 4, 5, 2];
sortAndReverse(list);
console.log(list);

최종 콘솔 로그의 결과는 무엇입니까?

[ 1, 4, 5, 2 ]

[ 5, 4, 2, 1 ]

[ 2, 5, 4, 1 ]

불행히도 정답은 두 번째입니다.


이 멍청한 예제에서 일부 배열 메서드가 부작용을 가질 수 있는 방법을 볼 수 있습니다. sort 및 reverse 메서드는 결과와 함께 새 배열을 반환하지만 초기 배열도 변경합니다.
Typescript는 읽기 전용 배열을 사용하여 이러한 부작용을 방지하는 데 도움이 될 수 있습니다.
읽기 전용 배열은 초기 배열을 수정하는 메서드를 식별하고 이러한 메서드를 호출할 때 오류를 발생시킵니다.
하지만 이제 읽기 전용 배열을 어떻게 사용할 수 있습니까? 배열 유형 앞에 읽기 전용 수정자를 표시해야 합니다.
따라서 이전 예제는 이렇게 변경될 수 있습니다.

function sortAndReverse(list: readonly number[]): number[] {
  return list.slice().sort().reverse();
}

const list = [1, 4, 5, 2];
sortAndReverse(list);
console.log(list);

이 경우 sortAndReverse 메서드는 첫 번째 예제와 같이 결과 "[ 5, 4, 2, 1 ]"로 반환되지만 더 중요한 것은 최종 콘솔 로그가 "[ 1, 4, 5, 2 ]"를 반환한다는 것입니다. "목록"배열의 초기 값입니다.
이 경우 "슬라이스"메서드를 제거하려고 하면 TypeScript가 오류를 표시하는 방법을 볼 수 있으며('readonly number[]' 유형에는 '정렬' 속성이 존재하지 않음) 이상한 부작용을 방지하는 데 도움이 됩니다. .

오늘은 여기까지입니다!
안녕 얘들 아!