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.

Lume 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.

Go to Overview of TypeScript in Deno for more info.

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 in Templates

Example of using the custom types in your template files.

interface CustomPageData extends Lume.PageData {
  // Define your own properties
  readingTime?: string;
}

export default (
  { children, date, readingTime, title }: CustomPageData, 
  filters: Lume.PageFilters
  ) => {
  return (
    <article>
      <header>
        <h1>{title}</h1>
        <time dateTime={filters.date(date, "DATE")}>
          {filters.date(date, "HUMAN_DATE")}
        </time>
        <span>{readingTime?}</span>
      </header>
      {children}
    </article>
  );
};