Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Typescript support

See original GitHub issue

I’ve been looking into adding Typescript support to this library. Here are the issues I encountered.

  1. JSX factory invocations (eg: <Foo />) return ReactElement<any> (but a fix is on the way), which means we can’t infer the prop types of any returned elements

  2. @types/react does not allow the children prop to be a function (at least with “stateless components”) This is only true if you explicitly type your stateless component using React.SFC

  3. Typescript cannot infer what yield returns, which means render props are untyped by default

Now I’m wondering if “yield to wrap the next yield or return” is worth the lack of type safety, or if I should bite the bullet on using render props without this library. 😞

If generators were always immutable in Javascript, this would be a lot easier.

Issue Analytics

  • State:open
  • Created 5 years ago
  • Reactions:3
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

aleclarsoncommented, Sep 20, 2018

The best workaround is something like:

import { Component, ReactNode } from 'react'

interface ParentProps<T extends object = any> {
  children?: ReactNode[] | ((props: T) => ReactNode)

// Infer the argument types of a function
type In<T> = T extends (...args: infer U) => any ? U : []

/** The functional "render children" prop */
type ChildFunction<T extends ParentProps> = Exclude<
  ReactNode[] | undefined

// Component with render props
type RPC = Component<ParentProps> | ((props: ParentProps) => ReactNode)

/** Extract the render props of a component */
export type RenderProps<T extends RPC> = In<
  ChildFunction<T extends Component<ParentProps> ? T['props'] : In<T>[0]>

And then:

import { Component, ReactNode } from 'react'
import epitath, { RenderProps } from 'epitath'

declare const Foo: (props: FooProps) => ReactNode
declare type FooProps = {
  children?: (value: { a: number }) => ReactNode

declare class Bar extends Component<BarProps> {}
declare type BarProps = {
  children?: (value: { b: number }) => ReactNode

const App = epitath(function* () {
  const { a }: RenderProps<typeof Foo> = yield <Foo />
  const { b }: RenderProps<Bar> = yield <Bar />
  return a + b

Example: (note: CodeSandbox is using TS 2.7 so not exactly a working example right now)

williambomancommented, Oct 26, 2018

Just to share my config which works so-and-so (having typing issues with yielded elements not having an explicit children prop)

declare module "epitath" {
    import * as React from "react"

    const epitath: <P extends {}>(
        Component: (props: P) => IterableIterator<React.ReactElement<any>>
    ) => React.ComponentType<P>

    export default epitath

// interface Props { foo: string }
// Usage: const FooComponent = epitath<Props>(function* ({ foo }) { ... })
Read more comments on GitHub >

github_iconTop Results From Across the Web

TypeScript: JavaScript With Syntax For Types.
TypeScript extends JavaScript by adding types to the language. TypeScript speeds up your development experience by catching errors and providing fixes ...
Read more >
TypeScript - Wikipedia
TypeScript supports definition files that can contain type information of existing JavaScript libraries, much like C++ header files can describe the ...
Read more >
TypeScript Programming with Visual Studio Code
Visual Studio Code includes TypeScript language support but does not include the TypeScript compiler, tsc . You will need to install the TypeScript...
Read more >
TypeScript | WebStorm Documentation - JetBrains
WebStorm supports developing, running, and debugging TypeScript source code. ... Learn more from Compiling TypeScript into JavaScript.
Read more >
TypeScript support in Svelte - Learn web development
First-class TypeScript support has been Svelte's most requested feature for quite some time. Thanks to the hard work of the Svelte team, ...
Read more >

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found