TypeScript Academy · บทเรียน

การกำหนดชนิดข้อมูลให้ตัวแปรสภาพแวดล้อม

กำหนดชนิดข้อมูลที่แม่นยำและผ่านการตรวจสอบให้ process.env

การกำหนดชนิดข้อมูลให้ตัวแปรสภาพแวดล้อม เป็นบทเรียน TypeScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน TypeScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส TypeScript Academy มีบทเรียนทั้งหมด 4 บทเรียน

ปัญหาของ process.env

ใน Node ค่า process.env มีประเภทเป็น Record<string, string | undefined> ตัวแปรทุกตัวอาจไม่มีอยู่ และค่าทุกอย่างเป็นสตริง ดังนั้นการเข้าถึงค่าดิบจึงไม่ปลอดภัยและไม่มีการระบุประเภท

ประกาศส่วนติดต่อ Env ที่มีการระบุประเภท

เริ่มด้วยการอธิบายการกำหนดค่าที่แอปของคุณต้องใช้จริงให้เป็นส่วนติดต่อที่แม่นยำ โดยระบุประเภทที่ถูกต้อง รวมถึงฟิลด์ที่จำเป็นและฟิลด์ที่ไม่บังคับ

interface Env {
  PORT: number;
  NODE_ENV: "development" | "production";
  DATABASE_URL: string;
  DEBUG?: boolean; // optional
}

อ่านค่าดิบ

ค่าทั้งหมดเข้ามาในรูปสตริงหรือ undefined คุณต้องอ่านค่าอย่างระมัดระวัง เพราะคีย์เหล่านั้นอาจไม่มีอยู่เลย

const rawPort = process.env.PORT; // string | undefined
const rawEnv = process.env.NODE_ENV; // string | undefined

ตัวแปรที่จำเป็นเทียบกับตัวแปรที่ไม่บังคับ

ตัวแปรบางตัวต้องมีอยู่เพื่อให้แอปทำงาน ส่วนตัวแปรอื่นมีค่าทดแทนที่เหมาะสม ตัวช่วยสำหรับค่าที่จำเป็นจะหยุดทำงานพร้อมแจ้งข้อผิดพลาดอย่างชัดเจนเมื่อขาดตัวแปรใดตัวแปรหนึ่ง

function required(name: string): string {
  const v = process.env[name];
  if (v === undefined) throw new Error("Missing env: " + name);
  return v;
}

แปลงตัวเลข

ตัวแปรตัวเลขต้องผ่านการแปลงและตรวจสอบ เนื่องจาก parseInt อาจให้ค่า NaN ห่อการแปลงไว้เพื่อปฏิเสธข้อมูลนำเข้าที่ไม่ถูกต้องทันที

function num(name: string): number {
  const n = Number(required(name));
  if (Number.isNaN(n)) throw new Error(name + " is not a number");
  return n;
}

แปลงค่าบูลีน

ค่าบูลีนเข้ามาเป็นสตริงอย่าง "true" ให้แปลงค่าอย่างชัดเจน แทนที่จะอาศัยค่าความจริงของสตริงที่ไม่ว่าง

function bool(name: string, def = false): boolean {
  const v = process.env[name];
  if (v === undefined) return def;
  return v === "true" || v === "1";
}

สร้างการกำหนดค่าที่มีการระบุประเภท

รวบรวมค่าที่แปลงแล้วไว้ในออบเจ็กต์เดียวที่ตรงกับส่วนติดต่อ Env จากจุดนี้เป็นต้นไป ส่วนที่เหลือของแอปจะใช้การกำหนดค่าที่มีประเภทและจะไม่ใช้ process.env โดยตรง

const env: Env = {
  PORT: num("PORT"),
  NODE_ENV: required("NODE_ENV") as Env["NODE_ENV"],
  DATABASE_URL: required("DATABASE_URL"),
  DEBUG: bool("DEBUG"),
};

จำกัดยูเนียนของสตริง

สำหรับตัวแปรที่มีชุดค่าที่กำหนดตายตัว ให้ตรวจสอบค่ากับชุดนั้น เพื่อไม่ให้ค่าที่ไม่คาดคิดผ่านเข้ามาในฐานะประเภทลิเทอรัลที่ไม่ถูกต้อง

function oneOf<T extends string>(name: string, allowed: readonly T[]): T {
  const v = required(name) as T;
  if (!allowed.includes(v)) throw new Error(name + " invalid");
  return v;
}

รวมการเข้าถึงไว้ที่เดียว

ส่งออกออบเจ็กต์ env เพียงหนึ่งเดียวจากโมดูลเดียว ผู้ใช้ทุกส่วนจะนำเข้าออบเจ็กต์นี้ ทำให้ได้การระบุประเภทอย่างครบถ้วนและมีจุดเดียวสำหรับแก้ตรรกะการแปลงค่า

export const config = env;
// elsewhere: import { config } from "./config";

เพิ่มประเภทให้ ProcessEnv (ไม่บังคับ)

คุณสามารถประกาศการเพิ่มส่วนของโมดูลสำหรับ NodeJS.ProcessEnv เพื่อระบุประเภทให้การเข้าถึงค่าดิบได้ แต่การใช้ออบเจ็กต์การกำหนดค่าที่ผ่านการแปลงแล้วปลอดภัยกว่า เพราะยังตรวจสอบและแปลงค่าให้ด้วย

// declare global { namespace NodeJS { interface ProcessEnv { PORT: string } } }

เหตุใดออบเจ็กต์การกำหนดค่าที่มีประเภทจึงดีกว่า

การกำหนดค่าที่ผ่านการแปลงและตรวจสอบแล้วให้ประเภทที่ถูกต้อง (ตัวเลข บูลีน และยูเนียน) รับประกันว่าตัวแปรที่จำเป็นมีอยู่ และใช้การนำเข้าเพียงครั้งเดียวสำหรับทั้งแอป แทนการอ่าน process.env อย่างไม่ปลอดภัยกระจัดกระจาย

ตรวจสอบอย่างรวดเร็ว

ตรวจสอบความเข้าใจสั้น ๆ เกี่ยวกับบทเรียนนี้

ทบทวน

ประกาศส่วนติดต่อ Env ที่มีการระบุประเภท จากนั้นแปลง process.env ด้วยตัวช่วยที่แปลงและตรวจสอบค่า (ตัวเลข บูลีน และยูเนียนของสตริง) และหยุดทำงานเมื่อขาดตัวแปรที่จำเป็น ส่งออกออบเจ็กต์ config ที่มีประเภทเพียงหนึ่งเดียว เพื่อไม่ให้แอปแตะต้อง process.env ดิบ

คำถามที่พบบ่อย

บทเรียน “การกำหนดชนิดข้อมูลให้ตัวแปรสภาพแวดล้อม” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การกำหนดชนิดข้อมูลให้ตัวแปรสภาพแวดล้อม” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส TypeScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส TypeScript Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การกำหนดชนิดข้อมูลให้ตัวแปรสภาพแวดล้อม”

กำหนดชนิดข้อมูลที่แม่นยำและผ่านการตรวจสอบให้ process.env คุณปฏิบัติ TypeScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน TypeScript Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน TypeScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน

บทเรียน “การกำหนดชนิดข้อมูลให้ตัวแปรสภาพแวดล้อม” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน TypeScript Academy นี้ได้ไหม

ได้ บทเรียน TypeScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ TypeScript Academy