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.

The issue does not name repository files, tests, or entry points. Start by tracing TypeScript's control-flow narrowing and global type declarations, then review existing tests for user-defined type predicates. Done means a specified, accepted narrowing mechanism for isServer() and isClient(), with tests covering the browser and server examples.