---
title: TypeScript
description: Author Pages Functions in TypeScript and configure type generation with Wrangler.
image: https://developers.cloudflare.com/dev-products-preview.png
---

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/pages/llms.txt  
> Use this file to discover all available pages before exploring further.

[Skip to content](#%5Ftop) 

# TypeScript

Pages Functions supports TypeScript. Author any files in your `/functions` directory with a `.ts` extension instead of a `.js` extension to start using TypeScript.

You can add runtime types and Env types by running:

 npm  yarn  pnpm 

```
npx wrangler types --path='./functions/types.d.ts'
```

```
yarn wrangler types --path='./functions/types.d.ts'
```

```
pnpm wrangler types --path='./functions/types.d.ts'
```

Then configure the types by creating a `functions/tsconfig.json` file:

```

{

  "compilerOptions": {

    "target": "esnext",

    "module": "esnext",

    "lib": ["esnext"],

    "types": ["./types.d.ts"]

  }

}


```

See [the wrangler types command docs](https://developers.cloudflare.com/workers/wrangler/commands/general/#types) for more details.

If you already have a `tsconfig.json` at the root of your project, you may wish to explicitly exclude the `/functions` directory to avoid conflicts. To exclude the `/functions` directory:

```

{

  "include": ["src/**/*"],

  "exclude": ["functions/**/*"],

  "compilerOptions": {}

}


```

Pages Functions can be typed using the `PagesFunction` type. This type accepts an `Env` parameter. The `Env` type should have been generated by `wrangler types` and can be found at the top of `types.d.ts`.

Alternatively, you can define the `Env` type manually. For example:

TypeScript

```

interface Env {

  KV: KVNamespace;

}


export const onRequest: PagesFunction<Env> = async (context) => {

  const value = await context.env.KV.get("example");

  return new Response(value);

};


```

If you are using `nodejs_compat`, make sure you have installed `@types/node` and updated your `tsconfig.json`.

```

{

  "compilerOptions": {

    "target": "esnext",

    "module": "esnext",

    "lib": ["esnext"],

    "types": ["./types.d.ts", "node"]

  }

}


```

Note

If you were previously using `@cloudflare/workers-types` instead of the runtime types generated by `wrangler types`, you can refer to this [migration guide](https://developers.cloudflare.com/workers/languages/typescript/#migrating).

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/pages/","name":"Pages"}},{"@type":"ListItem","position":3,"item":{"@id":"/pages/functions/","name":"Functions"}},{"@type":"ListItem","position":4,"item":{"@id":"/pages/functions/typescript/","name":"TypeScript"}}]}
```