React와 Typescript를 함께 사용하기 : 유용한 유틸리티 타입

원문 보기

Typescript: Five most useful utility types for React

이 포스트에서는 React 애플리케이션에서 실용적인 5가지 TypeScript 유틸리티 타입을 다룰 것입니다.

keyof

엄밀히 말하면 keyof는 유틸리티 타입이 아닌 연산자이지만 비슷한 방식으로 사용됩니다.

keyof는 전달한 타입의 속성 이름으로 구성된 유니온 타입을 만듭니다.

keyof는 객체의 기존 키를 사용하여 적용하는 데 적합합니다.

PostKeysType을 변수에 할당하면 해당 변수는 author ,  title , content 값만 가질 수 있습니다.

 

Partial

Partial은 모든 props가 optional로 설정된 새 타입을 반환합니다.

받을 수 있는 모든 props를 미리 알지 못하는 동적 props 집합을 전달하는 데 좋습니다.

fieldsToUpdate 타입을 Partial<Post>로 설정하고 있습니다. Post 타입에 속하는 필드가 있거나 없는 객체를 전달할 수 있습니다.

Pick

복사할 속성을 지정한 뒤 Pick을 사용하여 새 타입을 만들 수 있습니다.

선택 대상 속성을 유니언 타입으로 전달합니다.

이 방법으로 타입을 만들 때의 이점은 타입을 원본과 동기화 상태로 유지할 수 있다는 것입니다.

상위 타입의 속성에 대한 변경 사항은 파생 타입에 자동으로 적용됩니다.

 

Omit

Omit을 Pick의 반대라고 생각하십시오.

복사하려는 Props 세트를 선택하는 대신 타입에서 생략하려는 Prop을 제공합니다.

생략할 속성은 유니언 타입으로 전달합니다.

Exclude

Exclude는 Omit과 유사하게 작동하지만 하나의 큰 차이점이 있습니다.

이는 Union 타입과 함께 작동합니다.

즉, 유니언 타입에서 유니언 타입을 제거합니다.