Můžete vytvořit soubor definice typu, který rozšíří jmenný prostor NodeJS, aby umožnil automatické dokončování pro vaši konfiguraci env. To je docela užitečné, pokud plánujete snížit množství času stráveného vyhledáváním .env soubor:

Zkontrolujte spodní část pro řešení. Pro tuto chvíli se vraťme trochu zpět. Poprvé jsem o tomto problému přemýšlel, když jsem zjistil, že process.env.NODE_ENV je zadaný a má dokončení kódu, zatímco druhý ne:

Tuto informaci jsem měl v hlavě od chvíle, kdy jsem ji poprvé viděl kolem roku 2017. Nikdy jsem se jí však příliš nezabýval, protože tehdy jsem nepotřeboval využívat proměnnou prostředí na straně klienta.

Ve společnosti Plasmo jsme se rozhodli využít prostředí na straně klienta k přepínání mezi koncovými body stagingu a produkce. Zpočátku se 2 proměnnými to šlo zvládnout. Ale když toto číslo vzrostlo na 13, začalo být trochu otravné vyhledávat soubor .env, protože názvy proměnných jsou stále delší. Tuto nepříjemnost lze chvíli tolerovat, protože jsme se soustředili na náš produkt. Nicméně vzadu v mé mysli byla silná touha tuto „chybu“ rozdrtit.

Velkou výhodou použití TypeScriptu je, že refaktorování je hračka a to je klíč k rychlému postupu – začněte s jedním souborem, zvětšete jej na 300 loc, pak jej rozdělte do několika souborů, opakujte opláchnutí. To platí i pro naši definici typu, jako je použití jediného .d (definice) popisující jak naše typování API, tak i psaní motivu, se stává spletitým. Rozhodli jsme se tedy konečně rozdělit naše psaní do těchto úhledných souborů:

Konečně mohu nabídnout našich starých dobrých react-app-env.d.ts rozloučení. K mému velkému překvapení však při následném obnovení serveru CRA (create-react-app) byl tento soubor vzkříšen. Po chvíli procházení interních balíčků CRA jsem zjistil, že pro generování tohoto souboru byly naprogramovány reakční skripty (hlavní program pohánějící CRA).

Tehdy si můj mozek začal všímat názvu tohoto souboru:react-app-env . Každý magický řetězec má svůj význam, říká základní pravidlo edb (ve Windows můžete použít x64dbg). Vygenerovat soubor s takovým specifickým názvem znamená, že došlo k jeho významnému využití, pravděpodobně v rámci organizace ${process.env.REACT_APP_AUTHOR} .

Když se ponoříte hlouběji na duckduckgo.com s hledaným výrazem „react-app-env.d.ts deklarovat globální“, třetí výsledek (poznámka:ne 1. nebo 2., ale 3.) poskytl skvělý pohled, zejména v tomto komentáři.

Autor problému s githubem se pokoušel vyřešit „chybu“ a fragment kódu byl mimořádně bystrý:

declare namespace NodeJS {
  interface ProcessEnv {
    NODE_ENV: 'development' | 'production' | 'test'
    PUBLIC_URL: string
  }
}

Stručně řečeno, podpora typových skriptů CRA spotřebovává rozšířenou definici pod jmenným prostorem NodeJS. Chcete-li jej rozšířit pro naše prostředí, jednoduše vložte fragment výše do vašeho react-app-env.d.ts

BONUS

Nyní víte, jak rozšířit vaše psaní prostředí o nějaký starý dobrý líný process.env automatické dokončování. Ale teď se musíte vypořádat s globálním API umístěným pod Window (jako Stripe.js). Níže vám ušetří cestu do kachny (Toto je zjednodušená verze našeho react-app-env.d.ts soubor:

/// <reference types="react-scripts" />
declare namespace NodeJS {
interface ProcessEnv {
    NODE_ENV: 'development' | 'production' | 'test'
    PUBLIC_URL: string
    REACT_APP_HASH: string
    REACT_APP_API_URI: string
    REACT_APP_WS_URI: string
    }
}
interface Window {
    Stripe: any
}