Using TypeScript

Lume is built on top of Deno so it has native support for TypeScript and comes with built-in types for core features and plugins. It also creates the deno.json file importing the Lume types using the compilerOptions.types array.

{
  "imports": {
    "lume/": "https://deno.land/x/lume/"
  },
  "tasks": {
    "lume": "echo \"import 'lume/cli.ts'\" | deno run -A -",
    "build": "deno task lume",
    "serve": "deno task lume -s"
  },
  "compilerOptions": {
    "types": [
      "lume/types.ts"
    ]
  }
}

The lume/types.ts file exposes the global namespace Lume that you can use in your TypeScript files.

TSX pages

To create pages and layouts with TSX, you can either use the Lume JSX (React) or JSX Preact (Preact) plugins.

TypeScript in Templates

Lume global namespace has the Lume.Data and Lume.Helpers interfaces that you can use in your pages. For example:

export default (data: Lume.Data, filters: Lume.Helpers) => {
  const { title, date } = data;

  return (
    <header>
      <h1>{title}</h1>
      <time>{filters.date(date)}</time>
    </header>
  );
};

Or extend the interface with your own types, for example:

// Your own interface
interface MyData {
  description?: string;
}

export default (data: MyData & Lume.Data, filters: Lume.Helpers) => {
  const { title, date, description } = data;

  return (
    <header>
      <h1>{title}</h1>
      <time>{filters.date(date)}</time>
      {description}
    </header>
  );
};