TypeScript example

TypeScriptExample is used 116 times on 47 pages.

Pages which use TypeScriptExample

TypeScript examples

The TypeScriptExample component uses ts-blank-space ↗ to remove TypeScript-specific syntax from your example and provide a JavaScript tab. This reduces maintenance burden by only having a single example to maintain.

This component is automatically used in the GitHubCode component when the lang is set to ts.

Code blocks are typically configured with options on the opening fence, like so:

```ts collapse={1-2}
// ...
```

These cannot be extracted by TypeScriptExample so they must be moved to the code prop.

<TypeScriptExample code={{
  collapse: "1-2"
}}>
```ts
// ...
```
</TypeScriptExample>

2 collapsed lines
// comment to demonstrate
// collapsible sections

export default {
  async fetch(req, env, ctx) {
    if (req !== "POST") {
      return new Response("Method Not Allowed", {
        status: 405,
        headers: {
          Allow: "POST",
        },
      });
    }

    await env.KV.put("foo", "bar");

    return new Response();
  },
};

2 collapsed lines
// 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>

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>