TypeScript Optional Chaining

interface Target {
    staticProp: string;
    method?: (arg: string) => void;
}

const target: Target | null = null;
const array: string[] | null = null;
const func: (() => void) | null = null;
const key = "staticProp";

// 1. Static Property Access (?.identifier)
const v1 = target?.staticProp;

// 2. Dynamic Property / Element Access (?.[expression])
// The ?. operator immediately precedes the bracket notation.
const v2 = target?.[key];
const v3 = array?.[0];

// 3. Function / Method Invocation (?.(args))
// The ?. operator immediately precedes the parentheses.
const v4 = func?.();
const v5 = target?.method?.("argument");

const obj: { prop: string } | null = null;

// TypeScript Source
const value = obj?.prop;

// Logical Equivalence (Pre-ES2020 Transpilation)
const equivalentValue = (obj === null || obj === undefined) ? undefined : obj.prop;

let x = 0;
let y = 0;
const a: { b?: (val: number) => string } | null = null;

// Because 'a' is nullish, the optional chain 'a?.b?.(++x)' short-circuits.
// 1. 'b' is never accessed.
// 2. The function is never invoked.
// 3. The increment operation (++x) inside the chain is bypassed.
// HOWEVER, operations outside the optional chain, like (++y), still execute.
const result = [a?.b?.(++x), ++y]; 

// State after execution: 
// x === 0
// y === 1
// result === [undefined, 1]

const nestedObj: { prop1?: { prop2: string } } | null = null;

// If 'nestedObj' is nullish, it returns undefined immediately.
// It does not attempt to evaluate '.prop1' or '.prop2'.
const deepValue = nestedObj?.prop1?.prop2;

const targetObj: { prop?: string } = {};
const ConstructorRef = class {};
const tagFunc = (strings: TemplateStringsArray) => strings[0];

// INVALID: Cannot be used on the left-hand side of an assignment
targetObj?.prop = "value"; 

// INVALID: Cannot be used with the 'new' keyword for instantiation
const instance = new ConstructorRef?.(); 

// INVALID: Cannot be used as a tagged template literal
const str = tagFunc?.`template`; 

class Child extends class { method() {} } {
    callSuper() {
        // INVALID: Cannot be used to access properties on 'super'
        super?.method();
    }
}