TypeScript의 조건부 유형에서 인터페이스 또는 유형 별칭 속성 값 유형을 동적으로 가져오는 방법은 무엇입니까?

Originally posted here!

인터페이스 또는 유형 별칭 속성 값 유형을 동적으로 가져오려면 conditional types , infer를 사용할 수 있습니다. 키워드 다음에 generic type name 값을 가져와야 하는 모든 곳에서 해당 값을 TypeScript의 조건부 유형 검사에서 진실 값으로 사용합니다.

TL;DR

// a generic conditional type
type GetSalaryType<T> = T extends { salary: infer value } ? value : never;

// an interface where the salary
// property is `string` type
interface Person {
  name: string;
  salary: string;
}

// an interface where the salary
// property is `number` type
interface Person2 {
  name: string;
  salary: number;
}

// an interface where the salary
// property is an `array of string` type
interface Person3 {
  name: string;
  salary: string[];
}

// get the type of the `salary` property
// from the all the above interfaces
type SalaryType = GetSalaryType<Person>; // string
type SalaryType2 = GetSalaryType<Person2>; // number
type SalaryType3 = GetSalaryType<Person3>; // string[]

예를 들어, 먼저 string 유형 중에서 선택해야 하는 작은 시나리오를 고려해 보겠습니다. 그리고 number interface 또는 type alias salary라는 속성이 포함되어 있습니다. .

따라서 이 경우 더 나은 방법은 conditional type 전체 유형을 generic type alias로 만듭니다. .

이런식으로 할 수 있는데,

// a generic conditional type
type GetSalaryType<T> = T extends { salary: string } ? string : never;

이제 Person라는 인터페이스를 만들어 보겠습니다. 속성이 name 및 salary 유형이 string .

이런식으로 할 수 있는데,

// a generic conditional type
type GetSalaryType<T> = T extends { salary: string } ? string : never;

// a simple interface called Person
interface Person {
  name: string;
  salary: string;
}

이제 Person 인터페이스 GetSalaryType 이와 같은 일반 조건부 유형,

// a generic conditional type
type GetSalaryType<T> = T extends { salary: string } ? string : never;

// a simple interface called Person
interface Person {
  name: string;
  salary: string;
}

// get the type of the `salary` property
// from the `Person` interface
type SalaryType = GetSalaryType<Person>; // string

이제 SalaryType 유형이 string임을 알 수 있습니다. 그것은 정확하고 이 경우 우리의 요구를 충족시킵니다.

하지만 우리는 알고 있습니다 salary string와 같은 다양한 형태를 가질 수 있습니다. , number 또는 array 급여의. salary 유형은 number입니다. GetSalaryType 그러면 string 유형도 얻을 수 있습니다. SalaryType 우리의 필요에 맞지 않을 수 있는 유형 별칭.

그래서 GetSalaryType 조건부 제네릭 유형을 보다 유연한 유형으로 infer salary 뒤에 키워드 속성 뒤에 제네릭 유형 이름이 옵니다. 제네릭 유형 이름을 value로 지정합시다. 그런 다음 이를 조건의 참 값으로 사용합니다.

이런식으로 할 수 있는데,

// a generic conditional type
type GetSalaryType<T> = T extends { salary: infer value } ? value : never;

// a simple interface called Person
interface Person {
  name: string;
  salary: string;
}

// get the type of the `salary` property
// from the `Person` interface
type SalaryType = GetSalaryType<Person>; // string

이제 Person2라는 인터페이스를 2개 더 만들어 보겠습니다. 및 Person3 어디 salary 속성은 number 유형 및 array of strings 각각 입력한 다음 GetSalaryType 조건부 제네릭 유형.

이런식으로 할 수 있는데,

// a generic conditional type
type GetSalaryType<T> = T extends { salary: infer value } ? value : never;

// an interface where the salary
// property is `string` type
interface Person {
  name: string;
  salary: string;
}

// an interface where the salary
// property is `number` type
interface Person2 {
  name: string;
  salary: number;
}

// an interface where the salary
// property is an `array of string` type
interface Person3 {
  name: string;
  salary: string[];
}

// get the type of the `salary` property
// from the all the above interfaces
type SalaryType = GetSalaryType<Person>; // string
type SalaryType2 = GetSalaryType<Person2>; // number
type SalaryType3 = GetSalaryType<Person3>; // string[]

보시다시피 SalaryType , SalaryType2 및 SalaryType3 GetSalaryType에 전달된 인터페이스에 따라 다른 유형이 있습니다. 조건부 제네릭 유형.

우리는 동적으로 interface TypeScript에서 성공적으로 조건부 유형의 속성 값 유형. 야 🥳!

codesandbox에 있는 위의 코드를 참조하세요. .

그게 다야 😃!

😃 유용하셨다면 공유해 주세요.