”工欲善其事,必先利其器。“—孔子《论语.录灵公》
首页 > 编程 > 为什么应该始终向环境变量添加类型安全?

为什么应该始终向环境变量添加类型安全?

发布于2024-11-08
浏览:424

一点背景

如果您已经编码了一段时间,您就会知道环境变量的重要性及其所扮演的角色,以及找出由于项目中未设置该死的环境变量而导致的错误的痛苦, 哈哈!

今年早些时候,我在一家基于产品的初创公司担任全栈开发人员实习生。随着项目的增长,环境变量的数量也随之增加。而且,每个人都在不同的分支上开发不同的功能,所以我们不知道是否有人在他们的分支中引入了一些新的环境变量,这些变量后来被合并到主分支中。当我尝试部署我的分支时,这产生了问题,我知道一个新的环境变量已添加到项目中。

然后,后来我接触到了 T3 堆栈,它有一个出色的解决方案,可以为环境变量添加类型安全。我什至不知道存在这样的解决方案。在你最意想不到的时候学习新东西总是感觉很好。 T3 堆栈使用 zod 和 @t3-oss/env-nextjs 包为您的应用程序添加类型安全性,我非常喜欢。之后,我承诺无论如何都会保证我的环境变量的类型安全。

如果您正在开始一个新项目,或者已经在团队中工作,我强烈建议您向您的环境添加类型安全。仅添加此内容将节省您解决代码库中问题的精力。

以下是如何将其添加到您的项目中的方法。很简单。

佐德是什么?

Zod 是一个轻量级、快速的模式声明和验证库。架构可以是从简单字符串、数字到复杂对象类型的任何内容。

基本用法

import {z} from 'zod';

const myBoolean = z.boolean();

myBoolean.parse('true'); // throws error
myBoolean.parse(true) // valid

创建嵌套对象架构

import { z } from 'zod';

const userSchema = z.object({
    name: z.string(),
    age: z.number(),
    address: z.object({
        house_no: z.string(),
        locality: z.string(),
        city: z.string(),
        state: z.string(),
    })
});

您可以创建简单的对象架构或创建嵌套对象架构。

什么是 t3-oss/env-nextjs?

它只是一个包,它将帮助我们为环境变量添加类型安全性

让我们创建类型安全的环境变量

在项目的根目录创建一个 env.js 文件。

import {createEnv} from "@t3-oss/env-nextjs"; import {z} from "zod";

export const env = createEnv({
  /*
   * Serverside Environment variables, not available on the client.
   * Will throw if you access these variables on the client.
   */
  server: {
    DB_URI: z.string().url(),
  },
  /*
   * Environment variables available on the client (and server).
   *
   * You'll get type errors if these are not prefixed with NEXT_PUBLIC_.
   */
  client: {
    NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: z.string().min(1),
  },
  /*
   * Due to how Next.js bundles environment variables on Edge and Client,
   * we need to manually destructure them to make sure all are included in bundle.
   *
   * You'll get type errors if not all variables from `server` & `client` are included here.
   */
  runtimeEnv: {
    DB_URI: process.env.DATABASE_URL,
    NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY:
      process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY,
  },
});

用法

import {env} from '@/env';

const CLERK_PUBLISHABLE_KEY = env.NEXT_PUBLISHABLE_KEY;

如果将光标悬停在 NEXT_PUBLISHABLE_KEY 上方,您可以看到该值被输入为字符串,这意味着我们的环境变量现在已输入。

我们添加了类型安全的环境变量,但这不会在每次构建时运行。我们必须将新创建的文件导入到 next.config.js 文件中。您可以使用 unjs/jiti 包。

首先,从 npm 安装 jiti pacakge。

import { fileURLToPath } from "node:url";
import createJiti from "jiti";
const jiti = createJiti(fileURLToPath(import.meta.url));

jiti("./app/env");

使用 import.meta.url 时,它提供您当前正在使用的文件的 URL。但是,它包含您可能不想要的 file:/// 前缀。要删除该前缀,您可以使用 node:url 模块中的 fileURLToPath 函数。

例如:

import {fileURLToPath} from 'node:url';

// Convert the file URL to a path
const filename = fileURLToPath(import.meta.url);

现在,如果您没有所需的环境变量,您将看到这样的错误 -

Why you should always add type safety to your environment variables?

如何为 Node.js 项目中的环境变量添加类型安全?

import dotenv from "dotenv";
import { z } from "zod";

dotenv.config();

