获取类的属性

是否有方法获取 TypeScript 中类的属性名称？

在这个例子中，我想“描述”类 A或任何类，并获得它的属性数组(也许只有 public的属性?)有可能吗？还是应该先实例化对象？

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'] */
194342 次浏览
小开

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);
小开

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.

小开

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);
}
}
小开

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.

小开

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]);
}
);
小开

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;
}
}
小开

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;
…
小开

There is another answer here that also fits the authors request: 'compile-time' way to get all property names defined interface

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

小开

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']
}
}
小开

So far the answers require to instantiate the class and rely on Object.Keys. There is a method which involves @decorators that has not been mentioned.

On the class you add a decorator on each fields you want to describe. Here as an example I annotate each field with a SQL column type.

class Table {
@field("VARCHAR(30)") lastName?: string;
@field("TIMESTAMP") dob?: number;
}

Then calling getField on the class returns an array these fields with the annotation you want

> getFields(Table)
[{ fieldName: "lastName", columnType: "VARCHAR(30)"},
{ fieldName: "dob", columnType: "TIMESTAMP"}]

To do this you only need to create a couple of functions. I made a working example here: https://codepen.io/paganaye/pen/bGvavoL?editors=0010

And here is the code if you prefer

/* Original TypeScript Source


// ==== getFields method starts here ====


const FIELDS = Symbol("fields");


interface FieldDecorator {
fieldName: string;
columnType: string;
}


function field(columnType: string) {
function createDecoratorFunction(table: any, fieldName: any) {
let fieldDecorator: FieldDecorator = { fieldName, columnType };
(table[FIELDS] || (table[FIELDS] = [])).push(fieldDecorator);
return fieldDecorator as any;
}
return createDecoratorFunction;
}


function getFields(table: any): FieldDecorator[] {
return table.prototype[FIELDS];
}


// ==== getFields method ends here ====


// ==== sample code from here ====


class Table {
@field("VARCHAR(30)") lastName?: string;
@field("TIMESTAMP") dob?: number;
}


document.getElementById("output");
output.innerText = JSON.stringify(getFields(Table), undefined, "  ");


*/
"use strict";
// ==== getFields method starts here ====
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
const FIELDS = Symbol("fields");
function field(columnType) {
function createDecoratorFunction(table, fieldName) {
let fieldDecorator = { fieldName, columnType };
(table[FIELDS] || (table[FIELDS] = [])).push(fieldDecorator);
return fieldDecorator;
}
return createDecoratorFunction;
}
function getFields(table) {
return table.prototype[FIELDS];
}
// ==== getFields method ends here ====
// ==== sample code from here ====
class Table {
}
__decorate([
field("VARCHAR(30)"),
__metadata("design:type", String)
], Table.prototype, "lastName", void 0);
__decorate([
field("TIMESTAMP"),
__metadata("design:type", Number)
], Table.prototype, "dob", void 0);
document.getElementById("output");
output.innerText = JSON.stringify(getFields(Table), undefined, "  ");
// [
//    { fieldName:"lastName", columnType:"VARCHAR(30)"},
//    { fieldName:"dob",      columnType:"TIMESTAMP"}
// ]
body {
padding: 2em;
}
pre {
background-color: #cce;
padding: 0.5em;
}
<p>Here we start from </p>
<pre>
class Table {
@field("VARCHAR(30)") lastName?: string;
@field("TIMESTAMP") dob?: number;
}
</pre>
<p>and we automatically get</p>
<pre id="output">
</pre>
<p>There is no library used you only need this in your tsconfig.json</p>
<pre>
"compilerOptions": {
"experimentalDecorators": true
}
</pre>


提交答案