---
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":"TechArticle","@id":"https://developers.cloudflare.com/pages/functions/typescript/#page","headline":"TypeScript · Cloudflare Pages docs","description":"Author Pages Functions in TypeScript and configure type generation with Wrangler.","url":"https://developers.cloudflare.com/pages/functions/typescript/","inLanguage":"en","image":"https://developers.cloudflare.com/dev-products-preview.png","dateModified":"2026-04-21","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
{"@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"}}]}
```