---
name: Usage with TypeScript
route: /docs/usage-with-typescript
parent: Documentation
menu: General
---

# Using docz with Typescript

To use docz with TypeScript codebase you need to add `typescript: true` to your `doczrc.js`, the rest will be setup by _docz_.

```js
export default {
  typescript: true,
}
```

# Documenting Props in TypeScript

As mentioned in [**Built-in components**](/docs/built-in-components) the `<Props/>`-component is used to automatically document your components props assuming you have the correct comments on your components like below.

```js
interface ButtonProps {
  /**
   * A description of the prop that you seem fit :)
   */
  kind: 'primary' | 'secondary' | 'cancel' | 'dark' | 'gray';
}
```

The typescript parser can be a bit fussy sometimes (and we are working on it) so if your typescript-files are not being found you may have to write out the full path with the file ending. If this doesn't do the trick you can try checking if using `default` exports or `named` exports are the problem.

```js
import { Props } from 'docz'
import Button from './Button.tsx'

// Button Props

;<Props of={Button} />
```

# Advanced configuration

If you have particular needs or need to control exactly which files are being picked up or if you want to tap into the parser that creates the documentation there are two properties on the `doczrc.js` that you can use: `filterComponents` and `docgenConfig` (some use cases explained [here](https://github.com/doczjs/docz/issues/827))

```js
export default {
  filterComponents: files =>
    //This overrides the default filtering of components
    files.filter(filepath => /[\w-]+.(?:j|t)sx?$/.test(filepath)),
}
```