[ TypeScript ] type-challenges - 00007-easy-readonly

00007-easy-readonly

[ 문제 설명 ]
Implement the built-in `Readonly<T>` generic without using it.

Constructs a type with all properties of T set to readonly,
meaning the properties of the constructed type cannot be reassigned.

[ 문제 ]

type MyReadonly<T> = any​

[ 예시 ]

interface Todo {
  title: string
  description: string
}

const todo: MyReadonly<Todo> = {
  title: "Hey",
  description: "foobar"
}

todo.title = "Hello" // Error: cannot reassign a readonly property
todo.description = "barFoo" // Error: cannot reassign a readonly property​

이번 문제는 유틸리티 타입인 Readonly를 직접 구현해 보는 문제입니다.
이전 글에서 제네릭에 대해 설명을 안 한 것 같아서 제네릭이 무엇인지,
그리고 Readonly가 무엇인지에 대해 알아보아요 !

---

제네릭이란 ?

함수 또는 클래스를 정의할 때 다양한 타입을 사용할 수 있도록 파라미터처럼 타입을 받아올 수 있도록 하는 것입니다.
식별자를 사용해서 아직 정해지지 않은 타입을 표시해 주면 되는데, 일반적으로 T, U, V, ...와 같은 식별자를 사용해요 !

제네릭을 사용할 때의 장점을 알려드릴게요 😊

 

1. 재사용성이 높다.
  하나의 함수 또는 클래스를 타입 상관없이 사용할 수 있기 때문에 재사용성이 높아요 !

2. 오류를 쉽게 찾아낼 수 있다.
  처음 제네릭에 대해 알았을 때, any를 쓰면 되는 게 아닐까 생각했었어요.
  하지만, any는 아예 타입 체크를 하지 않아서 타입스크립트의 장점을 없애버립니다.
  타입스크립트에서 any를 지양하는 이유죠 ..!

  반면, 제네릭은 어떠한 타입이 들어와도 상관없지만
  함수 또는 클래스를 사용하기 위해 타입을 지정하면
  해당 타입을 체크해 주기 때문에 타입스크립트의 장점을 살릴 수 있어요 !

 

Readonly란 ?

유틸리티 타입 Readonly를 알아보기 전에, readonly 먼저 설명해드리겠습니다.

readonly는 '읽기 전용'이라는 의미를 지녔고, 타입스크립트에서도 같은 의미를 지니고 있어요.
값을 변경할 수 없고, 참조만 할 수 있다는 의미입니다.
단, 속성에만 사용할 수 있습니다 !

interface ISubject {
  readonly korean: number;
  readonly english: number;
  readonly math: number;
}

const readScore = (subject: ISubject) => {
  console.log("국어:", subject.korean);
  console.log("영어:", subject.english);
  console.log("수학:", subject.math);
};

readScore({ korean: 80, english: 80, math: 100 });
// 국어: 80
// 영어: 80
// 수학: 100

이런식으로 사용 가능해요 ~!

 

그런데 만약 이미 정의해놓은 타입을 가져와서 readonly로 사용하고 싶을 땐 어떻게 해야할까요 ??
이때 유틸리티 타입 ReadOnly를 사용하면 됩니다 !

let korean: number;
let english: number;
let math: number;

interface IScore {
  korean: number;
  english: number;
  math: number;
}

const setScore = (score: IScore) => {
  korean = score.korean;
  english = score.english;
  math = score.math;
}

이렇게 사용하고 있던 IScore를 readonly로 설정해 readScore란 함수를 새로 만들어볼게요 

const readScore = (score: Readonly<IScore>) => {
  console.log("국어:", score.korean);
  console.log("영어:", score.english);
  console.log("수학:", score.math);
};

readScore({ korean: 80, english: 80, math: 100 });

약간 완벽한 예시는 아니지만,,, 이런식으로 사용할 수 있다를 보여드리고 싶었습니다..🥲

---

[ 정답 ]

type MyReadonly<T> = {
  readonly [key in keyof T]: T[key]
}​

 

출처

https://velog.io/@sseung95/TS-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%A0%9C%EB%84%A4%EB%A6%ADGeneric

[TS] 타입스크립트 제네릭(Generic)

https://lakelouise.tistory.com/188

[TypeScript] 타입스크립트 제네릭(Generic), Factory Pattern with Generics