TypeScript 인터페이스 속성의 유형을 "추출"하는 방법이 있습니까?


124

일부 인터페이스를 포함하는 라이브러리 X에 대한 입력 파일이 있다고 가정 해 보겠습니다.

interface I1 {
    x: any;
}

interface I2 {
    y: {
        a: I1,
        b: I1,
        c: I1
    }
    z: any
}

이 라이브러리로 작업하려면 .NET Framework와 정확히 동일한 유형의 객체를 전달해야합니다 I2.y. 물론 소스 파일에 동일한 인터페이스를 만들 수 있습니다.

interface MyInterface {
    a: I1,
    b: I1,
    c: I1
}

let myVar: MyInterface;

하지만 라이브러리에있는 파일로 최신 상태로 유지해야하는 부담이 있습니다. 게다가 매우 커져서 많은 코드 중복이 발생할 수 있습니다.

따라서 인터페이스의 특정 속성 유형을 "추출"할 수있는 방법이 있습니까? let myVar: typeof I2.y(작동하지 않고 "이름 I2를 찾을 수 없음"오류가 발생 함) 유사 항목 입니다. 미리 감사드립니다.


편집 : TS 운동장에서 조금 플레이 한 후 다음 코드가 내가 원하는 것을 정확히 달성한다는 것을 알았습니다.

declare var x: I2;
let y: typeof x.y;

그러나 중복 변수 x를 선언해야합니다. 나는 그 선언없이 이것을 달성하는 방법을 찾고 있습니다.


1
작동하지 않는 -어떻게 나타 납니까? 표시되는 실제 오류 메시지는 무엇입니까?
— Bartek Banachewicz

@BartekBanachewicz 업데이트
— 쿠바 Jagoda

답변:


251

이전에는 불가능했지만 다행히 현재는 TypeScript 버전 2.1 이후 입니다. 2016 년 12 월 7 일에 릴리스되었으며 조회 유형 이라고도하는 인덱싱 된 액세스 유형을 도입 합니다 .

구문은 요소 액세스와 똑같이 보이지만 유형 대신 작성됩니다. 따라서 귀하의 경우 :

interface I1 {
    x: any;
}

interface I2 {
    y: {
        a: I1,
        b: I1,
        c: I1
    }
    z: any
}

let myVar: I2['y'];  // indexed access type

이제 myVar유형이 I2.y.

TypeScript Playground 에서 확인하십시오 .


1
'y'가 배열 인 경우 요소의 유형을 추출하는 방법이 있습니까? 예 : I2 {y : {..} []}
— John B

1
@JohnB 예, 배열 인덱스는 객체 속성과 같기 때문에 정확히 동일한 방식으로 수행 할 수 있습니다. 여기에서 확인하세요 : typescriptlang.org/play/…
— Kuba Jagoda

3
@JohnB 예, 동일한 방식으로 액세스 할 수 있습니다. I2['y'][0]참조 : typescriptlang.org/play/...
— 마이클 Miszczyszyn

2
이건 정말 멋진 기능입니다
— Geradlus_RU

1
I2유형으로를 사용하여 정의 된 객체의 키를 반복한다고 가정 해 보겠습니다 . 루핑 할 때 특정 키의 유형을 동적으로 어떻게 얻습니까? 이; let z: typeof x[a];, a문자열로 특정 키는 작동하지 않습니다. a값을 참조하고 유형을 참조해야 한다는 것을 알려줍니다 . 어떻게하면 되나요? 어떤 식 으로든 가능합니까? 고마워!
— 에밀 발저

-2

인터페이스는 객체의 정의와 같습니다. 그런 다음 y는 I2 개체의 속성이며, 특정 유형의 경우 "익명"입니다.

다른 인터페이스를 사용하여 y를 정의한 다음 다음과 같이 y 유형으로 사용할 수 있습니다.

interface ytype {
   a: I1;
   b: I1;
   c: I1;
}

interface I2 {
    y: ytype;
    z: any;
}

인터페이스를 파일에 넣고 추출을 사용하여 프로젝트의 다른 파일로 가져올 수 있습니다.

export interface ytype {
   a: I1;
   b: I1;
   c: I1;
}



 export interface I2 {
        y: ytype;
        z: any;
    }

다음과 같이 가져올 수 있습니다.

   import {I1, I2, ytype} from 'your_file'

모든 것이 괜찮지 만 앞서 언급했듯이 인터페이스 I1 및 I2는 외부 라이브러리에서 가져오고 해당 라이브러리의 d.ts 파일에 정의되어 있습니다. 따라서이 ytype 인터페이스를 사용하는 것은 코드 중복이며 지속적으로 업데이트해야합니다.
— Kuba Jagoda
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.