Get Typescript interface property type, given property name only

Question

I have a Typescript interface with many properties. Without any instance of this interface, I need to determine the type of a given property.

export interface Data {
  foo: string;
  bar: number;
  .
  .
  .
}

This is possible using index signature on Data with a non-variable string.

type propType = Data['foo']; // propType = 'string'

However, it does not work using a variable.

const propName = 'foo';
type propType = Data[propName]; // Errors

Errors:

Type 'any' cannot be used as an index type.ts(2538)
'propName' refers to a value, but is being used as a type here.ts(2749)

Neither of these errors make sense, because propName is definitely a string not any, and it is not "being used as a type here."

Update

As it might be obvious, I was trying to do something impossible. After much fighting, I've finally accepted that uninstantiated interfaces do not and will not ever have property or property-type information at run-time.

This method using type will work, but only at compile-time. I approved the answer with the correct syntax.

(Still think the error messages in my question are weird though.)

I think keyof Data as the type of propName may help - will check it out in a few... Edit: eh, no joy with that... — MrRobboto
– MrRobboto, Commented Nov 1, 2019 at 21:41
@Katie if you could elaborate on what you're trying to do more in a real-world scenario that may help - digging into this, I don't totally understand what you're trying to do. I'm assuming your variable propName will be populated at run time, not hardcoded like in your example. That is part of your problem here, the TypeScript you're writing type propType = Data['foo'] is for compile time stuff - at run time I'm pretty sure your only option is to use typeof on an initialized object. — MrRobboto
– MrRobboto, Commented Nov 1, 2019 at 21:49
@MrRobboto Thanks for referring me to keyof but unfortunately that yields the exact same errors. — katie
– katie, Commented Nov 1, 2019 at 21:53
@MrRobboto I'll try to explain the situation better. It's definitely a weird edge case, and I'll have to spend some time coming up with a generic example. — katie
– katie, Commented Nov 1, 2019 at 21:54

jperl · Accepted Answer · 2019-11-01 22:34:30Z

8

You have two solutions. Either

export interface Data {
  foo: string;
  bar: number;
}

type propName = 'bar';
type propType = Data[propName]; //number

or

export interface Data {
  foo: string;
  bar: number;
}

const propName = 'bar'; //or let propName: 'bar' = 'bar' (both are type literals)
type propType = Data[typeof propName]; //number (typeof propName is 'bar')

edited Nov 1, 2019 at 22:34

answered Nov 1, 2019 at 22:25

jperl

5,2012 gold badges19 silver badges31 bronze badges

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

7 Comments

katie Over a year ago

So I'm getting the impression that only a type can go in the brackets when accessing Data this way. Weird that it works with a 'string' though.

jperl Over a year ago

@Katie are you sure you're using const propName = 'bar';? That's type literal, so basically Typescript infers the most narrow type here, which is bar, not string.

jperl Over a year ago

@Katie typescriptlang.org/play/…

jperl Over a year ago

@Katie see, it works just fine. There must be a problem with your code. Also, whenever you're dealing with types, don't use values. Hence the typeof propName when propName is a value.

user981225 Over a year ago

It's not clear to me what I can do with that type object now. How can I, for exmaple, print out that 'bar' is expected to be type 'number'?

|

Collectives™ on Stack Overflow

Get Typescript interface property type, given property name only

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related