Why narrowing doesnt work? | TypeScript Community | Page 1

grim heron Jan 10, 2024, 3:36 PM

#

Types of property 'icon' are incompatible.
Type 'Element | undefined' is not assignable to type 'Element'.
Type 'undefined' is not assignable to type 'ReactElement<any, any>'.

type RequireAtLeastOne<T, Keys extends keyof T = keyof T> = Pick<T, Exclude<keyof T, Keys>> &
  {
    [K in Keys]-?: Required<Pick<T, K>> & Partial<Pick<T, Exclude<Keys, K>>>
  }[Keys]

export interface BaseButton {
  onClick: () => void
  acl?: ToArg<Abilities>
}

type IconType = JSX.Element

export interface RegularButton extends BaseButton {
  text: string
  icon?: IconType
}

export interface IconButton extends BaseButton {
  icon: IconType
}

export type HeaderButton = RequireAtLeastOne<RegularButton & IconButton, 'text' | 'icon'>

  const [iconButtons, regularButtons] = !buttons
    ? [[], []]
    : buttons
        .filter((button) => !button.acl || aclAbility.can(button.acl))
        .reduce(
          (acc, button) => {
            if (button.icon && !button.text) {
              acc[0].push(button)
            } else {
              acc[1].push(button)
            }

            return acc
          },
          [[], []] as [Array<IconButtonType>, Array<RegularButton>],
        )

boreal juniper Jan 10, 2024, 3:41 PM

#

@grim heron can you share a more complete example (including definitions for buttons, ToArg, etc)?

grim heron Jan 10, 2024, 3:42 PM

#

boreal juniper <@292374269441081345> can you share a more complete example (including definitio...

buttons is Array<HeaderButton>

acl and onClick props you can ignore it doesnt really matter

boreal juniper Jan 10, 2024, 3:44 PM

#

i'm trying to reproduce your error so that i can help you debug it. i'm not sure where i should be looking. so far i have this:

little pivotBOT Jan 10, 2024, 3:44 PM

#

mkantor#0

Playground Link

Preview:```ts
import "react"

type RequireAtLeastOne<
T,
Keys extends keyof T = keyof T

= Pick<T, Exclude<keyof T, Keys>> &
{
[K in Keys]-?: Required<Pick<T, K>> &
Partial<Pick<T, Exclude<Keys, K>>>
}[Keys]

export interface BaseButton {
onClick: () => void
acl?: ToArg<Abilities>
...```

boreal juniper Jan 10, 2024, 3:45 PM

#

what line is that error on?

grim heron Jan 10, 2024, 3:46 PM

#

36 and 38

boreal juniper Jan 10, 2024, 3:47 PM

#

ah i see IconButtonType was supposed to be IconButton. i thought it was another missing definition

grim heron Jan 10, 2024, 3:47 PM

#


import 'react'

type RequireAtLeastOne<T, Keys extends keyof T = keyof T> = Pick<T, Exclude<keyof T, Keys>> &
  {
    [K in Keys]-?: Required<Pick<T, K>> & Partial<Pick<T, Exclude<Keys, K>>>
  }[Keys]

export interface BaseButton {
  onClick: () => void
}

type IconType = JSX.Element

export interface RegularButton extends BaseButton {
  text: string
  icon?: IconType
}

export interface IconButton extends BaseButton {
  icon: IconType
}

export type HeaderButton = RequireAtLeastOne<RegularButton & IconButton, 'text' | 'icon'>


declare const buttons: Array<HeaderButton>

const [iconButtons, regularButtons] = !buttons
  ? [[], []]
  : buttons
    .reduce(
      (acc, button) => {
        if (button.icon && !button.text) {
          acc[0].push(button)
        } else {
          acc[1].push(button)
        }

        return acc
      },
      [[], []] as [Array<IconButton>, Array<RegularButton>],
    )

#

Should be like this

boreal juniper Jan 10, 2024, 3:48 PM

#

checking button.icon doesn't narrow button unless button is a discriminated union

#

when you do acc[0].push(button) the button variable there hasn't been narrowed at all with this setup

grim heron Jan 10, 2024, 3:48 PM

#

I understand, but why it doesnt narrow?

boreal juniper Jan 10, 2024, 3:49 PM

#

that's just how typescript works. it never narrows a when you check a.b except if a is a discriminated union and b is one of the discriminating properties

#

you could either make your button types form a discriminated union or you could construct a new value instead of using button inside your conditions

#

do you have a preference for one vs the other?

grim heron Jan 10, 2024, 3:50 PM

#

My purpose to pass into a component array of RegularButton or IconButton types and after that split it into two arrays

grim heron Jan 10, 2024, 3:51 PM

#

boreal juniper do you have a preference for one vs the other?

Doesnt matter If both ways work

grim heron Jan 10, 2024, 3:53 PM

#

boreal juniper you could either make your button types form a discriminated union or you could ...

Could you please provide examples?

boreal juniper Jan 10, 2024, 3:53 PM

#

yeah, working on it

#

if you want to use a discriminated union it might look like this:

little pivotBOT Jan 10, 2024, 3:54 PM

#

mkantor#0

Playground Link

Preview:```ts
import "react"

export interface BaseButton {
onClick: () => void
acl?: ToArg<Abilities>
}

type IconType = JSX.Element

export interface RegularButton extends BaseButton {
type: "regular"
text: string
icon?: IconType
}

export interface IconButton extends BaseButton {
...```

boreal juniper Jan 10, 2024, 3:54 PM

#

as an added bonus you don't need your RequireAtLeastOne hack anymore

#

since you can guarantee that directly

#

if you don't already know about discriminated unions, check out: https://www.typescriptlang.org/docs/handbook/2/narrowing.html#discriminated-unions

grim heron Jan 10, 2024, 3:57 PM

#

export type HeaderButton = RegularButton | IconButton

this will not works because I need to have at least one provided property or icon or text. By this reason I use RequireAtLeastOne type

boreal juniper Jan 10, 2024, 3:57 PM

#

the types already require that, try it for yourself

#

it's not possible to create a HeaderButton without one of those properties

grim heron Jan 10, 2024, 4:00 PM

#

Yeah, you're right, it works! Thank you so much

#Why narrowing doesnt work?