Typescript 시리즈 - 읽기 전용 유틸리티 유형

나는 더 나은 Typescript를 배우고 이해하기 위해 이 시리즈를 하고 있다고 말하면서 시작하고 싶습니다. 그러니 자유롭게 저를 수정하거나 저에게 연락하십시오.

읽기 전용 유틸리티 유형이란 무엇입니까?

Readonly<Type> 유형의 모든 속성이 읽기 전용으로 설정된 유형을 생성합니다. 즉, 생성된 유형의 속성을 재할당할 수 없습니다. Docs .

예를 들어 보겠습니다.

interface Person {
  name: string;
}

const person: Readonly<Person> = {
  name: "Joe",
  schedule: {
    starts: "08:00",
    ends: "16:00"
  }
};

person.name = "Tom"; 
// Cannot assign to 'title' because it is a read-only property.

보시다시피 name 속성은 재할당할 수 없습니다.

유틸리티 유형은 기본적으로 다음을 수행합니다.

interface Person {
  readonly name: string;
  readonly schedule: ...
}

명심해야 할 한 가지는 중첩 속성에 대한 읽기 전용을 추가하지 않는다는 것입니다. 예를 들어 시작 유형에도 읽기 전용을 추가하지 않습니다. 모든 중첩 속성에 추가 읽기 전용 한정자를 추가해야 합니다.

person.schedule.starts = "12:00"; // This is ok 

그러나 읽기 전용 유틸리티는 내부적으로 어떻게 작동합니까?

type MyReadonly<Type> = {
  readonly [Key in keyof Type] : Type[Key]
}

좋아, 나쁘지 않아, 분해하자.

먼저 모든 속성 유형에 readonly 키워드를 추가합니다.

그런 다음 [ Key in keyof Type] 키워드는 Key가 Type("name"| "schedule")에서 추출된 키 중 하나여야 함을 의미합니다.
Type[Key] 마지막으로 여기서는 단순히 속성 유형에 액세스합니다. 개체의 값에 액세스하는 방법과 동일하게 다음 예제를 살펴보겠습니다.

약간의 참고 사항:
읽기 전용 유틸리티 유형을 사용할 때는 주의를 기울여야 합니다. 얕은 객체 불변성에 완벽하지만 배열이나 중첩된 객체 속성을 불변으로 만들지는 않습니다.

고맙습니다!

당신은 여기에서 나를 찾을 수 있습니다