Insider 10x developer

I can’t remember HTMLDivElement and HTMLImageElement

Use useRef<ElementRef<'div'>>(null)

Reminder: Complex types of inheritance are never worth it.

Remember: satisfies and “as const” are incredible.

as const satisfies [Sum, Mul] are most times better than specifying the return type (Gives the caller back complete immutable types!)

Normalized Types from returns have problems.

Never use discriminated unions without a kind/type property:

 // Obvious example
 function f(a: number) : ({x: number} | {y:number})
 {

    if (a === 0) {
        return {x: 3} as const;
    }
    return {y: 4} as const;
  }

// TS error
console.log(f(0).x === undefined)
// TS error
console.log(f(0).y === undefined)
console.log(f(3))
console.log(f(3))
console.log(f(3))


// Not so obvious example
function json<T >(o: T) : T {
    return o; 
}


function f2(a: number)
 {

    if (a === 0) {
        return json({x: 9});
    }
    return json({y: 4});
  }

const result: ReturnType<typeof f2> = f2(3);

// error
console.log(f2(0).x === undefined)
// error
console.log(f2(0).y === undefined)

Sources
https://www.totaltypescript.com/strongly-type-useref-with-elementref
https://twitter.com/pcattori/status/1598359344827056131