title: Overriding built-in types on the global object in TypeScript (localStorage / sessionStorage)
body: <p>I'm using NextJS, so the typescript that I'm writing gets executed both in a browser and in node at different times.</p>
  <p>To fix an error with a library I'm using, I'm trying to set <code>global.localStorage</code> and <code>global.sessionStorage</code> to <code>null</code> when the code is executing on the server.</p>
  <p>I have some types defined in my react-app-env.d.ts. If I choose another property, so for example <code>someString</code> like:</p>
  <pre><code>export declare global {
      var someString: string;
  }
  </code></pre>
  <p>Then somewhere else, I can do:</p>
  <pre><code>global.someString = '123'
  </code></pre>
  <p>Which works fine; there are no errors. However, if I try the same thing with localStorage, so:</p>
  <pre><code>export declare global {
    var localStorage: string;
  }
  </code></pre>
  <p>And try to reassign it:</p>
  <pre><code>global.localStorage = '123'
  </code></pre>
  <p>Then I get the following error:</p>
  <pre><code>var localStorage: Storage
  Type 'string' is not assignable to type 'Storage'.ts(2322)
  </code></pre>
  <p>Does anyone know how I can make this work? I can just turn off the type checking by using <code>any</code> but it seems like there should be a better way.</p>
  <p>I'm using TypeScript 4.4.4 if that makes much difference.</p>