This content originally appeared on DEV Community and was authored by Yassin Eldeeb
what's up typescript enthusiasts 👋
tired from writing types for your env variables to get a type-safe version of process.env as seen in this tutorial?
Setup
1- Install @types/node in your project
$ yarn add @types/node -D
// or using npm
$ npm i @types/node -D
2- First of all, download the VSC extension TS Env Typings
3- Specify env-typings.json file in the root of your project.
4- Add path field to your development .env file
and yep! you even have auto-completion in this JSON config too 😎
That's it, Enjoy!
Cool Features 🆒
1- Specify path for the generated output using output field in the JSON config.
2- Auto detect env variable type so that It can give you a nice example in the intellisense on how to use and parse it.
so as an example if you've a number env variable It'll tell you to use parseInt to parse it before using it cause env variables are always read as strings.
3- Variants for an env variable, so you tell the extension what are the possible values for an env variable so It can generate better types for it and recommend you a nicer example to use
How to specify Variants in .env file?
add a comment at the end of the env line that includes "# variants:"
specify the different variants for your variable seperated by a "|" like you would in typscript
quotes are optional around the variants values
That's it.
Hope you've a great day, curios to see your feedback 🤗
This content originally appeared on DEV Community and was authored by Yassin Eldeeb
Yassin Eldeeb | Sciencx (2021-12-05T22:17:31+00:00) Typing process.env automatically with this VSC extension. Retrieved from https://www.scien.cx/2021/12/05/typing-process-env-automatically-with-this-vsc-extension/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.