Optional chaining should narrow union types too

[mon-jai]

🔍 Search Terms

optional chaining, union type

✅ Viability Checklist

• This wouldn't be a breaking change in existing TypeScript/JavaScript code
• This wouldn't change the runtime behavior of existing JavaScript code
• This could be implemented without emitting different JS based on the types of the expressions
• This isn't a runtime feature (e.g. library functionality, non-ECMAScript syntax with JavaScript output, new syntax sugar for JS, etc.)
• This feature would agree with the rest of our Design Goals: https://github.com/Microsoft/TypeScript/wiki/TypeScript-Design-Goals

⭐ Suggestion

It should be allowed to access deep property of a union variable with optional chaining.

Consider the example below,

type Foo = { a: { b: string } } | { c: number }

declare let foo: Foo

// The following should be `string | undefined` but TypeScript failed to infer the type
foo.a?.b // Property 'a' does not exist on type '{ c: number; }'.

TypeScript should be able to infer foo.a?.b correctly, but currently TypeScript throws an error instead.

📃 Motivating Example

It would be useful for library users who want to access a property from a variable we don't have control over.

Here's an example with jscodeshift.

For TypeScript, it is so hard to work around with the type checker,

// root.find(jscodeshift.VariableDeclaration, variableDeclaration => {
  const variableDeclarator = variableDeclaration.declarations[0]
  if (variableDeclarator === undefined) return
  if (variableDeclarator.type !== "VariableDeclarator") return
  if (variableDeclarator.id.type !== "Identifier") return
  console.log(variableDeclarator?.id?.name)
})

For JavaScript, we can just,

root.find(jscodeshift.VariableDeclaration, variableDeclaration => {
  const name = variableDeclaration.declarations[0]?.id?.name
  if (name !== undefined) console.log(name)
})

---

I don't know if this is a bug instead.

#40397 was discussing the same issue, which was labeled as "fixed". However, the attached code snippet doesn't work on TypeScript v5.2.2.

[RyanCavanaugh]

This is the intended behavior because object types aren't sealed. You can legally write this code

type Foo = { a: { b: string } } | { c: number }

let bar = { a: 0, c: 2 };
let foo: Foo = bar;

which then crashes if run (thus should have a type error)

foo?.a.toLowerCase();

[ahejlsberg]

Write the type like this instead:

type Foo = { a: { b: string } } | { a?: undefined, c: number }

Your scenario then works because you're ensuring that a will either be { b: string } or undefined.

[MartinJohns]

@ahejlsberg Technically a can still be of an arbitrary type because it's optional in the second version.

[mon-jai]

Maybe this could be resolved if #12936 is implemented (some day).

[typescript-bot]

This issue has been marked as "Working as Intended" and has seen no recent activity. It has been automatically closed for house-keeping purposes.