include "types": ["bun-types"] in tsconfig.json for TS Vite projects

[pinkboid]

What is the problem this feature would solve?

Currently, when you create a vite project using bun create vite and select TypeScript, it does not include "bun-types" in the "types" field in the auto-generated tsconfig.json. Attempts to reference Bun.argv or 'bun:test' give ts alerts. Fixing this requires manually adding "types": ["bun-types"], which is one extra step I'd like to not have to do to get a TS Bun project running out of the box. But, maybe the philosophy here is that we should not assume developers will ever use bun variables, keeping them as an opt-in, which I can respect as well.

What is the feature you are proposing to solve the problem?

include the the line "types": ["bun-types"] inside "compilerOptions"in the default tsconfig.json on bun based typescript project templates like Vite.

What alternatives have you considered?

No response

[maxmilton]

AFAIK running bun create vite will just run https://github.com/vitejs/vite/tree/main/packages/create-vite and has nothing to do with this repo. Perhaps open an issue over there for better bun handling in vite *-ts templates.

[protyze]

Adding "types": ["bun-types"] to tsconfig.json – while needed for things like bun:test – causes issues with browser globals like "document" (and others) used for example in react applications and vite.js.

How would you configure typescript in a mixed project with vite.js and the bun test runner?

I currently have a tsconfig.json in the project root:

{
  "compilerOptions": {
    "target": "esnext",
    "useDefineForClassFields": true,
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "noFallthroughCasesInSwitch": true
  },
  "include": ["./src"],
  "exclude": ["**/*.test.ts", "**/*.spec.ts", "**/*.test.tsx", "**/*.spec.tsx"]
}

…and a tsconfig.test.json:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "types": ["bun-types"]
  },
  "include": ["**/*.test.ts", "**/*.spec.ts", "**/*.test.tsx", "**/*.spec.tsx"]
}

While this seems to work when running vite bunx --bun vite and the test runner bun test – VS Code gets confused with it and doesn't respect the tsconfig.test.json file at all.

How would you set that up correctly?

[protyze]

So, here is how I fixed it for me:

tsconfig.json in vite.js project root (including bun-types):

{
  "compilerOptions": {
    "target": "esnext",
    "useDefineForClassFields": true,
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "noFallthroughCasesInSwitch": true,
    "types": ["bun-types"]
  },
  "include": ["./src"]
}

And then added a globals.d.ts file to ./src with the following content:

/// <reference lib="dom" />
/// <reference lib="dom.iterable" />

This way, both the bun-types and browser types are correctly recognized by typescript.