programing

TypeScript 인터페이스 속성 유형을 "해동"할 수 있는 방법이 있습니까?

showcode 2023. 3. 31. 23:01
반응형

TypeScript 인터페이스 속성 유형을 "해동"할 수 있는 방법이 있습니까?

일부 인터페이스를 포함하는 라이브러리 X의 타이핑 파일이 있다고 가정해 보겠습니다.

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

이 라이브러리로 작업하려면 다음과 같은 유형의 개체를 전달해야 합니다.I2.y물론 소스 파일에 동일한 인터페이스를 만들 수 있습니다.

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

let myVar: MyInterface;

하지만 도서관에 있는 것을 최신 상태로 유지해야 하는 부담이 있습니다.게다가 매우 크고 많은 코드가 중복될 수 있습니다.

따라서 인터페이스의 이 특정 속성 유형을 추출할 수 있는 방법이 있습니까?비슷한 것let myVar: typeof I2.y(동작하지 않고, 「이름 I2 를 찾을 수 없습니다」에러가 발생합니다).


편집: TS Playground에서 잠시 플레이한 후 다음 코드가 원하는 것을 정확히 달성한다는 것을 알게 되었습니다.

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

단, 다중 변수가 필요합니다.x선언할 것입니다.나는 그 선언 없이 이것을 달성할 방법을 찾고 있다.

이전에는 불가능했지만 다행히 지금은 가능합니다. 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에서 확인하세요.

승인된 답변을 확장하려면 다음 명령을 사용하여 유형을 할당할 수도 있습니다.type키워드를 지정하여 다른 장소에서 사용합니다.

// Some obscure library
interface A {
  prop: {
    name: string;
    age: number;
  }
}

// Your helper type
type A_Prop = A['prop']

// Usage
const myThing: A_prop = { name: 'June', age: 29 };

유니언 오브젝트유형에서 리터럴유형을 추출하는 예를 나타냅니다.

type Config = {
    key: "start_time",
    value: number,
} | {
    key: "currency",
    value: string,
}

export type ConfigKey = Config["key"];
// "start_time"|"currency"

keyof Colors모든 키의 목록을 반환합니다."white" | "black"이 키 목록이 [Colors]인터페이스에 전달되면, 타입은 지정된 키의 모든 값이 됩니다."#fff" | #000.

interface Colors {
  white: "#fff"
  black: "#000"
}

type ColorValues = Colors[keyof Colors]
// ColorValues = "#fff" | "#000"

인터페이스는 객체의 정의와 같습니다.그러면 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 할 수 있습니다.

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

언급URL : https://stackoverflow.com/questions/36311284/is-there-a-way-to-extract-the-type-of-typescript-interface-property

반응형