3

So, I have a logic that sets different baseURLs depending on the NODE_ENV that I am in.

My problem is that process.env.NODE_ENV has only two types, development and production and I also want to have the option for staging.

So what I have tried to do is create a file called environment.d.ts at the root folder of my project, and inside I did:

declare namespace NodeJS {
  export interface ProcessEnv {
    NODE_ENV: "development" | "production" | "staging";
  }
}

However I am still getting the error when trying to use staging:

This condition will always return 'false' since the types '"production"' and '"staging"' have no overlap.ts(2367)

export const baseURL =
  process.env.NODE_ENV === "development"
    ? "http://localhost:3000"
    : process.env.NODE_ENV === "staging"
    ? `https://ego-stage.herokuapp.com/`
    : process.env.NODE_ENV === "production"
    ? "https://egolounge.com/"
    : "http://localhost:3000";

The line that's giving me the error is the line where I am comparing if NODE_ENV is equal to staging, since staging as a type is not present in the default interface for NODE_ENV, so I need to extend it with my own definition, however the definition that I created does not supersede for some reason the default one, and when I push to the server, its not building.

Mike 'Pomax' Kamermans
  • 49,297
  • 16
  • 112
  • 153
Darkbound
  • 3,026
  • 7
  • 34
  • 72
  • Does it really matter what they are in these case? Instead of saying `string` I am being explicit about the strings that I want as values, this is irrelevant to the problem... – Darkbound Feb 23 '22 at 15:43
  • You're asking a technical question: getting your terms right _always_ matters. – Mike 'Pomax' Kamermans Feb 23 '22 at 15:44
  • @Mike'Pomax'Kamermans this is Typescript, not Javascript, and this is an `interface` not a class, or a function, there is no logical `||` operator here. – Darkbound Feb 23 '22 at 15:44
  • That is how the interface should be, the code is correct (in terms of that logic), the problem is that the definition I created does not get recognized and does not superseed the default type for `process.env.NODE_ENV` which is only `"staging" | "production"` and just to make my point about that even more clear, here is the default interface built into the node types: https://prnt.sc/4WWMhoIV4CIR if I add `| "staging"` here it works just fine, but thats located in `node_modules` so it does not get pushed to the server, thats why I need to extend it. – Darkbound Feb 23 '22 at 15:46
  • Fair enough, but: [don't put pictures of code in your post](/help/how-to-ask), put the text in your code. Especially as the TS error is getting flagged for code you're not showing right now. – Mike 'Pomax' Kamermans Feb 23 '22 at 15:48
  • What do you use these urls for ? Just a small check, if you want to use this code in the frontend in the browser, this solution will never work. If it is for backend, then maybe you only need 2 options development or prod, and for prod another env variable, that you can set at runtime, so you don't need to rebuild your app ? – Chai Feb 23 '22 at 16:06
  • It looks like you want to use a different name for that interface, if [using process.env in TypeScript](https://stackoverflow.com/questions/45194598/using-process-env-in-typescript) is to be believed. At least two of the answers there sound like they solve the problem. – Mike 'Pomax' Kamermans Feb 23 '22 at 16:13

1 Answers1

3

I managed to do exactly what you wanted using a different file name and dropping any exports.

// <project_root>/index.d.ts
declare namespace NodeJS {
  interface ProcessEnv {
     NODE_ENV: 'dev' | 'stg' | 'prod';
  }
}

I just shorthand the accepted values for NODE_ENV, since I just wanted to extend the interface with other values I have in my .env file.

I found the export interface did nothing extra to extend the ProcesEnv interface.

I think if you want to change the name of the file, you'll still have to include the index.d.ts and ref with an import (or that weired tripple slash).

Or you'll need to add it to the includes in your tsconfig.json file. Someone wanna fact check me on that?

Lawrence_NT
  • 438
  • 4
  • 11