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.3.1/"
  },
  "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.15/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 additional types, for example:

// Custom interface to extend Lume.Data
interface Post {
  title: string;
  description?: string;
}

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

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

Global data

Extend the Lume.GlobalData interface to provide types for all pages. For example, add the following code to your _config.ts:

declare global {
  namespace Lume {
    export interface GlobalData {
      title: string;
      author: {
        name: string;
        email: string;
      };
    }
  }
}

Now, Lume.Data will have the title and author types everywhere:

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

  return (
    <header>
      <h1>{title}</h1>
      <p>By {author.name} ({author.email})</p>
    </header>
  );
};

Strict types

By default, any undeclared property of Lume.Data has the any type:

export default (data: Lume.Data, filters: Lume.Helpers) => {
  data.foo; // any
};

You can configure Lume to use strict types and apply unknown to all unknown properties. Just add the strict: true property to the Lume.TypeConfig interface:

declare global {
  namespace Lume {
    export interface TypeConfig {
      strict: true;
    }
  }
}

export default (data: Lume.Data, filters: Lume.Helpers) => {
  data.foo; // unknown
};