GithubHelp home page GithubHelp logo

Comments (6)

Austaras avatar Austaras commented on May 18, 2024 1

It's a known trick of Typescript, that is when a union is put in a contravariant place(like function parameter) in conditional type it will be turned into a intersection type. So boolean = true | false is turned into true & false aka never

There is one easy and tricky solution

type VoidableEventCallback<EventValue> = {
  0: () => void
  1: (e: EventValue) => void
}[EventValue extends void ? 0 : 1]

But @Brooooooklyn what is the purpose of this type in the first place? In Typescript a function with a void parameter is quite identical to a function with no parameter

declare function foo(a: void): void
foo()
foo(1) // error

from rxjs-hooks.

Brooooooklyn avatar Brooooooklyn commented on May 18, 2024

It's seem like a TypeScript behavior.
Maybe you should let TypeScript resolve the generic type params itself.

const [callback, flag] = useEventCallback(($events: Observable<React.MouseEvent<HTMLElement> | boolean>) => $events.pipe(mapTo(false)), false)

callback(true)

from rxjs-hooks.

crimx avatar crimx commented on May 18, 2024

Same result. It's the VoidableEventCallback giving the wrong types.

from rxjs-hooks.

Brooooooklyn avatar Brooooooklyn commented on May 18, 2024

What's version of the TypeScript in your project?
I'm using [email protected] and const [callback, flag] = useEventCallback(($events: Observable<React.MouseEvent<HTMLElement> | boolean>) => $events.pipe(mapTo(false)), false) works fine.

from rxjs-hooks.

crimx avatar crimx commented on May 18, 2024

I'm using 3.5.2 too.

const [callback, flag] = useEventCallback(($events: Observable<React.MouseEvent<HTMLElement> | boolean>) => $events.pipe(mapTo(false)), false) is fine. It's callback(true) got the error.

Found this on the doc, might be the reason?

Conditional types in which the checked type is a naked type parameter are called distributive conditional types. Distributive conditional types are automatically distributed over union types during instantiation. For example, an instantiation of T extends U ? X : Y with the type argument A | B | C for T is resolved as (A extends U ? X : Y) | (B extends U ? X : Y) | (C extends U ? X : Y).

from rxjs-hooks.

crimx avatar crimx commented on May 18, 2024

Very insightful! Didn't know a trick like this. Wish you'd comment earlier so that I don't have to make my own wheels.

from rxjs-hooks.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.