TypeScriptExample コンポーネントは ts-blank-space ↗ を使い、例から TypeScript 固有の構文を除いて JavaScript タブを提供します。保守する例が 1 つで済むため、負担が減ります。
import { TypeScriptExample } from "~/components";
<TypeScriptExample code={{
collapse: "1-2"
}}>
```ts
// comment to demonstrate
// collapsible sections
interface Environment {
KV: KVNamespace;
}
export default {
async fetch(req, env, ctx): Promise<Response> {
if (req !== "POST") {
return new Response("Method Not Allowed", {
status: 405,
headers: {
"Allow": "POST"
}
});
}
await env.KV.put("foo", "bar");
return new Response();
}
} satisfies ExportedHandler<Environment>
```
</TypeScriptExample>type: string
省略可能なファイル名です。末尾は .ts にしてください。
JavaScript タブでは .ts が .js に置き換わります。
type: boolean
true にすると、JavaScript タブに Run Worker in Playground ボタンが表示されます。
type: object
Astro の Code コンポーネント ↗ へ渡すプロパティです。
これらのプロパティは両方のコードブロックに適用されます。TypeScript 側から行が削除されることがあるため、collapse などのオプションは想定どおりに動かない場合があります。