CODEWITHSUNDEEP
typescriptnext.jstsconfigbunhono
charlietlamb
charlietlamb

Reputation: 131

Typescript inferring type incorrectly - importing as alias and defaulting to any

I'm building a monorepo using Nextjs for the frontend and bun & hono for the backend. I'm trying to use hono rpc: https://hono.dev/docs/guides/rpc. I'm exporting the type of my router like this in my app.ts file in my backend project:

import createApp from '@/lib/create-app'
import configureOpenAPI from '@/lib/configure-open-api'
import index from '@/routes/index.route'
import users from '@/routes/user/user.index'
import connects from '@/routes/connects/connects.index'

const app = createApp()

const routes = [index, users, connects] as const

configureOpenAPI(app)

routes.forEach((route) => {
  app.route('/', route)
})

export default app

export type AppType = (typeof routes)[number]

and then trying to import it in my frontend project in my client.ts file

import type { AppType } from '../backend/src/app'
import { hc } from 'hono/client'

const client = hc<AppType>('http://localhost:8000')

export default client

This isn't working and my Type is being inferred as any. When I hover over app type in app.ts in my backend - I see this type

type AppType = OpenAPIHono<AppBindings, {
    "/": {
        $get: {
            input: {};
            output: {
                message: string;
            };
            outputFormat: "json" | "text";
            status: 200;
        };
    };
}, "/"> | OpenAPIHono<AppBindings, {
    ...;
}, "/"> | OpenAPIHono<...>

It 100% has the right type.

When I hover over AppType in client.ts however I see this:

(alias) type AppType = any
import AppType

How can I fix this issue:

Repo to see for yourself + all tsconfigs: https://github.com/charlietlamb/postpad

Thank you for the help!

Upvotes: 2

Views: 317

Answers (2)

laurent lahmy
laurent lahmy

Reputation: 1689

This happens when using paths in typscript (the @ shortcut).

front end (where AppType is imported): add "references": [{ "path": "../back" }] (back is the name of my folder containing the backend where AppType is exported).

turborepo/apps/front/tsconfig.app.json (could be tsconfig.json for you)

{
  "compilerOptions": {
    "target": "ES2020",
     ...
     "paths": {
       "@/*": ["./src/*"]
    }
  },
  "include": ["src"],
  "references": [{ "path": "../back" }]
}

backend (where AppType is defined and exported) tsconfig.json: add "composite": true to compiler options

turborepo/apps/back/tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",
    ...
    "paths": {
      "@/*": ["./src/*"]
    },
    "composite": true
  }
}

More info here:

https://github.com/honojs/hono/issues/3109 https://github.com/honojs/hono/issues/3109#issuecomment-2222892161

https://www.typescriptlang.org/docs/handbook/project-references.html

Upvotes: 1

charlietlamb
charlietlamb

Reputation: 131

Finally answered this - needed to add

"references": [
        { "path": "../backend/tsconfig.json" }
    ],

to my backend and

"composite" : true

in my frontend

https://www.youtube.com/watch?v=S-jj_tifHl4

Upvotes: 3

Related Questions