377

Let's suppose there's a typing file for library X which includes some interfaces.

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

In order to work with this library I need pass around an object that is of exactly the same type as I2.y. I can of course create identical interface in my source files:

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

let myVar: MyInterface;

but then I get the burden of keeping it up to date with the one from library, moreover it can be very large and result in lot of code duplication.

Therefore, is there any way to "extract" the type of this specific property of the interface? Something similar to let myVar: typeof I2.y (which doesn't work and results in "Cannot find name I2" error).

Edit: after playing a bit in TS Playground I noticed that following code achieves exactly what I want to:

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

However it requires a redundant variable x to be declared. I am looking for a way to achieve this without that declaration.

Improve this question
2
  • 1
    which doesn't work - how does that manifest? What's the actual error message that you see? Commented Mar 31, 2016 at 8:56
  • @BartekBanachewicz updated Commented Mar 31, 2016 at 8:58

7 Answers 7

Reset to default
669

It wasn't possible before but luckily it is now, since TypeScript version 2.1. It was released on the 7th of December 2016 and introduces indexed access types, also called lookup types.

The syntax looks like element access but is written in place of types. So in your case:

interface I1 {
    x: any;
}

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

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

Now myVar has the type of I2.y.

Check it out in TypeScript Playground.

Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

In the case when 'y' is an array, is there any way to extract the type of the elements? e.g. I2{ y: {..}[]}
@JohnB yes, you can do it in exactly same way, because array indices are just like object properties. Check it out here: typescriptlang.org/play/…
@JohnB yes, you can access it the same way ie. I2['y'][0] See: typescriptlang.org/play/…
Let's assume we're looping over keys of an object defined using I2 as the type. How would I get the type of a specific key dynamically when looping. This; let z: typeof x[a];, where a is a certain key as a string, does not work. It tells me that a refers to a value and has to refer to a type. How would I go about doing this? Is it even possible in any way? Thx!
Fixed @TorbenKochPløen. The syntax didn't change, it's just that my example was in fact using the myVar without assigning anything to it.
|
38

To expand on the accepted answer, you can also assign the type using the type keyword and use it in other places.

// 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 };
Improve this answer

Comments

25

Just an example of extracting a literal type from the union object type:

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

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

1 Comment

This is the answer I was looking for. I wounder why it's not upvoted. Anyway, thank you!
24

keyof Colors will return a list of all keys "white" | "black". When this list of keys gets passed to the Colors interface, the type will be all the values of the given keys, "#fff" | #000.

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

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

Comments

0

Also a more general approach if you have dynamic keys

interface CustomInterface {
  [key: string]: {
    name: string;
    a: string;
    b: string;
  };
}


type IndexedType = CustomInterface[string]

/**
 * IndexedType will be of type:
 type IndexedType = {
    name: string;
    a: string;
    b: string;
  }
 */

Typescript playground

Improve this answer

1 Comment

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.
-1 
const foo = ()=>{
   return {name: "test", age: 5}
}
type T1 = ReturnType<typeof foo> // {name: string, age: number}
type T2 = ReturnType<typeof foo>['name'] // string
type T3 = T1['age'] // number
Improve this answer

1 Comment

I think you are being downvoted because ReturnType might not be obvious it is part of typescript itself. ref: typescriptlang.org/docs/handbook/….
-5

An interface is like the definition of an object. Then y is a property of your I2 object, that is of a certain type, in that case "anonymous".

You could use another interface to define y and then use it as your y type like this 

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

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

You can put your interface in a file and use extract so you can import it in other files of your projects

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



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

You can import it that way :

   import {I1, I2, ytype} from 'your_file'
Improve this answer

1 Comment

Everything's fine, but as I mentioned - the interfaces I1 and I2 come from an external library and are defined in d.ts file for that library. Therefore having this ytype interface would be a code duplication and would need to be constantly updated.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.