TypeScript

Pages Functions は TypeScript に対応しています。/functions ディレクトリのファイルを .js ではなく .ts 拡張子で書くと、TypeScript を使い始められます。

ランタイム型と Env 型は、次のコマンドで追加できます。

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

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

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

次に、functions/tsconfig.json ファイルを作成して型を設定します。

{
	"compilerOptions": {
		"target": "esnext",
		"module": "esnext",
		"lib": ["esnext"],
		"types": ["./types.d.ts"]
	}
}

詳細は wrangler types コマンドのドキュメントを参照してください。

プロジェクトのルートにすでに tsconfig.json がある場合は、競合を避けるために /functions ディレクトリを明示的に除外できます。/functions ディレクトリを除外するには、次のようにします。

{
	"include": ["src/**/*"],
	"exclude": ["functions/**/*"],
	"compilerOptions": {}
}

Pages Functions は PagesFunction 型で型付けできます。この型は Env パラメーターを受け取ります。Env 型は wrangler types で生成され、types.d.ts の先頭にあります。

代わりに、Env 型を手動で定義することもできます。例:

interface Env {
	KV: KVNamespace;
}

export const onRequest: PagesFunction<Env> = async (context) => {
	const value = await context.env.KV.get("example");
	return new Response(value);
};

nodejs_compat を使っている場合は、@types/node をインストールし、tsconfig.json を更新してください。

{
	"compilerOptions": {
		"target": "esnext",
		"module": "esnext",
		"lib": ["esnext"],
		"types": ["./types.d.ts", "node"]
	}
}