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.