Liferay React Portlet TypeScript integration

configuration.json

// this files goes to feature/configuration.json
// it lets you setup configuration fields for a portlet
// it work with an adapted create-react-app for liferay https://help.liferay.com/hc/en-us/articles/360035467712-Adapting-Existing-Apps-to-Run-on-Liferay-DXP
{
	"$schema": "https://raw.githubusercontent.com/liferay/liferay-js-toolkit/master/resources/schemas/configuration.schema.json",
	"system": {
		"category": "react-js-toolkit",
		"name": "react-js-toolkit",
		"fields": {
			"fruit": {
				"type": "string",
				"name": "fruit",
				"description": "fruit-help",
				"default": "orange",
				"options": {
					"orange": "an-orange",
					"pear": "a-pear",
					"apple": "an-apple"
				}
			}
		}
	},
	"portletInstance": {
		"fields": {
			"drink": {
				"type": "string",
				"name": "drink",
				"description": "drink-help",
				"default": "water",
				"options": {
					"water": "water",
					"wine": "wine",
					"beer": "beer"
				}
			}
		}
	}
}

configuration.ts

declare var _LIFERAY_PARAMS_: {
  portletNamespace: string;
  contextPath: string;
  portletElementId: string;
  configuration: {
    system: Record<string, string>;
    portletInstance: Record<string, string>;
  };
};

type Liferay = {
  Language: {
    get(key: string): string;
  };
  authToken: string;
};

type ThemeDisplay = {
  getSiteGroupId(): string;
  getLanguageId(): string;
  getPathThemeImages(): string;
  getScopeGroupId(): string;
  getLayoutId(): string;
};

declare global {
  var Liferay: Liferay;
  var themeDisplay: ThemeDisplay;
  interface Window {
    Liferay: Liferay;
    themeDisplay: ThemeDisplay;
  }
}

if (typeof _LIFERAY_PARAMS_ === "undefined") {
  (window as any)._LIFERAY_PARAMS_ = {
    portletNamespace: "",
    contextPath: "",
    portletElementId: "",
    configuration: {
      system: {},
      portletInstance: {},
    },
  };
}

if (typeof Liferay === "undefined") {
  window.Liferay = {
    Language: {
      get(key) {
        return "";
      },
    },
    authToken: "",
  };
}

if (typeof themeDisplay === "undefined") {
  window.themeDisplay = {
    getSiteGroupId() {
      return "";
    },
    getLanguageId() {
      return "";
    },
    getPathThemeImages() {
      return "";
    },
    getScopeGroupId() {
      return "";
    },
    getLayoutId() {
      return "";
    },
  };
}