Typescript - 팁과 요령 - 읽기 전용 한정자

5388 단어 webdevtypescript
개체 속성에 값이 있을 것으로 기대했지만 그렇지 않은 경우는 몇 번입니까?

이러한 경우 안타깝게도 이 속성의 값을 누가 변경하는지 검색하는 데 많은 시간을 할애합니다.
오늘 저는 이 문제를 예방하고 시간을 절약하는 데 도움이 되는 특별한 수정자를 보여드리고자 합니다.
이 수정자는 readonly 입니다.
readonly 한정자는 다른 사람이 속성을 변경할 수 없도록 도와주므로 개체의 속성은 개체 초기화에서만 설정할 수 있습니다.
간단한 예

type Point = {
  x: number;
  y: number;
};
const point: Point = {
  x: 10,
  y: 10,
};
point.x = 20;
point.y = 20;

type ReadOnlyPoint = {
  readonly x: number;
  readonly y: number;
};
const readOnlyPoint: ReadOnlyPoint = {
  x: 10,
  y: 10,
};
readOnlyPoint.x = 20; // Cannot assign to 'x' because it is a read-only property
readOnlyPoint.y = 20; // Cannot assign to 'y' because it is a read-only property


이 예에서 첫 번째 경우 속성 'x' 및 'y'의 값을 변경할 수 있는 방법을 볼 수 있습니다. 반대로 두 번째 경우에는 속성이 읽기 전용으로 표시되기 때문에 속성을 변경할 수 없습니다.
보시다시피 읽기 전용 수정자는 속성 값의 변경을 방지하고 성가신 버그로부터 코드를 저장할 수 있습니다.
Typescript는 또한 유형을 전체 읽기 전용 유형으로 변환하는 특수 유형을 노출합니다. 이 유형을 ReadOnly라고 합니다.
따라서 이전 예제를 이런 식으로 검토할 수 있습니다.

type Point = {
  x: number;
  y: number;
};
const point: Point = {
  x: 10,
  y: 10,
};
point.x = 10;
const readOnlyPoint: ReadOnly<Point> = {
  x: 10,
  y: 10,
};
readOnlyPoint.x = 10; // Cannot assign to 'x' because it is a read-only property
readOnlyPoint.y = 20; // Cannot assign to 'y' because it is a read-only property


readonly 한정자에서 모든 것입니다!
안녕 얘들 아!

좋은 웹페이지 즐겨찾기