IT

유형 스크립트에서 중첩된 선택 <> 유형을 수행할 방법이 있습니까?

itgroup 2023. 6. 17. 09:00
반응형

유형 스크립트에서 중첩된 선택 <> 유형을 수행할 방법이 있습니까?

그래서 저는 제 클라이언트 측의 GraphQL 쿼리에 대한 안전성을 확보하려고 노력하고 있습니다(이에 대한 더 나은 접근 방식이 있다면 알려주십시오).

하지만 제가 해온 일은 제 질문을 이렇게 정의하는 것이었습니다.

export const tenantManagePageQuery = async (tenantId: string) =>
    graphQLClient.request<{
        tenants: TenantManagePageQueryTenant[];
    }>(
        /* GraphQL */ `
            query tenants($tenantId: String!) {
                tenants(tenantIds: [$tenantId]) {
                    id
                    description
                    name
                    approvedUsers {
                        id
                        alias
                    }
                    pendingUsers {
                        id
                        alias
                    }
                }
            }
        `,
        { tenantId },
    );

정의하기 위해TenantManagePageQueryTenant유형 나는 이런 것을 합니다.

interface TenantManagePageQueryTenant
    extends Pick<Tenant, 'id' | 'description' | 'name'> {}

기본 테넌트 모델은 내 GQL 모델 유형입니다.

이러한 종류의 선택 문을 수행하는 것 외에 중첩된 속성도 선택할 수 있는 방법이 있습니까?

비슷한 것

interface TenantManagePageQueryTenant
    extends Pick<Tenant, 'id' | 'description' | 'name' | Pick<approvedUser| 'id' | 'alias'> {}

콜린스가 대답하는 것과 비슷하지만, 반대 방향에서 다가옵니다.기존 인터페이스/유형을 선택해야 하는 경우 인덱스를 사용할 수 있습니다.


// Existing type
type Tenant = {
    id:string;
    description:string;
    name:string;
    approvedUsers: Array<{
      id:string;
      alias:string;
    }>
}

// Pick it apart
type TenantManagePageQueryTenant = 
  Pick<Tenant, 'id' | 'description' | 'name'> & {
    approvedUsers: Array<Pick<Tenant['approvedUsers'][0], 'id' | 'alias'>>
  }

놀이터.

@Avius가 게시한 코드는 올바른 트랙에 있지만 교차로 유형을 확장하는 인터페이스에서 오류가 발생합니다.유형을 사용해야 할 것 같습니다.

type TenantManagePageQueryTenant = Pick<Tenant, 'id' | 'description' | 'name'>
    & { approvedUsers: Pick<ApprovedUser, 'id' | 'alias'>[] }
{ }

interface Tenant {
    id:string;
    description:string;
    name:string;
}

interface ApprovedUser {
    id:string;
    alias:string;
}

let tenant:TenantManagePageQueryTenant = {
  id: "123",
  description: "456",
  name: "789",
  approvedUsers: [{
    id: "aaa",
    alias: "bbb" // To see the desired type warning, try removing 'alias' 
  }]
}

놀이터 링크

내가 질문을 올바르게 이해했는지 완전히 확신할 수는 없지만 교차로 유형이 도움이 될까요?

라고 가정하면approvedUsers실제로는 배열입니다. 유형은 다음과 같이 보일 수 있습니다.

interface TenantManagePageQueryTenant extends
    Pick<Tenant, 'id' | 'description' | 'name'>
    & { approvedUsers: Pick<ApprovedUser | 'id' | 'alias'>[] }
{}

따라서 이 개체는 유효한 유형입니다.TenantManagePageQueryTenant:

{
  id: "123",
  description: "456",
  name: "789",
  approvedUsers: [{
    id: "aaa",
    alias: "bbb"
  }]
}

반면에 이것들은 그렇지 않을 것입니다.

// missing alias in approvedUsers[0]

{
  id: "123",
  description: "456",
  name: "789",
  approvedUsers: [{
    id: "aaa"
  }]
}
// unknown field extra in approvedUsers[0]
{
  id: "123",
  description: "456",
  name: "789",
  approvedUsers: [{
    id: "aaa",
    alias: "bbb",
    extra: 345678
  }]
}

언급URL : https://stackoverflow.com/questions/58002078/is-there-anyway-to-do-nested-pick-types-in-typescript

반응형