Annoying TypeScript discriminating union gotcha

#typescript

Can you spot what's wrong with this code?

https://www.typescriptlang.org/play?ts=4.2.3#code/C4TwDgpgBACgTgezAZygXigbwFBT1AS2QEE44BDEALigDNyAbZCAGl31oDsaAKAN0YBXCDWTA4BTgHMAlOgB8UPggIATbAF8oAHyzs8RUhWpRxwtvjrco-ISKhiJ0gNoBdOWkXK1m7NgDGCJxiUADCCAC2YEEQnMDoNpiGZJQsVho08EjIHoo4loHB8f6MDABG5P4A1gk8uXqWlgS0NsnGcvmNXVw8zgDk5MiqtKp97vqNWhBM0J1dlj19AIwATADMfTITlhoTuxpAA

Top comments (2)

sevaru • Apr 14 '21

TLTR It would work if you write like this

const Component = (props: Props) => {
    const callback = () => {
        if (props.isArray) {
            props.fn(['asdfd'])
        } else {
            props.fn('123')
        }
    }
}

Dmitri Pisarev 🇷🇺 • Apr 25 '21

Yup, exactly! During restructuring TypeScript looses relation between object members.

How to Use the Sui TypeScript SDK

Ukeje Chukwuemeriwo Goodness - Oct 26

Building a Responsive, Drag-and-Drop Image Gallery with React and Tailwind CSS 🎨

Julfikar Haidar - Oct 25

Setting up Redis in a Next.js Application

Hadiza Mohammed - Oct 23

Cloud Computing Beyond Containers: How Cloudflare’s Isolates Are Changing the Game

Harsh boricha - Oct 23

DEV Community