如何在打字稿界面中迭代可选变量？

Question

I'm working with a library that provides typescript interfaces with all members as optional and no constructor, like this:

export interface ExampleDto {
    a?: string;
    b?: string;
}

Trying to loop the members in a usual way gets nowhere (as the object doesn't have the members, since they're optional):

let ex: ExampleDto = {};
for(let m in ex) {
    console.log(m);
}

How do I loop through ExampleDto and see "a" and "b" without having to construct an actual ExampleDto with all members set? Some of these interfaces have a LOT of members. I don't care about the value. I just want to iterate through the optional members names.

---

Came up with the following fix, based on Meirion Hughes explanation. Each of the interfaces was generated dynamically via Swagger, so I'm adding an empty() function to create a fully populated object. I went this route to avoid breaking other users of the library:

export interface ExampleDto {
  a?: string;
  b?: string;
}
export namespace ExampleDto {
  export function empty(): ExampleDto {
    return {
      a: null,
      b: null,
    }
  }
}

---

Update 2: Typescript 2.1 provides "keyof" which yields the type of permitted property names. Details here: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-1.html

Answer 1

Interfaces have no run-time construct. So you will have to assign the field for it to exist during run-time. If you want the key to exist, but have a value of undefined / null then you have to initialize it explicitly. You can enforce this by dropping the optional and allowing it to be of type undefined .

interface Foo{
  bar: number | undefined;
}

let bad:Foo = {}; // Error - Property 'bar' is missing in type '{}'.

let good:Foo = {bar:undefined}; // OK

for(let key in good) {
    console.log(key);  // prints bar
}

One thing you can do is apply your incomplete optional data on top of a valid instance. ie create a base version of the instance with all fields set to undefined. Then allow a partial instance with some unset properties. Finally, merge the base and incomplete together to create a restored instance, containing all fields:

type Foo = { bar: string | undefined, ray: string | undefined };

let initFoo: Foo = { bar: undefined, ray: undefined };
let incompleteDTO: Partial<Foo> = { ray: "yes" };
let restoredData: Foo = { ...initFoo, ...incompleteDTO };

for (let key in restoredData) {
  console.log(key, restoredData[key]);
}

output:

bar undefined
ray yes

Finally, this kind of behavior is easier to use via a class:

class Foo {
  bar: number | undefined = undefined;
  ray: string | undefined = undefined;

  constructor(init: Partial<Foo>) {
    Object.assign(this, init);
  }
}

let bad: Foo = {}; // Error
let good: Foo = new Foo({ ray: "yes" });

Answer 2

Typescript interfaces aren't actual object or classes, they are only definitions of the structure of javascript objects at runtime.
The interfaces aren't even being translated into javascript when compiling, and have no constructors.

In your code you assigned an empty object into the ex variable, it has no properties.
This will print a :

let ex: ExampleDto = {
    a: "A"
};
for(let m in ex) {
    console.log(m);
}