使用 TypeScript

Lume 构建于 Deno 之上，因此原生支持 TypeScript，并为核心功能和插件提供了内置类型。它还会创建 deno.json 文件，使用 compilerOptions.types 数组导入 Lume 类型。

{
  "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"
    ]
  }
}

lume/types.ts 文件暴露了全局命名空间 Lume，你可以在你的 TypeScript 文件中使用它。

TSX 页面

要使用 TSX 创建页面和布局，你可以使用 Lume 的 JSX (React) 或 JSX Preact (Preact) 插件。

模板中的 TypeScript

Lume 全局命名空间拥有 Lume.Data 和 Lume.Helpers 接口，你可以在你的页面中使用它们。例如：

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

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

或者使用你自己的类型扩展接口，例如：

// Your own interface
interface MyData {
  description?: string;
}

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

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