Ternary operator not narrowing down type inference

[lonyele]

TypeScript Version: 3.7.2, nightly
This may be a newbie question since I couldn't find any similar questions on stack overflow or this repo... I think these examples will have a same behavior but it actually has different typescript checking result. Please guide me to a learning material if this question is asked because of purely not understanding javascript of typescript

Search Terms:
combinations of ternary operator, narrowing, type inference, type guard
Code

interface ExampleData {
    bitlyUrl?: string | undefined | null;
}

const exampleData: ExampleData = {
    bitlyUrl: 'https://bitly.com/asdfasasdf'
}

const help = (arg: string) => {
    console.log('function that has a argument with a string type')
}

exampleData && exampleData.bitlyUrl
    ? help(exampleData.bitlyUrl)
    : console.log('working as expected')

const condition1 = exampleData && exampleData.bitlyUrl;
condition1
    ? help(exampleData.bitlyUrl)
    : console.log('not working with variable')

const condition2 = exampleData?.bitlyUrl;
condition2
    ? help(exampleData.bitlyUrl)
    : console.log('not working with variable(optional chaining)')


const workaround = exampleData && exampleData.bitlyUrl;
workaround
    ? help(exampleData.bitlyUrl as string)
    : console.log('workaround that doesn't look ok....')

Expected behavior:
It should not make a typescript error

Actual behavior:
It emits typescript error

Playground Link: https://www.typescriptlang.org/play/?ts=3.9.0-dev.20200308#code/JYOwLgpgTgZghgYwgAgKIA84FsAOAbCAETjDmQG8AoZG5AI2DDwE8BVKPAfgC5kBnMFFABzZAB9kAVxAATCDFAQZ45CEl48AbkoBfSpQQB7EAOQRMuAsVK8M2fERJkAvBWq0GTNh14ByABZgYDh83AD0YZ4sAHRGWGFwfDLwfInJvrr6RiZgyP4QeDjIrgAUcFDCvAJCIMIAlMUAfG60yNl8hgTReIbCJb4w0ghgwMbIYP4keYnIZOXCklgQ4MgA7oz+s-yCIuPMOBC+dZmU5vZWTsgAZFdmFg7WcNFR3njuNJx5BTglZ5aOpGejBY7Dwx1avHanQg3V6-VWhigAGtdjNzAdhkojlljKZsjJGKMQABGYp3c4Asg3cn-R5Aryg7T4wnGYnvZCffKFX73C6Al6g8G0SG46Gwvq+ECGXII5G7dYTZAAN3KwDgdAI2IMuNyzJGxgATGS-g8nJx6SCOEzjAT9SADezOd8eRS6QKOEKaCKTGKehKpTLESjamsNsrVeqCCVDDg7XA8G1JqARHUtUA

Related Issues:

[MartinJohns]

Narrowing with the ternary operator works just fine, but storing the "narrowing check" in a variable and narrow based on that is not supported in general.

[MartinJohns]

Found the relevant issue: duplicate of #12184.

[lonyele]

Oh, thanks for your help. It seems complex as it has to track all the way down for type inference. Can I ask one more? Then what are the best practices to handle these cases?

Should I use

• exampleData && exampleData.bitlyUrl kind of duplicated guard many places in a code
• or manually put types where it emits error? (as string in the below example)

const workaround = exampleData && exampleData.bitlyUrl;
workaround
    ? help(exampleData.bitlyUrl as string)
    : console.log('workaround that doesn't look ok....')

• or... maybe there is a cleaner/better way? (using function like isValidData() kind of)

Or in general what is the recommended way to validate values before using it?(sorry for the broad question)

[typescript-bot]

This issue has been marked as a 'Duplicate' and has seen no recent activity. It has been automatically closed for house-keeping purposes.