Accessing property using string

Question

What's proper way to access interface/class properties using strings?

I have following interface

interface Type {
  nestedProperty: {
    a: number
    b: number
  }
}

I'd like to set nested property using array iteration like that:

let myType:Type = ...
["a", "b"].forEach(attributeName => myType.nestedProperty[attributeName] = 123)

TS complains that "nestedProperty" doesn't have string index type. If I add if typeguard (e.g. if (attributeName === "a")) compiler is happy but I really don't want to go if (...===... || ...===... || ... ) { route.

I also don't want to use indexed type:

interface Type<T> {
  [index:string]: <T>
  a: <T>
  b: <T>
}

Since it's not dynamic structure and properties could have different types.

I'm sure there is some elegant way to do it but can't seem to find it anywhere in documentation/Stack Overflow/web.

Should I write custom guard returning union type predicate for that? Something like that?

(attribute: string): attribute is ('a' | 'b') { ... }

I'm not sure whether your Type interface was just a generic example. If it isn't, you can go with interface Type {nestedProperty: {[key: string]: number};} — julianobrasil
– julianobrasil, Commented Aug 31, 2019 at 9:12
Yeah. That was one of "solutions" but I don't want Type to be dynamic structure where I can put anything there. I want to stick to set of defined properties. I've edited question to be more precise — duffpl
– duffpl, Commented Aug 31, 2019 at 9:14
And what about interface Type {nestedProperty: {[key in ('a' | 'b')]: number};}? — julianobrasil
– julianobrasil, Commented Aug 31, 2019 at 9:39

Mateusz Kocz · Accepted Answer · 2019-08-31 09:18:18Z

2

You have to explicitly tell TypeScript that the array you're using consists only of the properties allowed as keys in the nestedProperty property.

interface Type {
  nestedProperty: {
    a: number
    b: number
  }
}

// Create a type alias for convenience. The type itself
// is a list of keys allowed in the `nestedProperty`.
type NestedAccessors = Array<keyof Type['nestedProperty']>

// Now TS is happy to do anything with the list since it
// can guarantee you're using proper values.
(["a", "b"] as NestedAccessors).forEach(attributeName => myType.nestedProperty[attributeName] = 123)

answered Aug 31, 2019 at 9:18

Mateusz Kocz

4,6021 gold badge27 silver badges27 bronze badges

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

3 Comments

duffpl Over a year ago

keyof! Haven't seen that one in documentation yet :) Looks really clean. Thank you very much. TypeScripting for few days so far. Totally in love. Now even more :)

duffpl Over a year ago

As a follow up: Is there a way to turn NestedAccessor to array so I could just go with NestedAccessorsSomeHowTurnedIntoArray.forEach( accessor => ... )?

Mateusz Kocz Over a year ago

You can't access interfaces in the run-time, after the app is compiled to JavaScript. The best you can do is to access properties of the existing object that implements the Type interface. const arr = Object.keys(myType.nestedProperty) as NestedAccessors will get the key values and then you can do arr.forEach(...).

julianobrasil · Accepted Answer · 2019-08-31 09:57:25Z

0

I'd go with:

interface Type {
  nestedProperty: {[key in ('a' | 'b')]: number}  
}

let myType:Type = {
    nestedProperty: {
        a: 1,
        b: 2,
    }
};

(["a", "b"] as Array<'a'|'b'>).forEach(attributeName => myType.nestedProperty[attributeName] = 123)

Given the problem, if you don't wanna declare an additional type, this could be a way. But I like the things more explicitly declared, like in the accepted answer.

edited Aug 31, 2019 at 9:57

answered Aug 31, 2019 at 9:41

julianobrasil

9,4472 gold badges38 silver badges58 bronze badges

1 Comment

duffpl Over a year ago

Thanks for showing some extra "type fun" :) Also casting during access looks okay-ish: myType.nestedProperty[attributeName as keyof Type['nestedProperty']] = ...

Collectives™ on Stack Overflow

Accessing property using string

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related