빠른 팁 1 - 유형에서 색인 서명을 제거하는 방법은 무엇입니까?

선사시대

React 개발자로 일하는 동안 유형에서 색인 서명을 제거해야 하는 상황을 발견했습니다.
간단한 예로, 유형에 색인 서명이 있는 경우 유형 유틸리티Omit가 제대로 작동하지 않습니다. 나는 react-select js 라이브러리로 작업했고 SelectProps 를 사용하여 Omit<SelectProps> 의 모든 기본 속성을 얻고 싶었지만 any 유형을 받았습니다. 문제를 해결하기 위해 SelectProps 내부에 문제를 찾았습니다. 매핑된 유형인 SelectComponentsProps에서 확장됩니다.

해결책

해결책은 색인 서명을 제거하는 것입니다. 그것을하는 방법? TypeScript 4.1 이상에서는 as 절을 사용하여 매핑된 유형의 키를 다시 매핑할 수 있습니다. 제네릭으로 유틸리티 유형을 생성할 수 있으며 지정된 유형의 모든 색인 서명을 제거합니다.

type RemoveIndexSignature<T> = {
  [K in keyof T as string extends K ? never : number extends K ? never : symbol extends K ? never : K]: T[K]
}

무엇을합니까?

유형의 키를 반복하고 키 유형이 string , number 또는 symbol 인지 확인한 다음 제거하거나 유형에 유지합니다. 결국 인덱스 서명이 없는 깨끗한 유형을 얻게 됩니다.

예시

type Base = { [key: string]: boolean }

type User = Base & {
  email: string
  name?: string
}

type Cleaned = RemoveIndexSignature<User>

type Cleaned = {
  email: string
  name?: string
}

사진 제공: Alex Kotliarskyi on Unsplash