如何在Astro Build中定义类型安全的自定义配置与常量？

当然可以在Astro配置文件中添加自定义配置项，并且能在页面/组件中安全访问，以下是具体实现步骤：

1. 在Astro配置文件中添加自定义字段 #

直接在astro.config.mjs（或.ts）的defineConfig对象中添加你的自定义配置项：

import { defineConfig } from 'astro/config';

export default defineConfig({
  // 原有默认配置
  site: 'https://your-domain.com',
  // 自定义站点配置
  siteTitle: '我的Astro站点',
  siteDescription: '基于Astro构建的高性能静态站点',
  analyticsId: 'G-ABC123XYZ',
  enableBlackFridayDeals: true,
  employeeIdOfTheMonth: 'EMP-202405'
});

2. 在页面/组件中访问自定义配置 #

通过全局的Astro.config对象即可获取这些配置值：

在Astro页面（.astro文件）中使用 #

---
// 在脚本段解构获取配置
const { siteTitle, siteDescription, enableBlackFridayDeals } = Astro.config;
---

<html>
  <head>
    <title>{siteTitle}</title>
    <meta name="description" content={siteDescription} />
  </head>
  <body>
    <h1>欢迎来到{siteTitle}</h1>
    {/* 根据配置开关渲染内容 */}
    {enableBlackFridayDeals && (
      <div class="deal-banner">黑五限时特惠，全场8折！</div>
    )}
    <p>本月明星员工ID：{Astro.config.employeeIdOfTheMonth}</p>
  </body>
</html>

在框架组件（React/Vue等）中使用 #

导入Astro对象后直接访问配置：

// React组件示例
import { Astro } from 'astro';

export default function AnalyticsScript() {
  return (
    <script
      async
      src={`https://www.googletagmanager.com/gtag/js?id=${Astro.config.analyticsId}`}
    />
  );
}

3. 实现类型安全（TypeScript支持） #

如果使用TypeScript，需要扩展Astro的配置类型来获得类型提示和检查：

在项目的src/env.d.ts文件中添加类型声明（如果没有该文件则新建）：

import type { AstroConfig } from 'astro';

declare module 'astro' {
  interface AstroConfig {
    siteTitle: string;
    siteDescription: string;
    analyticsId: string;
    enableBlackFridayDeals: boolean;
    employeeIdOfTheMonth: string;
  }
}

之后在使用Astro.config时，TypeScript会自动校验字段类型和拼写，避免出错。

注意事项 #

• 这种方式适合非敏感的站点配置，比如站点标题、公开的开关等；敏感信息（如API密钥）仍建议使用环境变量（.env文件）管理。
• 自定义配置会被打包到客户端代码中，因此不要在这里存放敏感数据。

内容的提问来源于stack exchange，提问作者Marcel Overdijk