Using TypeScript
How to use Lume with 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 --unstable -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>
);
};