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.

L'issue non indica file del repository, test o punti di ingresso. Inizia tracciando il narrowing del flusso di controllo di TypeScript e le dichiarazioni di tipo globali, quindi esamina i test esistenti per i predicati di tipo definiti dall'utente. L'attività è completata quando è definito un meccanismo di narrowing specificato e accettato per isServer() e isClient(), con test che coprono gli esempi del browser e del server.