반응형
유형 스크립트에서 중첩된 선택 <> 유형을 수행할 방법이 있습니까?
그래서 저는 제 클라이언트 측의 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
반응형
'IT' 카테고리의 다른 글
C: strtok_r의 올바른 사용법 (0) | 2023.06.17 |
---|---|
MSAL(Microsoft Authentication Library for js)을 텍스트 대응 단일 페이지 응용 프로그램으로 올바르게 가져오고 사용하는 방법은 무엇입니까? (0) | 2023.06.17 |
엔티티 디렉토리가 구성 파일에 설정되지 않은 경우 ORM 유형이 엔티티를 찾을 수 없음 (0) | 2023.06.12 |
숨겨진 입력이 true/false가 아닌 value="value"인 이유는 무엇입니까? (0) | 2023.06.12 |
두 단어 문자열에서 두 단어의 첫 번째 문자 대문자화 (0) | 2023.06.12 |