Get properties of a class
TypescriptReflectionTypescript Problem Overview
Is there a way to get properties names of class in TypeScript?
In the example, I would like to 'describe' the class A or any class and get an array of its properties (maybe only public ones?), is it possible? Or should I instantiate the object first?
class A {
private a1;
private a2;
/** Getters and Setters */
}
class Describer<E> {
toBeDescribed:E ;
describe(): Array<string> {
/**
* Do something with 'toBeDescribed'
*/
return ['a1', 'a2']; //<- Example
}
}
let describer = new Describer<A>();
let x= describer.describe();
/** x should be ['a1', 'a2'] */
Typescript Solutions
Solution 1 - Typescript
This TypeScript code
class A {
private a1;
public a2;
}
compiles to this JavaScript code
class A {
}
That's because properties in JavaScript start extisting only after they have some value. You have to assign the properties some value.
class A {
private a1 = "";
public a2 = "";
}
it compiles to
class A {
constructor() {
this.a1 = "";
this.a2 = "";
}
}
Still, you cannot get the properties from mere class (you can get only methods from prototype). You must create an instance. Then you get the properties by calling Object.getOwnPropertyNames().
let a = new A();
let array = return Object.getOwnPropertyNames(a);
array[0] === "a1";
array[1] === "a2";
Applied to your example
class Describer {
static describe(instance): Array<string> {
return Object.getOwnPropertyNames(instance);
}
}
let a = new A();
let x = Describer.describe(a);
Solution 2 - Typescript
Some answers are partially wrong, and some facts in them are partially wrong as well.
Answer your question: Yes! You can.
In Typescript
class A {
private a1;
private a2;
}
Generates the following code in Javascript:
var A = /** @class */ (function () {
function A() {
}
return A;
}());
as @Erik_Cupal said, you could just do:
let a = new A();
let array = return Object.getOwnPropertyNames(a);
But this is incomplete. What happens if your class has a custom constructor? You need to do a trick with Typescript because it will not compile. You need to assign as any:
let className:any = A;
let a = new className();// the members will have value undefined
A general solution will be:
class A {
private a1;
private a2;
constructor(a1:number, a2:string){
this.a1 = a1;
this.a2 = a2;
}
}
class Describer{
describeClass( typeOfClass:any){
let a = new typeOfClass();
let array = Object.getOwnPropertyNames(a);
return array;//you can apply any filter here
}
}
For better understanding this will reference depending on the context.
Solution 3 - Typescript
Another solution, You can just iterate over the object keys like so, Note: you must use an instantiated object with existing properties:
printTypeNames<T>(obj: T) {
const objectKeys = Object.keys(obj) as Array<keyof T>;
for (let key of objectKeys)
{
console.log('key:' + key);
}
}
Solution 4 - Typescript
Just for fun
class A {
private a1 = void 0;
private a2 = void 0;
}
class B extends A {
private a3 = void 0;
private a4 = void 0;
}
class C extends B {
private a5 = void 0;
private a6 = void 0;
}
class Describer {
private static FRegEx = new RegExp(/(?:this\.)(.+?(?= ))/g);
static describe(val: Function, parent = false): string[] {
var result = [];
if (parent) {
var proto = Object.getPrototypeOf(val.prototype);
if (proto) {
result = result.concat(this.describe(proto.constructor, parent));
}
}
result = result.concat(val.toString().match(this.FRegEx) || []);
return result;
}
}
console.log(Describer.describe(A)); // ["this.a1", "this.a2"]
console.log(Describer.describe(B)); // ["this.a3", "this.a4"]
console.log(Describer.describe(C, true)); // ["this.a1", ..., "this.a6"]
Update: If you are using custom constructors, this functionality will break.
Solution 5 - Typescript
Other answers mainly get all name of object, to get value of property, you can use yourObj[name], for example:
var propNames = Object.getOwnPropertyNames(yourObj);
propNames.forEach(
function(propName) {
console.log(
'name: ' + propName
+ ' value: ' + yourObj[propName]);
}
);
Solution 6 - Typescript
I am currently working on a Linq-like library for Typescript and wanted to implement something like GetProperties of C# in Typescript / Javascript. The more I work with Typescript and generics, the clearer picture I get of that you usually have to have an instantiated object with intialized properties to get any useful information out at runtime about properties of a class. But it would be nice to retrieve information anyways just from the constructor function object, or an array of objects and be flexible about this.
Here is what I ended up with for now.
First off, I define Array prototype method ('extension method' for you C# developers).
export { } //creating a module of below code
declare global {
interface Array<T> {
GetProperties<T>(TClass: Function, sortProps: boolean): string[];
} }
The GetProperties method then looks like this, inspired by madreason's answer.
if (!Array.prototype.GetProperties) {
Array.prototype.GetProperties = function <T>(TClass: any = null, sortProps: boolean = false): string[] {
if (TClass === null || TClass === undefined) {
if (this === null || this === undefined || this.length === 0) {
return []; //not possible to find out more information - return empty array
}
}
// debugger
if (TClass !== null && TClass !== undefined) {
if (this !== null && this !== undefined) {
if (this.length > 0) {
let knownProps: string[] = Describer.describe(this[0]).Where(x => x !== null && x !== undefined);
if (sortProps && knownProps !== null && knownProps !== undefined) {
knownProps = knownProps.OrderBy(p => p);
}
return knownProps;
}
if (TClass !== null && TClass !== undefined) {
let knownProps: string[] = Describer.describe(TClass).Where(x => x !== null && x !== undefined);
if (sortProps && knownProps !== null && knownProps !== undefined) {
knownProps = knownProps.OrderBy(p => p);
}
return knownProps;
}
}
}
return []; //give up..
}
}
The describer method is about the same as madreason's answer. It can handle both class Function and if you get an object instead. It will then use Object.getOwnPropertyNames if no class Function is given (i.e. the class 'type' for C# developers).
class Describer {
private static FRegEx = new RegExp(/(?:this\.)(.+?(?= ))/g);
static describe(val: any, parent = false): string[] {
let isFunction = Object.prototype.toString.call(val) == '[object Function]';
if (isFunction) {
let result = [];
if (parent) {
var proto = Object.getPrototypeOf(val.prototype);
if (proto) {
result = result.concat(this.describe(proto.constructor, parent));
}
}
result = result.concat(val.toString().match(this.FRegEx));
result = result.Where(r => r !== null && r !== undefined);
return result;
}
else {
if (typeof val == "object") {
let knownProps: string[] = Object.getOwnPropertyNames(val);
return knownProps;
}
}
return val !== null ? [val.tostring()] : [];
}
}
Here you see two specs for testing this out with Jasmine.
class Hero {
name: string;
gender: string;
age: number;
constructor(name: string = "", gender: string = "", age: number = 0) {
this.name = name;
this.gender = gender;
this.age = age;
}
}
class HeroWithAbility extends Hero {
ability: string;
constructor(ability: string = "") {
super();
this.ability = ability;
}
}
describe('Array Extensions tests for TsExtensions Linq esque library', () => {
it('can retrieve props for a class items of an array', () => {
let heroes: Hero[] = [<Hero>{ name: "Han Solo", age: 44, gender: "M" }, <Hero>{ name: "Leia", age: 29, gender: "F" }, <Hero>{ name: "Luke", age: 24, gender: "M" }, <Hero>{ name: "Lando", age: 47, gender: "M" }];
let foundProps = heroes.GetProperties(Hero, false);
//debugger
let expectedArrayOfProps = ["name", "age", "gender"];
expect(foundProps).toEqual(expectedArrayOfProps);
expect(heroes.GetProperties(Hero, true)).toEqual(["age", "gender", "name"]);
});
it('can retrieve props for a class only knowing its function', () => {
let heroes: Hero[] = [];
let foundProps = heroes.GetProperties(Hero, false);
let expectedArrayOfProps = ["this.name", "this.gender", "this.age"];
expect(foundProps).toEqual(expectedArrayOfProps);
let foundPropsThroughClassFunction = heroes.GetProperties(Hero, true);
//debugger
expect(foundPropsThroughClassFunction.SequenceEqual(["this.age", "this.gender", "this.name"])).toBe(true);
});
And as madreason mentioned, you have to initialize the props to get any information out from just the class Function itself, or else it is stripped away when Typescript code is turned into Javascript code.
Typescript 3.7 is very good with Generics, but coming from a C# and Reflection background, some fundamental parts of Typescript and generics still feels somewhat loose and unfinished business. Like my code here, but at least I got out the information I wanted - a list of property names for a given class or instance of objects.
SequenceEqual is this method btw:
if (!Array.prototype.SequenceEqual) {
Array.prototype.SequenceEqual = function <T>(compareArray: T): boolean {
if (!Array.isArray(this) || !Array.isArray(compareArray) || this.length !== compareArray.length)
return false;
var arr1 = this.concat().sort();
var arr2 = compareArray.concat().sort();
for (var i = 0; i < arr1.length; i++) {
if (arr1[i] !== arr2[i])
return false;
}
return true;
}
}
Solution 7 - Typescript
Use these
export class TableColumns<T> {
constructor(private t: new () => T) {
var fields: string[] = Object.keys(new t())
console.log('fields', fields)
console.log('t', t)
}
}
Usage
columns_logs = new TableColumns<LogItem>(LogItem);
Output
fields (12) ["id", "code", "source", "title", "deleted", "checked", "body", "json", "dt_insert", "dt_checked", "screenshot", "uid"]
js class
t class LogItem {
constructor() {
this.id = 0;
this.code = 0;
this.source = '';
this.title = '';
this.deleted = false;
this.checked = false;
…
Solution 8 - Typescript
There is another answer here that also fits the authors request: https://stackoverflow.com/questions/30207661/compile-time-way-to-get-all-property-names-defined-interface/43572554#43572554
If you use the plugin ts-transformer-keys and an Interface to your class you can get all the keys for the class.
But if you're using Angular or React then in some scenarios there is additional configuration necessary (webpack and typescript) to get it working: https://github.com/kimamula/ts-transformer-keys/issues/4
Solution 9 - Typescript
I know no one likes to use this but here's a cool example:
class Account {
firstName: string;
lastName: string;
email: string;
constructor() {
console.log(Object.keys(this)); // ['firstName', 'lastName', 'email']
}
}