TypeScript does not understand x-if

[smtchahal]

Describe the bug TypeScript does not understand x-if. Inside an x-if block, the passed variable should be evaluated for truthyiness, but it is not.

To Reproduce Steps to reproduce the behavior:

The following code should do it:

type MyNameProps = {
    children: string
}

const MyName = ({ children }: MyNameProps) => (
    <div>{children}</div>
)

type MyComponentProps = {
    name: string | null
}

const MyComponent = ({ name }: MyComponentProps) => (
    <MyName x-if={name}>{name}</MyName>
)
// ...

Expected behavior TypeScript compiles successfully and does not show any errors. {name} gets passed as a string to <MyName>.

Actual behavior TypeScript complains that <MyName> requires children to be of type string, but string | null was passed.

Environment

• OS: Ubuntu 20.04
• node version: 16.14.2
• babel version: 7.9.0
• version: 2.0.1
• TypeScript version: 4.6.3

[peakchen90]

@smtchahal Please replace type MyComponentProps with:

type MyComponentProps = {
    name: string
}

And it will work fine!

[smtchahal]

@peakchen90 Of course it will, but the point is, sometimes the requirements are such that the type just needs to be nullable or optional. When that's the case, the following will work fine with TypeScript:

const MyComponent = ({ name }: MyComponentProps) => (
    <>
        name && <MyName>{name}</MyName>
    </>
)

If this is okay with TypeScript, then x-if should also be okay.

[peakchen90]

@smtchahal I mean this has nothing to do with x-if , it's the default behavior of Typescript

[peakchen90]

@smtchahal Oh, I understand, but maybe I cannot do something for it... It just a babel plugin