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.

Getting Started with TypeScript

Running lume init(see installation), you will be asked to use TypeScript:

Use TypeScript for the configuration file? [y/N]

When confirmed, Lume will automatically create a _config.ts file in your project. You're now ready to start creating files using the .ts and .tsx extensions.

JSX Plugins

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

IDE Support

• Using Visual Studio Code, it's highly recommended to install the Deno extension.
• Additionally, configure and enable Deno's built-in code linter.

TypeScript configuration

TypeScript in Deno comes with a lot of different options but works out of the box. If you want to specify compiler options, the recommended way is to use compilerOptions within the projects deno.json or deno.jsonc file.

Go to Overview of TypeScript in Deno for more info. {.tip}

JSX Plugin configuration

We recommend configuring the JSX import source using an import map.

Go to Using an import map for more info about using JSX in Deno. {.tip}

Example configurations

Example configuration using Lume with TypeScript and JSX (React) plugin.

{
  "importMap": "import_map.json",
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "npm:react"
  }
}

Example configuration using Lume with TypeScript and JSX Preact plugin.

{
  "importMap": "import_map.json",
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "npm:preact"
  }
}

TypeScript in Templates

You can import, use and extend Lume's built-in types within your TypeScript files. For the most common use case these are the following interfaces.

// Page specific interfaces
import type { Page, PageData } from "lume/core.ts";

// Helper function specific interface
import type { PageHelpers } from "lume/core.ts";

Go to source code for more info about the PageData interface. {.tip}

Extending Lume's Types

To use custom types with Lume, extend the existing interfaces with custom-defined properties.

import type { Page, PageData } from "lume/core.ts";

// To handle all types in one place, use re-export
export type { PageHelpers } from "lume/core.ts";

// Example interface for `custom.tsx` PageData
export interface CustomPageData extends PageData {
  // Define your own properties
  readingTime?: string;
}

// Create a new interface for `custom.tsx`
export interface CustomPage extends Page {
  data: CustomPageData;
}

Example of using the custom types in your template files.

import type { CustomPageData, PageHelpers } from "./types.ts";

// TypeScript is aware of `readingTime`
export default (
  { children, date, readingTime, title }: CustomPageData, 
  filters: PageHelpers) => {
  return (
    <article>
      <header>
        <h1>{title}</h1>
        <time dateTime={filters.date(date, "DATE")}>
          {filters.date(date, "HUMAN_DATE")}
        </time>
        <span>{readingTime?}</span>
      </header>
      {children}
    </article>
  );
};

To overwrite the default Page | Page[] interface, assign your custom interface when dealing with type Page e.g. search.pages("type=post", "date=desc") as CustomPage[]. {.tip}