---
title: Typescript
description: An overview of Houdini's support for Typescript
---

# Typescript

Houdini is written in typescript and will generate types for all of your documents and special functions you define for houdini.

## Configuration

In order to setup your project to take full advantage of Houdini's generated types, you need to change your tsconfig file to look like the following:

```json
{
	"compilerOptions": {
		"rootDirs": [".", "./.svelte-kit/types", "./$houdini/types"]
	}
}
```

## Global Types

There are 3 different types that Houdini defines globally. It is useful to extend these values to fit your
needs (for example, to get help filling out your session information):

```typescript
declare namespace App {
    // user-specific information passed to each query
    interface Session {
        user?: {
            token: string;
        };
    }

    // used to thread information between plugins
    interface Stuff {}

    // used to pass one-off configuration for a request
    interface Metadata {
        doTheThing?: boolean | null;
    }
}

```

## Queries

When working with Houdini's [generated load functions](/api/query#automatic-loading) (whether in a route or component), you can import type definition for your variable functions and hooks from `./$houdini` (a relative import):

```typescript:title=src/routes/myProfile/+page.ts
import { graphql } from '$houdini'
import type { AfterLoadEvent } from './$houdini'

export const _houdini_load = graphql(`
	query MyProfile {
		viewer {
			id
		}
	}
`)

export function _houdini_afterLoad({ data }: AfterLoadEvent) {
	return {
		computedValue: data.MyProfile.viewer.id + '_new'
	}
}
```

Your `PageData` type will also come from `./$houdini` since SvelteKit's generated type definitions don't know about the generated load:

```svelte:title=src/routes/myProfile/+page.svelte -->
<script lang="ts">
	import { PageData } from './$houdini'

	export let data: PageData

	$({ MyProfile } = data)
</script>

{$MyProfile.data.viewer.id}: {data.computedValue}
```

## Inline Stores

If you are working with inline stores, you don't have to provide types when using the `graphql` function:

```typescript
import { graphql } from '$houdini'

const store = graphql(`
	query AllItems {
		items {
			id
			text
		}
	}
`)
```

If you are using `graphql` as a template tag, you will have to provide type signatures explicitly:

```typescript
import { type AllItemsStore, graphql } from '$houdini'

const store: AllItemsStore = graphql`
	query AllItems {
		items {
			id
			text
		}
	}
`
```

## Fragments

To use inline fragments inside your components, you need to receive the parent query as a prop.
Remember to set the type of your fragment by importing it.

```typescript
import { fragment, graphql, type PostContent } from '$houdini'

export let post: PostContent

$: data = fragment(
	post,
	graphql(`
		fragment PostContent on Post {
			content
			tags {
				nodes {
					name
				}
			}
		}
	`)
)
```
