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. The file deno.json includes the Lume types in the compilerOptions.types array.

{
  "imports": {
    "lume/": "https://cdn.jsdelivr.net/gh/lumeland/lume@3.2.2/"
  },
  "tasks": {
    "lume": "deno run lume/cli.ts",
    "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 use the Lume JSX plugin and configure the deno.json file:

{
  "imports": {
    "lume/jsx-runtime": "https://cdn.jsdelivr.net/gh/oscarotero/ssx@0.1.14/jsx-runtime.ts"
  },
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "lume"
  }
}

TypeScript in Templates

The 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>
  );
};

You can also extend the interface with your own types, for example:

// Custom interface to extend Lume.Data
interface MyData extends Lume.Data {
  description?: string;
}

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

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