Optional property does not exist on const object type

I have some code like this:

const props = {
  a: {
    optional: "foo",
    mandatory: "bar",
  },
  b: {
    mandatory: "blaz",
  },
} as const;

const propsICareAbout: (keyof typeof props)[] = [];

for (const prop of propsICareAbout) {
  if (props[prop].optional) {
    doStuff(props[prop].optional);
  }
}

but it gives me this error when I try to access props[prop].optional:

Property 'optional' does not exist on type '{ readonly mandatory: "blaz"; }'.

Notice that propsICareAbout is empty. I get this error regardless of if it's empty or if it's ['a', 'b'] or whatever. I tried doing

const opt = "optional" in props[prop] ? props[prop].optional : null;

but still got the same error.

Declare a separate variable for props[prop] and check with in operator:

const propsICareAbout: (keyof typeof props)[] = [];
for (const propName of propsICareAbout) {
  const prop = props[propName];
  if ('optional' in prop) {
    prop.optional;
  }
}

Since you are having a loop on all the keys and its respective properties, you do not have the "optional" key in all sub-objects and hence you are running into the issue.

Please modify your code as mentioned below and check:

const props = {
  a: {
    optional: "foo",
    mandatory: "bar",
  },
  b: {
    mandatory: "blaz",
  },
} as const;

const propsICareAbout: (keyof typeof props)[] = ["a"];
for (const prop of propsICareAbout) {
  if ("optional" in props[prop]) {
    doStuff(props[prop].optional);
  }
}