typescript로 객체 속성 문자열 경로 생성기 만들기

와우, 그것은 큰 명사 클러스터였습니다. 어쨌든 그것은 무엇입니까?

이제 일부 라이브러리/프레임워크를 사용하면 때때로 일부 개체의 속성에 대한 경로를 나타내는 문자열을 생성해야 할 수 있습니다. .

다음과 같은 몇 가지 엄청난 상수를 만들 수 있습니다.

const nestedAddressField = 'user.contacts.address';

또는 템플릿 문자열과 열거형을 사용할 수도 있지만 더 좋은 방법이 있습니다.

Typescript 4는 놀라운 기능을 제공합니다: Template Literal Types
. 이것이 해결책입니다.

이제 이 놀라운 기능을 사용하여 무한 재귀가 포함된 유형을 생성하고 도우미 함수를 생성하여 객체가 가질 수 있는 모든 가능한 속성 경로를 생성할 수 있습니다.

이것 좀 봐. 먼저 기본적으로 개체에서 가능한 모든 문자열 경로의 집합이 되는 유형을 만들어 보겠습니다.

// For convenience
type Primitive = string | number | bigint | boolean | undefined | symbol;

// To infinity and beyond >:D
export type PropertyStringPath<T, Prefix=''> = {
    [K in keyof T]: T[K] extends Primitive | Array<any> 
    ? `${string & Prefix}${ string & K }` 
    : `${string & Prefix}${ string & K }` | PropertyStringPath <T[K], `${ string & Prefix }${ string & K }.`> ;
}[keyof T];

기본적으로 객체의 속성을 반복하고 주어진 접두사가 있는 문자열로 각 필드를 반환합니다. 처음에 접두사는 아무것도 아닌 빈 문자열입니다. 프리미티브 또는 배열을 만나면 접두사가 있는 문자열을 반환하고 객체를 만나면 재귀적으로 호출하지만 접두사에 점을 추가합니다. 쉬워요.

이제 남은 일은 힌트를 제공하는 도우미 함수를 생성할 수 있는 간단한 팩터리를 만드는 것입니다.

export function propertyStringPathFactory<T, R=string>(): (path: PropertyStringPath<T>) => R {
    return (path: PropertyStringPath<T>) => (path as unknown as R);
}

이제 끈이 달린 달걀 껍질 위를 걷는 대신 실수로부터 우리를 보호하는 도우미 기능을 사용할 수 있습니다.

재미있게 보내세요 ^_^

아, 그리고 이 유틸리티에는 npm package이 있습니다 💪