Typescript: Access window object with type check

Backgrounds

"typescript": "3.7.2"

Our Requirements

We have an external html provide window.configs.

We may need to access window object in typescript to get config properties, and do validation before initial async request.

windowConfig.tsx :

interface iConfig extends Window {
  config: {
    username: string,
    server: string,
    port: number,
  }
}

declare var window: iConfig;

export const windowConfig = window;

index.tsx :

import { windowConfig } from './windowConfig';

/* use windowConfig as 'window' */

Alternative Solution

import { useEffect } from 'react';

/* Add declaration for window.AMap */
declare let AMap;

export default function Map() {
  let map;

  useEffect(() => {
    /* Directly use AMap */
    map = new AMap.Map(`container`, {
      zoom: 10,
    });
  }, []);

  return (
    /* ... */
  );
}