[TypeScript] Utility types - Readonly, ReturnType

 

◽ Readonly

- Readonly는 속성을 읽기만 가능하도록 설정하여 매개변수가 변경되는 것을 방지한다.

- 변경이 발생하는 코드를 쉽게 찾을 수 있으며, 변경하면서 발생하는 오류를 방지할 수 있다.

- 단, Readonly는 얕게 동작하므로 깊은(deep) readonly 타입이 필요하다면 ts-essentials에 DeepReadonly 제네릭을 사용하면 된다.

 

interface Outer {
	inner: {
    	x: number;
    }
}

// 이렇게도 적을 수 있다.
// const o: { readonly Outer }
const o: Readonly<Outer> = { inner: { x: 0 } };

// 할당할 수 없다.
o.inner = { x: 1 };

// 하지만 이건 가능한데, readonly가 'inner'에 적용됐기 때문이다.
// x는 readonly가 적용되지 않는다.
o.inner.x = 1;

 

 

---

 

 

◽ ReturnType

함수의 리턴문을 type으로 생성한다.

 

📄 예제

const getUserInfo = (userId: string) => {
  const userName = 'vinch'
  const age = 10000
  const height = 250
  const weight = 15000

  return {
    userId,
    userName,
    age,
    height,
    weight,
  }
}

type userInfo = ReturnType<typeof getUserInfo>

// 이렇게 사용할 수 있다!
const user: userInfo = {
    userId: '123',
    userName: 'vin',
    age: 5000,
    height: 300,
    weight: 9999,
}

 

 

---

 

 

출처

댄 밴터캄, 이펙티브 타입스크립트 (프로그래밍 인사이트, 2021)

 

 

 

---

개인적으로 공부한 내용을 정리하는 블로그로
잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.