Javascript nameof object property

Question

In C# there is the posibility to get the name of an object property as a string value.

nameof(object.myProperty) --> "myProprty"

Can this be done in Javascript/Typescript?

Object.Keys() is the only thing i found, but it gives me all the keys.

Example what I want to achieve:

export interface myObject {
     myProperty: string;
}

console.log(myObject["myProperty"]);

Let's say I change my interface for some reason to:

export interface myObject {
     myPropertyOther: string;
}

console.log(myObject["myProperty"]); // This will not give an error on build

So I want to have something like this:

console.log(myObject[nameOf(myObject.myProperty)]
// This will give an error on build when the interface is changed

I know the name of the property. When I make changes, it will give an error on the property, but the key is a string value and will not give an error — Linnot
– Linnot, Commented Nov 7, 2018 at 10:22
You already have the name of the property. That's how you access this property in an object—by its name. The question seems very odd to me to be honest. — rishat
– rishat, Commented Nov 7, 2018 at 10:24

Titian Cernicova-Dragomir · Accepted Answer · 2018-11-07 10:18:22Z

6

There is no nameof operator in Javascript/Typescript. You can creat a function that takes the key of another object and this is checked by the typescript compiler:

function keyOf<T>(o: T, k: keyof T) {
    return k
}

let o = { a: 1 }
keyOf(o, 'a'); //ok
keyOf(o, 'b'); //err

answered Nov 7, 2018 at 10:18

Titian Cernicova-Dragomir

253k37 gold badges466 silver badges396 bronze badges

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

Comments

Mathias Lykkegaard Lorenzen · Accepted Answer · 2020-09-25 18:28:45Z

4

I made a library that fetches the name of a property at runtime, even for types that don't exist at runtime (interfaces or types in TypeScript):

It can be found on NPM here: @fluffy-spoon/name-of

The source code is simple (just a few lines of code): https://github.com/ffMathy/FluffySpoon.JavaScript.NameOf

Usage

import { getPropertyName, getDeepPropertyName } from '@fluffy-spoon/name-of';

interface SomeType {
  foo: boolean;

  someNestedObject: {
      bar: string;
  }
}

console.log(getPropertyName<SomeType>(x => x.foo)); //prints "foo"
console.log(getPropertyName<SomeType>(x => x.someNestedObject)); //prints "someNestedObject"
console.log(getPropertyName<SomeType>(x => x.someNestedObject.bar)); //prints "bar"

console.log(getDeepPropertyName<SomeType>(x => x.foo)); //prints "foo"
console.log(getDeepPropertyName<SomeType>(x => x.someNestedObject)); //prints "someNestedObject"
console.log(getDeepPropertyName<SomeType>(x => x.someNestedObject.bar)); //prints "someNestedObject.bar"

Library source code

In case you don't want to install the NPM package.

function getPropertyNameInternal<T = unknown>(expression: (instance: T) => any, options: {
    isDeep: boolean
}) {
    let propertyThatWasAccessed = "";
    var proxy: any = new Proxy({} as any, {
        get: function(_: any, prop: any) {
            if(options.isDeep) {
                if(propertyThatWasAccessed)
                    propertyThatWasAccessed += ".";
                
                propertyThatWasAccessed += prop;
            } else {
                propertyThatWasAccessed = prop;
            }
            return proxy;
        }
    });
    expression(proxy);

    return propertyThatWasAccessed;
}

export function getPropertyName<T = unknown>(expression: (instance: T) => any) {
    return getPropertyNameInternal(expression, {
        isDeep: false
    });
}

export function getDeepPropertyName<T = unknown>(expression: (instance: T) => any) {
    return getPropertyNameInternal(expression, {
        isDeep: true
    });
}

edited Sep 25, 2020 at 18:28

answered Sep 25, 2020 at 14:09

Mathias Lykkegaard Lorenzen

16.1k28 gold badges110 silver badges202 bronze badges

2 Comments

Bergi Over a year ago

If it's just five lines of code, why don't you post them in your answer? Also currently your answer is basically link-only, it doesn't even show how to use the library or what the library would achieve.

Mathias Lykkegaard Lorenzen Over a year ago

I assumed that it would be simple enough for people to go to the repo and look at the single ts file to get the source code. I've edited the post.

Marcel Mateman · Accepted Answer · 2024-09-26 07:34:03Z

2

Recommend: Don't use this package anymore

https://github.com/dsherret/ts-nameof/issues/121

Yes, this can be done in Javascript/Typescript. There is a typescript module.

Shamelessly copied from the manual.

nameof(console);
nameof(console.log);
nameof(console["warn"]);

Transforms to:

"console";
"log";
"warn";

There are more nice examples in the manual.

The solution for yours question:

interface IMyObject {
     myPropertyOther: string;
}
let myObject: IMyObject = {
    myProperty: 'Hello world'
};
console.log(myObject[nameof<IMyObject>((o) => o.myProperty)]);

edited Sep 26, 2024 at 7:34

answered Jun 18, 2020 at 7:16

Marcel Mateman

1176 bronze badges

Collectives™ on Stack Overflow

Javascript nameof object property

3 Answers 3

Comments

Usage

Library source code

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Usage

Library source code

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related