Weak type inference in JSX leaf nodes leads to unknown types

[EvanBoyle]

Due to limitations in the way that typescript handles JSX type checking, there are a few areas where (1) we are unable to infer types and have to be more explicit about type declarations and (2) typing bottoms out on unknown for the last child element in a workflow.

An example of (2):

export const HNAnalyzerWorkflow = gsx.Component<
  HNAnalyzerWorkflowProps,
  HNAnalyzerWorkflowOutput
>(({ postCount }) => (
  <OpenAIProvider apiKey={process.env.OPENAI_API_KEY}>
    {() => (
      <HNCollector limit={postCount}>
        {(stories) => (
          <AnalyzeHNPosts stories={stories}>
            {({ analyses }) => (
              <TrendAnalyzer analyses={analyses}>
                {(report) => (
                  <PGEditor content={report}>
                    {(editedReport) => (
                      <PGTweetWriter
                        context={editedReport}
                        prompt="Summarize the HN trends in a tweet"
                      >
                        {(tweet) => ({ report: editedReport, tweet })}
                      </PGTweetWriter>
                    )}
                  </PGEditor>
                )}
              </TrendAnalyzer>
            )}
          </AnalyzeHNPosts>
        )}
      </HNCollector>
    )}
  </OpenAIProvider>
));

Every layer of this has strong typing, except for the leaf that returns values to the workflow:

{(tweet) => ({ report: editedReport, tweet })}

Typescript resolves this as an unknown, and doesn't validate that this return matches the HNAnalyzerWorkflowOutput return type that is declared. So if you change the shape of that return, you won't get a compiler error, but could get a runtime error.

Fundamentally, this limitation is due to microsoft/TypeScript#21699

We believe we can improve this by implementing a typescript compiler extension as described here: #100