const schema = z.object({
  MONGO_URI: z.string(),
  PORT: z.coerce.number(),
  JWT_SECRET: z.string(),
  NODE_ENV: z
    .enum(["development", "production", "test"])
    .default("development"),
});

const parsed = schema.safeParse(process.env);

if (!parsed.success) {
  console.error(
    "❌ Invalid environment variables:",
    JSON.stringify(parsed.error.format(), null, 4)
  );
  process.exit(1);
}

export default parsed.data;

在 Node.js 项目中,我们将简单地创建一个 zod 模式并根据 process.env 解析它,以检查是否设置了所有 env 变量。

用法

import express from "express";
import env from "./env";

const app = express();
const PORT = env.PORT || 5000; // PORT is type safe here....

app.listen(PORT, () => {
console.log("Connected to server on PORT ${PORT}");
connectDB();
});

这就是为环境变量添加类型安全的方法。我希望您在本教程中学到一些新东西。

快乐编码! ?

版本声明 本文转载于:https://dev.to/shaancodes/why-you-should-always-add-type-safety-to-your-environment-variables-24lk?1如有侵犯,请联系[email protected]删除
最新教程 更多>
  • 如何在 PHP 中异步执行 cURL 请求?
    如何在 PHP 中异步执行 cURL 请求?
    PHP中的异步Curl请求在PHP中异步执行curl post请求可以提高性能并防止潜在的延迟。以下是如何使用不同的方法实现此目的:使用异步 cURL 函数使用curl_multi_*时,您可以同时执行多个 cURL 请求。下面是一个示例代码:$curl = curl_init($request);...
    编程 发布于2024-11-08
  • 如何将 Boehm 垃圾收集器与 C++ 标准库类(如“std::vector”和“std::string”)集成?
    如何将 Boehm 垃圾收集器与 C++ 标准库类(如“std::vector”和“std::string”)集成?
    将 Boehm 垃圾收集器与 C 标准库结合使用开发多线程 C 应用程序时,Boehm 保守的垃圾收集器对于简化内存非常有用管理。这就提出了如何将 Boehm GC 与 C 标准库的类(如 std::map 和 std::vector)集成的问题。一种方法涉及重新定义全局运算符 ::new 以使用 ...
    编程 发布于2024-11-08
  • 如何在 PHP 中通过 SSH 安全连接到远程 MySQL 服务器?
    如何在 PHP 中通过 SSH 安全连接到远程 MySQL 服务器?
    在 PHP 中通过 SSH 安全连接到远程 MySQL 服务器要为 PHP 数据库连接建立安全隧道,以下 SSH 隧道解决方案提供了一种强大的方法。SSH 隧道设置创建一个通往 MySQL 数据库服务器的 SSH 隧道。为此,请使用如下命令:ssh -fNg -L 3307:10.3.1.55:33...
    编程 发布于2024-11-08
  • 混淆技术真的可以保护可执行文件免受逆向工程的影响吗?
    混淆技术真的可以保护可执行文件免受逆向工程的影响吗?
    保护可执行文件免遭逆向工程:解决方案有限的挑战保护代码免遭未经授权的逆向工程是开发人员持续关注的问题,尤其是当它包含敏感信息。虽然已经提出了各种方法,但重要的是要承认完全防止逆向工程实际上是不可能的。常见混淆技术用户建议的策略,例如代码注入、混淆和自定义启动例程的目的是使反汇编变得不那么简单。然而,...
    编程 发布于2024-11-08
  • 掌握 Laravel 中的 Eloquent where 条件
    掌握 Laravel 中的 Eloquent where 条件
    Laravel 的 Eloquent ORM(对象关系映射)是其突出的功能之一,提供了一种与数据库交互的强大而富有表现力的方式。 Eloquent 提供的一项基本功能是方法,它允许开发人员高效、直观地过滤查询。在本文中,我们将深入研究 where 条件,探索其各种形式和实际用例。 ...
    编程 发布于2024-11-08
  • 在 Gmail 的 Chrome 12+ 更新中如何从剪贴板粘贴图像?
    在 Gmail 的 Chrome 12+ 更新中如何从剪贴板粘贴图像?
    将剪贴板中的图像粘贴到 Gmail:Chrome 12 中的操作方法 Google 宣布能够将剪贴板中的图像直接粘贴到 Gmail使用 Chrome 12 的 Gmail 引发了人们对其底层机制的好奇。尽管使用了最新的 Chrome 版本,一些用户仍然无法找到有关如何在 Webkit 中实现此增强功...
    编程 发布于2024-11-08
  • JavaScript 演示场景竞赛 - JS 版
    JavaScript 演示场景竞赛 - JS 版
    JS1024 于 2024 年回归! 准备好迎接激动人心的挑战! JS1024 回归,通过在 JavaScript、HTML 或 GLSL 中创建令人惊叹的演示(全部在 1024 字节限制内),将开发人员推向极限。无论您是经验丰富的编码员还是新手,这都是您展示创造力和技术技能的机会...
    编程 发布于2024-11-08
  • 第九届 TCmeeting 的更新
    第九届 TCmeeting 的更新
    议程上有几个项目,本文重点介绍第 104 次 TC39 会议 [2024 年 10 月 8 日至 10 日] 的功能提案及其进展。 第一阶段: 表示度量:建议在 JavaScript 中使用适当的单位格式化和表示度量。 Immutable ArrayBuffers:添加 ArrayB...
    编程 发布于2024-11-08
  • 如何使用 CSS 在图像地图上实现鼠标悬停效果?
    如何使用 CSS 在图像地图上实现鼠标悬停效果?
    使用 CSS 设置图像地图鼠标悬停样式创建交互式网页时,通常需要包含具有可单击区域的图像。通常,这是使用图像映射来实现的。然而,事实证明,在鼠标悬停时设置这些区域的样式以提供额外的交互性是难以实现的。过去,尝试使用 CSS 设置这些区域的样式所取得的成功有限,如提供的示例所示:<img src...
    编程 发布于2024-11-08
  • 升级您的前端游戏:无头和静态未来的学习框架
    升级您的前端游戏:无头和静态未来的学习框架
    前端领域正在以惊人的速度发展。忘掉笨重、单一的网站吧——未来属于无头 CMS 和静态网站生成器 (SSG)。这些时尚的强大功能提供了无与伦比的速度、灵活性和安全性,但征服它们需要使用正确的工具。 为了利用他们的力量,开发人员正在转向 Next.js 和 Gatsby,这两个尖端的前端框架塑造了我们...
    编程 发布于2024-11-08
  • 如何修复 PyGame 动画闪烁:故障排除和解决方案
    如何修复 PyGame 动画闪烁:故障排除和解决方案
    PyGame 动画闪烁:故障排除和解决方案运行 PyGame 程序时,您可能会遇到动画闪烁的问题。这可能会令人沮丧,特别是如果您不熟悉使用该框架。PyGame 中动画闪烁的根本原因通常是多次调用 pygame.display.update()。不应在应用程序循环中的多个点更新显示,而应仅在循环结束时...
    编程 发布于2024-11-08
  • JavaScript 中的声明式编程与命令式编程
    JavaScript 中的声明式编程与命令式编程
    当谈到编程方法时,经常会出现两种常见的方法:声明式编程和命令式编程。每个都有其优点和理想的用例,尤其是在 JavaScript 中。让我们通过一些例子来探讨这两种风格。 命令式编程:告诉计算机如何做 命令式编程就像给出一组详细的指令。你告诉计算机如何一步步达到特定的结果。将其视为指导...
    编程 发布于2024-11-08
  • 掌握 NestJS 中的数据验证:类验证器和类转换器的完整指南
    掌握 NestJS 中的数据验证:类验证器和类转换器的完整指南
    Introduction In the fast-paced world of development, data integrity and reliability are paramount. Robust data validation and efficient handl...
    编程 发布于2024-11-08
  • 有多少 Python 包的版本控制正确?
    有多少 Python 包的版本控制正确?
    前几天,当我研究Python包中的漏洞数据库时,我意识到其中的一些包版本无法轻松解析并与其他版本字符串进行比较,因为它们不遵守Python 版本控制 - 旧的 PEP 440 或取代它的版本说明符规范。所以我开始想知道这种情况有多普遍。 Python 包索引上有多少包实际上具有有效版本? 显而易见的...
    编程 发布于2024-11-08
  • 如何在 Web 应用程序中有效地对 Ajax 请求进行排序?
    如何在 Web 应用程序中有效地对 Ajax 请求进行排序?
    排序 Ajax 请求在许多 Web 应用程序中,通常会遇到需要迭代集合并对每个元素发出 Ajax 请求的情况。虽然利用异步请求来避免浏览器冻结很诱人,但有效管理这些请求可以防止服务器过载和其他潜在问题。jQuery 1.5 对于 jQuery 1.5 及更高版本,$. ajaxQueue() 插件提...
    编程 发布于2024-11-08

免责声明: 提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发到邮箱:[email protected] 我们会第一时间内为您处理。

Copyright© 2022 湘ICP备2022001581号-3