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, and Kubb selects one by the file extension a plugin writes:

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

Neither parser takes configuration options. You pick the behavior by choosing which parser goes in the parsers array. A custom parsers array replaces the default set (parserTs, parserTsx, parserMd), and files whose extension has no registered parser are written by joining their sources verbatim, so list every parser your plugins need.

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

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: [],
})

TypeScript and TSX (React)

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

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

See also

• Changelog