TIP

@kubb/parser-ts ships with Kubb and runs by default. Install it on its own only when you set a custom parsers list or add other parsers next to it.

@kubb/parser-ts takes the FileNode your plugins stage and prints it as TypeScript source with the official TypeScript compiler. It resolves import paths, writes the import and export statements, prints JSDoc, and rewrites import extensions based on output.extension.

The package exports two parsers:

• parserTs handles .ts and .js files.
• parserTsx handles .tsx and .jsx files. Use it for React projects so JSX in generated components is preserved.

Installation

bun

bun add -d @kubb/parser-ts@beta

pnpm

pnpm add -D @kubb/parser-ts@beta

npm

npm install --save-dev @kubb/parser-ts@beta

yarn

yarn add -D @kubb/parser-ts@beta

Import extensions

The parser takes no options of its own. You add it to the parsers list as-is. To change the extension written into generated imports, set output.extension on defineConfig. The parser reads that map and rewrites each import path.

For example, output.extension: { '.ts': '.js' } turns import { Pet } from './Pet' into import { Pet } from './Pet.js'. Node's ESM resolver expects that .js suffix.

kubb.config.ts

import { defineConfig } from 'kubb'
import { adapterOas } from '@kubb/adapter-oas'
import { parserTs } from '@kubb/parser-ts'

export default defineConfig({
  input: { path: './petStore.yaml' },
  output: { path: './src/gen', extension: { '.ts': '.js' } },
  adapter: adapterOas(),
  parsers: [parserTs],
  plugins: [],
})

Generated import

import type { Pet } from './Pet.js'

Example

TypeScript (default)

import { defineConfig } from 'kubb'
import { adapterOas } from '@kubb/adapter-oas'
import { parserTs } from '@kubb/parser-ts'

export default defineConfig({
  input: { path: './petStore.yaml' },
  output: { path: './src/gen' },
  adapter: adapterOas(),
  parsers: [parserTs],
  plugins: [],
})

TSX (React)

import {  } from 'kubb'
import {  } from '@kubb/adapter-oas'
import {  } from '@kubb/parser-ts'

export default ({
  : { : './petStore.yaml' },
  : { : './src/gen' },
  : (),
  : [],
  : [],
})

See Also

• Changelog