Typing process.env automatically with this VSC extension

#typescript #node #vscode #processenv

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