Configure tsconfig for a Krate app and understand the generated types.
#TypeScript Setup
Krate compiles TSX itself (a Go lexer/parser), but you still get full editor types via a standard tsconfig.json plus generated declarations.
#tsconfig.json
The scaffold ships a working config. The essentials:
{
"compilerOptions": {
"target": "ES2020",
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"moduleResolution": "Bundler",
"jsx": "preserve",
"jsxImportSource": "@krate/runtime",
"strict": true,
"noEmit": true,
"skipLibCheck": true,
"esModuleInterop": true,
"baseUrl": ".",
"paths": { "@/*": ["./src/*"] }
},
"include": ["src", ".krate/types", "*.d.ts"]
}Notes:
jsx: "preserve"— Krate's compiler owns JSX transformation;tscis only used to typecheck (hencenoEmit).paths—@/maps tosrc/. The compiler reads the samepathsandbaseUrlfromtsconfig.jsonfor bundling resolution, so they stay in sync.includemust cover.krate/typesso generated route/content types are visible.
#Generated types
krate types (or any build) writes:
| File | Provides |
|---|---|
.krate/types/routes.d.ts | StaticRoute, DynamicRoute, Route, RouteParams |
.krate/types/content.d.ts | Typed entries for configured collections |
.krate/types/*/.krate.d.ts | Go component declarations so import { X } from "./x.go" type-checks |
.krate/gen/content.ts | Build-time content data (getCollection) |
Regenerate after adding pages or content:
krate typesFor Go components, run krate go:init once — it adds .krate/types to your tsconfig include (see Go Components).
See Typed Routes & Content for usage.
#Global JSX types
@krate/runtime provides the global JSX namespace (intrinsics, ARIA, SVG attributes, Krate.TypedRoutes). Ensure your tsconfig resolves it — either via jsxImportSource above or a /// <reference types="@krate/runtime" /> in an ambient .d.ts.
src/krate-env.d.ts (shipped in the scaffold) bridges Krate's globals like Head, Link, Image, and Icon.
#Typechecking in CI
krate types && npx tsc --noEmitAdd this after krate build. It catches type errors the compiler tolerates (Krate drops type annotations rather than validating them).
#Strictness
Keep strict: true. Krate's generated types assume it. If you need looser settings during a migration, scope them per-directory rather than globally.
Last updated: 2026-10-16
Contributors: Noinkin