Making isServer() and isClient() checks work in TypeScript

Search Terms

React, Isomorphic, Client/Server, Frontend, Backend, process, server, window

Suggestion

Add a typing mechanism for narrowing down global variable declarations.

function isServer(): globalThis is typeof globalThis & NodeJS.Global;

function isClient(): globalThis is typeof globalThis & Window;

Use Cases

Isomorphic JavaScript code that runs in browser and server often checks for environment to decide to do various things. Today we have to add both dom.d.ts and @types/node to bring in all global variables from both declarations such as window and process in.

In runtime however it's not safe to assume window exists so we have to check for it:

Examples

if (isClient()) {
  window.location.search = '?foo'
}

if (isServer()) {
 console.log(process.env.FOO);
}

Checklist

My suggestion meets these guidelines:

• This wouldn't be a breaking change in existing TypeScript/JavaScript code
• This wouldn't change the runtime behavior of existing JavaScript code
• This could be implemented without emitting different JS based on the types of the expressions
• This isn't a runtime feature (e.g. library functionality, non-ECMAScript syntax with JavaScript output, etc.)
• This feature would agree with the rest of TypeScript's Design Goals.

Das Issue nennt keine Dateien im Repository, Tests oder Einstiegspunkte. Beginne damit, TypeScript's Control-Flow-Narrowing und globale Typdeklarationen nachzuverfolgen, und prüfe anschließend vorhandene Tests für benutzerdefinierte Typprädikate. Die Aufgabe ist erledigt, wenn ein spezifizierter, akzeptierter Narrowing-Mechanismus für isServer() und isClient() feststeht und Tests die Browser- und Serverbeispiele abdecken.