Is it possible to "retrieve" the TypeScript interface property type in any way?

Question

Is it possible to "retrieve" the TypeScript interface property type in any way?

Imagine a scenario where there is a typing file for library X that contains some interfaces.

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

When working with this library, it becomes necessary to pass around an object of exactly the same type as I2.y. One option is to create an identical interface in the source files:

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

let myVar: MyInterface;

However, this approach introduces the burden of keeping it in sync with the library's interface, leading to potential code duplication and maintenance overhead.

Is there a way to "extract" the type of this specific property from the interface? Perhaps something like let myVar: typeof I2.y (which currently results in a "Cannot find name I2" error).

Edit: After experimenting in TS Playground, it was discovered that the following code achieves the desired outcome:

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

However, this method requires declaring a redundant variable x. The goal is to find a solution without the need for this declaration.

typescript typing definitelytyped

Answer 1

Answer №1

Previously impossible, but now made achievable with the release of TypeScript version 2.1 on December 7th, 2016. This update brings in indexed access types, also known as lookup types.

The new syntax resembles element access but is used for defining types. For example:

interface I1 {
    x: any;
}

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

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

With this, myVar takes on the type of I2.y.

Experiment with it on the TypeScript Playground.

Answer 2

Previously impossible, but now made achievable with the release of TypeScript version 2.1 on December 7th, 2016. This update brings in indexed access types, also known as lookup types.

The new syntax resembles element access but is used for defining types. For example:

interface I1 {
    x: any;
}

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

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

With this, myVar takes on the type of I2.y.

Experiment with it on the TypeScript Playground.

Answer 3

Answer №2

Further elaborating on the approved response, you also have the option to specify the type using the keyword type and utilize it in various contexts.

// An example of a lesser-known library
interface A {
  prop: {
    name: string;
    age: number;
  }
}

// Defining your custom type
type A_Prop = A['prop']

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

Answer 4

Further elaborating on the approved response, you also have the option to specify the type using the keyword type and utilize it in various contexts.

// An example of a lesser-known library
interface A {
  prop: {
    name: string;
    age: number;
  }
}

// Defining your custom type
type A_Prop = A['prop']

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

Answer 5

Answer №3

Here is a demonstration of how to extract a literal type from a union object type:

type Settings = {
    option: "theme",
    value: string,
} | {
    option: "language",
    value: string,
}

export type SettingOption = Settings["option"];
// "theme"|"language"

Answer 6

Here is a demonstration of how to extract a literal type from a union object type:

type Settings = {
    option: "theme",
    value: string,
} | {
    option: "language",
    value: string,
}

export type SettingOption = Settings["option"];
// "theme"|"language"

Answer 7

Answer №4

keyof Colors will provide a collection of keys such as

"white" | "black"

. Once these keys are used in the Colors interface, the resulting type will consist of all the corresponding values, "#fff" | #000.

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

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

Answer 8

keyof Colors will provide a collection of keys such as

"white" | "black"

. Once these keys are used in the Colors interface, the resulting type will consist of all the corresponding values, "#fff" | #000.

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

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

Answer 9

Answer №5

function createObject() {
  return {title: "example", number: 7}
}
type Result1 = ReturnType<typeof createObject> // {title: string, number: number}
type Result2 = ReturnType<typeof createObject>['title'] // string
type Result3 = Result1['number'] // number

Answer 10

function createObject() {
  return {title: "example", number: 7}
}
type Result1 = ReturnType<typeof createObject> // {title: string, number: number}
type Result2 = ReturnType<typeof createObject>['title'] // string
type Result3 = Result1['number'] // number

Answer 11

Answer №6

An interface serves as the blueprint for an object. In this case, y represents a property of your I2 object with a specific type, in this instance "anonymous".

To define y using another interface, you can create a separate interface called ytype and then use it as the type for y like so:

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

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

You have the option to store your interfaces in a file and utilize extraction to allow them to be imported into other files within your projects.

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



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

To import them, you can do the following:

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

Answer 12

An interface serves as the blueprint for an object. In this case, y represents a property of your I2 object with a specific type, in this instance "anonymous".

To define y using another interface, you can create a separate interface called ytype and then use it as the type for y like so:

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

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

You have the option to store your interfaces in a file and utilize extraction to allow them to be imported into other files within your projects.

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



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

To import them, you can do the following:

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

Is it possible to "retrieve" the TypeScript interface property type in any way?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Defining generic types for subclasses inheriting from an abstract class containing type variables in TypeScript

What is the best way to swap out the if else statement with a Ternary operator within a JavaScript function?

Troubles with Declaration Merging in Angular 2 Implementation

Challenge with Google Maps Data Layer

The function passed as a prop is unrecognized

Guide on enabling a new property within an Interface containing a nested array

The properties required for type 'never[]' are not present

Obtain the object literal string with additional decorative strings surrounding it

The Java value is not returned by the Observable<boolean> stream

How can I leverage the data fetched from API in Angular 13?

Steps for preloading a user prior to the page loading

Transferring information between components without relying on @Input and @Output properties

An issue has occurred with attempting to access the 'phone' property of a null value. This error is at the root of the problem and needs to

I keep encountering errors with TypeGuard

Discover the process of retrieving all workday dates using Angular

The data type 'StaticImageData' cannot be converted to type 'string'

Create an instance of a TypeScript class within an Angular HTML template

Changing byte array to image in Angular 6

The error states that the type '() => string | JSX.Element' cannot be assigned to the type 'FC<{}>'

Implementing conditional where clauses in Firestore queries with dynamic parameters