BUG: RPC types broken when using arrow function with a Promise

[valerii15298]

What version of Hono are you using?

4.12.2

Reproduction

import { Hono } from "hono";
import { hc } from "hono/client";

const app = new Hono().get("/", (c) =>
  Promise.resolve({ hello: "world" }).then((d) => c.json(d)),
);

const api = hc<typeof app>("");

// data has unknown type
const data = await api.index.$get().then((r) => r.json());

But the same code without arrow funcion works:

import { Hono } from "hono";
import { hc } from "hono/client";

const app = new Hono().get("/", (c) => {
  const resp = Promise.resolve({ hello: "world" }).then((d) => c.json(d));
  return resp;
});

const api = hc<typeof app>("");

// data has { hello: string; } type
const data = await api.index.$get().then((r) => r.json());

What is the expected behavior?

Types should be inferred in both cases

What do you see instead?

RPC json response has unknown type

[valerii15298]

Surprisingly this does not work:

import { Hono } from "hono";
import { hc } from "hono/client";

const app = new Hono().get("/", (c) => {
  return Promise.resolve({ hello: "world" }).then((d) => c.json(d));
});

const api = hc<typeof app>("");

// data has unknown type
const data = await api.index.$get().then((r) => r.json());

So just assigning a variable and returning a variable fixes the issue. Interesting TS behavior

[ambergristle]

the issue seems to be with how Promise.then infers response typing. modifying your first example by moving everything into Promise.resolve results in correct inference:

const app = new Hono().get("/", async (c) => {
    return Promise.resolve(c.json({ message: 'hello world' }))
})

adding explicit typing solves the issue, but isn't ideal DX:

const app = new Hono().get("/", async (c) => {
    return Promise.resolve({ message: 'hello world' })
        .then<JSONRespondReturn<{ message: string }, 200>>((v) => c.json(v, 200))
})

basically the promise chaining is resulting in a union if the typing isn't explicit:

const app: Hono<BlankEnv, {
    "/": {
        $get: {
            input: {};
            output: Promise<void>;
            outputFormat: "json";
            status: StatusCode;
        } | {
            input: {};
            output: {};
            outputFormat: string;
            status: StatusCode;
        } | {
            input: {};
            output: {};
            outputFormat: string;
            status: StatusCode;
        };
    };
}, "/", "/">

it might have to do with the fact that Promise.then defaults to returning T

interface Promise<T> {
    then<TResult1 = T, TResult2 = never>(onfulfilled?: ((value: T) => TResult1 | PromiseLike<TResult1>) | undefined | null, onrejected?: ((reason: any) => TResult2 | PromiseLike<TResult2>) | undefined | null): Promise<TResult1 | TResult2>;
}

[yusukebe]

I investigated it deeply.

Hmm. It's exactly unexpected behavior. But fixing it is difficult, and if it is possible, the type definition will be complex. For now, I think leaving as-is and documenting the limitation in the docs is a good choice.

[valerii15298]

Thank you, @yusukebe ! This is indeed very interesting behaviour. I never saw such things earlier in typescript (though yesterday I learned that key order inside object matters for typescript 😅)

If you will at some point blog about it or share your investigation I would be very curious to read it!

I thought it could be fixed somehow with Awaited type utility but seems it’s not that simple.

[yusukebe]

@valerii15298

Yeah, interesting behavior. This is like a bug, but we can say it is a limitation of TypeScript. So, I added an "enhancement" label for now.

[mahmoodhamdi]

Ran into a related issue while building an RPC client. The root cause seems to be TypeScript's type narrowing with arrow functions - when using the concise arrow syntax ((c) => expr), TS can't always narrow the return type through .then() chains.

A practical workaround until this is fixed at the type level:

const app = new Hono().get("/", async (c) => {
  const d = await Promise.resolve({ hello: "world" });
  return c.json(d);
});

Using async/await instead of .then() preserves the return type correctly. It also makes the handler easier to read.