代入時のoptional?と|undefinedは意味が異なる

以下は全て違う意味

code:a1.ts

type A1 = { x: string; hoge: string | undefined }

code:a2.ts

type A2 = { x: string; hoge?: string }

code:a3.ts

type A3 = { x: string; hoge?: string | undefined }

code:ts

const a11: A1 = { x: 'hoge', hoge: 'hoge' };

const a12: A1 = { x: 'hoge', hoge: undefined };

code:ts

const a21: A2 = { x: 'hoge', hoge: 'hoge' };

const a22: A2 = { x: 'hoge' };

code:ts

const a31: A3 = { x: 'hoge', hoge: 'hoge' };

const a32: A3 = { x: 'hoge', hoge: undefined};

const a33: A3 = { x: 'hoge' };

アクセスするときは同じ

code:ts

const a: A = ..

a.hoge // string | undefined

どこで問題が起きるか？

例えば、