Bump typescript (4) and babel

.eslintrc.json

@@ -76,12 +76,13 @@
     "default-case": 0,
     "wc/no-self-class": 0,
     "@typescript-eslint/camelcase": 0,
-    "@typescript-eslint/ban-ts-ignore": 0,
+    "@typescript-eslint/ban-ts-comment": 0,
     "@typescript-eslint/no-use-before-define": 0,
     "@typescript-eslint/no-non-null-assertion": 0,
     "@typescript-eslint/no-explicit-any": 0,
     "@typescript-eslint/no-unused-vars": 0,
-    "@typescript-eslint/explicit-function-return-type": 0
+    "@typescript-eslint/explicit-function-return-type": 0,
+    "@typescript-eslint/explicit-module-boundary-types": 0
   },
   "plugins": ["disable", "import", "lit", "prettier", "@typescript-eslint"],
   "processor": "disable/disable"

hassio/src/dialogs/network/dialog-hassio-network.ts

@@ -39,7 +39,8 @@ import type { HomeAssistant } from "../../../../src/types";
 import { HassioNetworkDialogParams } from "./show-dialog-network";
 
 @customElement("dialog-hassio-network")
-export class DialogHassioNetwork extends LitElement implements HassDialog {
+export class DialogHassioNetwork extends LitElement
+  implements HassDialog<HassioNetworkDialogParams> {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @internalProperty() private _prosessing = false;

hassio/src/dialogs/snapshot/dialog-hassio-snapshot-upload.ts

@@ -19,7 +19,7 @@ import { HassioSnapshotUploadDialogParams } from "./show-dialog-snapshot-upload"
 
 @customElement("dialog-hassio-snapshot-upload")
 export class DialogHassioSnapshotUpload extends LitElement
-  implements HassDialog {
+  implements HassDialog<HassioSnapshotUploadDialogParams> {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @internalProperty() private _params?: HassioSnapshotUploadDialogParams;

package.json

@@ -128,17 +128,17 @@
     "xss": "^1.0.6"
   },
   "devDependencies": {
-    "@babel/core": "^7.9.0",
-    "@babel/plugin-external-helpers": "^7.8.3",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
-    "@babel/plugin-proposal-decorators": "^7.8.3",
-    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.8.3",
-    "@babel/plugin-proposal-object-rest-spread": "^7.9.5",
-    "@babel/plugin-proposal-optional-chaining": "^7.9.0",
+    "@babel/core": "^7.11.6",
+    "@babel/plugin-external-helpers": "^7.10.4",
+    "@babel/plugin-proposal-class-properties": "^7.10.4",
+    "@babel/plugin-proposal-decorators": "^7.10.5",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.10.4",
+    "@babel/plugin-proposal-object-rest-spread": "^7.11.0",
+    "@babel/plugin-proposal-optional-chaining": "^7.11.0",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/plugin-syntax-import-meta": "^7.10.4",
-    "@babel/preset-env": "^7.9.5",
-    "@babel/preset-typescript": "^7.9.0",
+    "@babel/preset-env": "^7.11.5",
+    "@babel/preset-typescript": "^7.10.4",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-json": "^4.0.3",
     "@rollup/plugin-node-resolve": "^7.1.3",
@@ -155,8 +155,8 @@
     "@types/mocha": "^7.0.2",
     "@types/resize-observer-browser": "^0.1.3",
     "@types/webspeechapi": "^0.0.29",
-    "@typescript-eslint/eslint-plugin": "^2.28.0",
-    "@typescript-eslint/parser": "^2.28.0",
+    "@typescript-eslint/eslint-plugin": "^4.4.0",
+    "@typescript-eslint/parser": "^4.4.0",
     "babel-loader": "^8.1.0",
     "chai": "^4.2.0",
     "del": "^4.0.0",
@@ -204,7 +204,7 @@
     "terser-webpack-plugin": "^3.0.6",
     "ts-lit-plugin": "^1.2.1",
     "ts-mocha": "^7.0.0",
-    "typescript": "^3.8.3",
+    "typescript": "^4.0.3",
     "vinyl-buffer": "^1.0.1",
     "vinyl-source-stream": "^2.0.0",
     "webpack": "5.0.0-rc.3",

src/auth/ha-auth-flow.ts

@@ -200,7 +200,7 @@ class HaAuthFlow extends litLocalizeLiteMixin(LitElement) {
 
   private _redirect(authCode: string) {
     // OAuth 2: 3.1.2 we need to retain query component of a redirect URI
-    let url = this.redirectUri!!;
+    let url = this.redirectUri!;
     if (!url.includes("?")) {
       url += "?";
     } else if (!url.endsWith("&")) {

src/common/util/debounce.ts

@@ -5,7 +5,7 @@
 // N milliseconds. If `immediate` is passed, trigger the function on the
 // leading edge, instead of the trailing.
 // eslint-disable-next-line: ban-types
-export const debounce = <T extends Function>(
+export const debounce = <T extends (...args) => unknown>(
   func: T,
   wait,
   immediate = false

src/common/util/subscribe-one.ts

@@ -2,7 +2,10 @@ import { Connection, UnsubscribeFunc } from "home-assistant-js-websocket";
 
 export const subscribeOne = async <T>(
   conn: Connection,
-  subscribe: (conn: Connection, onChange: (items: T) => void) => UnsubscribeFunc
+  subscribe: (
+    conn2: Connection,
+    onChange: (items: T) => void
+  ) => UnsubscribeFunc
 ) =>
   new Promise<T>((resolve) => {
     const unsub = subscribe(conn, (items) => {

src/common/util/throttle.ts

@@ -5,7 +5,7 @@
 // as much as it can, without ever going more than once per `wait` duration;
 // but if you'd like to disable the execution on the leading edge, pass
 // `false for leading`. To disable execution on the trailing edge, ditto.
-export const throttle = <T extends Function>(
+export const throttle = <T extends (...args) => unknown>(
   func: T,
   wait: number,
   leading = true,

src/components/data-table/ha-data-table.ts

@@ -73,13 +73,17 @@ export interface DataTableColumnData extends DataTableSortColumnData {
   hidden?: boolean;
 }
 
+type ClonedDataTableColumnData = Omit<DataTableColumnData, "title"> & {
+  title?: string;
+};
+
 export interface DataTableRowData {
   [key: string]: any;
   selectable?: boolean;
 }
 
 export interface SortableColumnContainer {
-  [key: string]: DataTableSortColumnData;
+  [key: string]: ClonedDataTableColumnData;
 }
 
 @customElement("ha-data-table")
@@ -169,11 +173,13 @@ export class HaDataTable extends LitElement {
       }
 
       const clonedColumns: DataTableColumnContainer = deepClone(this.columns);
-      Object.values(clonedColumns).forEach((column: DataTableColumnData) => {
-        delete column.title;
-        delete column.type;
-        delete column.template;
-      });
+      Object.values(clonedColumns).forEach(
+        (column: ClonedDataTableColumnData) => {
+          delete column.title;
+          delete column.type;
+          delete column.template;
+        }
+      );
 
       this._sortColumns = clonedColumns;
     }

src/components/date-range-picker.ts

@@ -1,7 +1,7 @@
+// @ts-nocheck
 import Vue from "vue";
 import wrap from "@vue/web-component-wrapper";
 import DateRangePicker from "vue2-daterange-picker";
-// @ts-ignore
 import dateRangePickerStyles from "vue2-daterange-picker/dist/vue2-daterange-picker.css";
 import { fireEvent } from "../common/dom/fire_event";
 import { Constructor } from "../types";
@@ -35,7 +35,6 @@ const Component = Vue.extend({
     },
   },
   render(createElement) {
-    // @ts-ignore
     return createElement(DateRangePicker, {
       props: {
         "time-picker": true,
@@ -52,7 +51,6 @@ const Component = Vue.extend({
           endDate: this.endDate,
         },
         callback: (value) => {
-          // @ts-ignore
           fireEvent(this.$el as HTMLElement, "change", value);
         },
         expression: "dateRange",

src/components/ha-yaml-editor.ts

@@ -20,7 +20,7 @@ declare global {
   }
 }
 
-const isEmpty = (obj: object): boolean => {
+const isEmpty = (obj: Record<string, unknown>): boolean => {
   if (typeof obj !== "object") {
     return false;
   }

src/components/map/ha-location-editor.ts

@@ -61,8 +61,8 @@ class LocationEditor extends LitElement {
     if (!this._leafletMap || !this.location) {
       return;
     }
-    if ((this._locationMarker as Circle).getBounds) {
-      this._leafletMap.fitBounds((this._locationMarker as Circle).getBounds());
+    if (this._locationMarker && "getBounds" in this._locationMarker) {
+      this._leafletMap.fitBounds(this._locationMarker.getBounds());
     } else {
       this._leafletMap.setView(this.location, this.fitZoom);
     }

src/components/map/ha-locations-editor.ts

@@ -90,8 +90,8 @@ export class HaLocationsEditor extends LitElement {
     if (!marker) {
       return;
     }
-    if ((marker as Circle).getBounds) {
-      this._leafletMap.fitBounds((marker as Circle).getBounds());
+    if ("getBounds" in marker) {
+      this._leafletMap.fitBounds(marker.getBounds());
       (marker as Circle).bringToFront();
     } else {
       const circle = this._circles[id];
@@ -296,8 +296,8 @@ export class HaLocationsEditor extends LitElement {
             // @ts-ignore
             (ev: MouseEvent) => this._markerClicked(ev)
           )
-          .addTo(this._leafletMap);
-        marker.id = location.id;
+          .addTo(this._leafletMap!);
+        (marker as any).id = location.id;
 
         this._locationMarkers![location.id] = marker;
       }

src/data/automation.ts

@@ -217,12 +217,12 @@ export const subscribeTrigger = (
   hass: HomeAssistant,
   onChange: (result: {
     variables: {
-      trigger: {};
+      trigger: Record<string, unknown>;
     };
     context: Context;
   }) => void,
   trigger: Trigger | Trigger[],
-  variables?: {}
+  variables?: Record<string, unknown>
 ) =>
   hass.connection.subscribeMessage(onChange, {
     type: "subscribe_trigger",
@@ -233,7 +233,7 @@ export const subscribeTrigger = (
 export const testCondition = (
   hass: HomeAssistant,
   condition: Condition | Condition[],
-  variables?: {}
+  variables?: Record<string, unknown>
 ) =>
   hass.callWS<{ result: boolean }>({
     type: "test_condition",

src/data/collection.ts

@@ -17,12 +17,12 @@ interface OptimisticCollection<T> extends Collection<T> {
  */
 
 export const getOptimisticCollection = <StateType>(
-  saveCollection: (conn: Connection, data: StateType) => Promise<unknown>,
+  saveCollection: (conn2: Connection, data: StateType) => Promise<unknown>,
   conn: Connection,
   key: string,
-  fetchCollection: (conn: Connection) => Promise<StateType>,
+  fetchCollection: (conn2: Connection) => Promise<StateType>,
   subscribeUpdates?: (
-    conn: Connection,
+    conn2: Connection,
     store: Store<StateType>
   ) => Promise<UnsubscribeFunc>
 ): OptimisticCollection<StateType> => {

src/data/entity_registry.ts

@@ -15,7 +15,7 @@ export interface EntityRegistryEntry {
 
 export interface ExtEntityRegistryEntry extends EntityRegistryEntry {
   unique_id: string;
-  capabilities: object;
+  capabilities: Record<string, unknown>;
   original_name?: string;
   original_icon?: string;
 }

src/data/hassio/addon.ts

@@ -34,9 +34,9 @@ export interface HassioAddonDetails extends HassioAddonInfo {
   version_latest: string;
   boot: "auto" | "manual";
   build: boolean;
-  options: object;
-  network: null | object;
-  network_description: null | object;
+  options: Record<string, unknown>;
+  network: null | Record<string, number>;
+  network_description: null | Record<string, string>;
   host_network: boolean;
   host_pid: boolean;
   host_ipc: boolean;
@@ -96,11 +96,11 @@ export interface HassioAddonRepository {
 export interface HassioAddonSetOptionParams {
   audio_input?: string | null;
   audio_output?: string | null;
-  options?: object | null;
+  options?: Record<string, unknown> | null;
   boot?: "auto" | "manual";
   auto_update?: boolean;
   ingress_panel?: boolean;
-  network?: object | null;
+  network?: Record<string, unknown> | null;
   watchdog?: boolean;
 }
 

src/data/hassio/hardware.ts

@@ -18,7 +18,7 @@ export interface HassioHardwareInfo {
   input: string[];
   disk: string[];
   gpio: string[];
-  audio: object;
+  audio: Record<string, unknown>;
 }
 
 export const fetchHassioHardwareAudio = async (hass: HomeAssistant) => {

src/data/panel_custom.ts

@@ -9,6 +9,6 @@ export interface CustomPanelConfig {
   html_url?: string;
 }
 
-export type CustomPanelInfo<T = {}> = PanelInfo<
+export type CustomPanelInfo<T = Record<string, unknown>> = PanelInfo<
   T & { _panel_custom: CustomPanelConfig }
 >;

src/data/script.ts

@@ -105,7 +105,7 @@ export type Action =
 export const triggerScript = (
   hass: HomeAssistant,
   entityId: string,
-  variables?: {}
+  variables?: Record<string, unknown>
 ) => hass.callService("script", computeObjectId(entityId), variables);
 
 export const canExcecute = (state: ScriptEntity) => {

src/data/translation.ts

@@ -33,8 +33,8 @@ export const getHassTranslations = async (
   category: TranslationCategory,
   integration?: string,
   config_flow?: boolean
-): Promise<{}> => {
-  const result = await hass.callWS<{ resources: {} }>({
+): Promise<Record<string, unknown>> => {
+  const result = await hass.callWS<{ resources: Record<string, unknown> }>({
     type: "frontend/get_translations",
     language,
     category,
@@ -47,8 +47,8 @@ export const getHassTranslations = async (
 export const getHassTranslationsPre109 = async (
   hass: HomeAssistant,
   language: string
-): Promise<{}> => {
-  const result = await hass.callWS<{ resources: {} }>({
+): Promise<Record<string, unknown>> => {
+  const result = await hass.callWS<{ resources: Record<string, unknown> }>({
     type: "frontend/get_translations",
     language,
   });

src/data/ws-templates.ts

@@ -17,7 +17,7 @@ export const subscribeRenderTemplate = (
   params: {
     template: string;
     entity_ids?: string | string[];
-    variables?: object;
+    variables?: Record<string, unknown>;
     timeout?: number;
   }
 ): Promise<UnsubscribeFunc> => {

src/dialogs/domain-toggler/dialog-domain-toggler.ts

@@ -19,7 +19,8 @@ import { HassDialog } from "../make-dialog-manager";
 import { HaDomainTogglerDialogParams } from "./show-dialog-domain-toggler";
 
 @customElement("dialog-domain-toggler")
-class DomainTogglerDialog extends LitElement implements HassDialog {
+class DomainTogglerDialog extends LitElement
+  implements HassDialog<HaDomainTogglerDialogParams> {
   public hass!: HomeAssistant;
 
   @internalProperty() private _params?: HaDomainTogglerDialogParams;

src/entrypoints/custom-panel.ts

@@ -35,7 +35,10 @@ function setProperties(properties) {
   setCustomPanelProperties(panelEl, properties);
 }
 
-function initialize(panel: CustomPanelInfo, properties: {}) {
+function initialize(
+  panel: CustomPanelInfo,
+  properties: Record<string, unknown>
+) {
   const style = document.createElement("style");
   style.innerHTML = "body{margin:0}";
   document.head.appendChild(style);

src/panels/config/automation/action/types/ha-automation-action-wait_template.ts

@@ -40,7 +40,9 @@ export class HaWaitAction extends LitElement implements ActionElement {
       ></paper-input>
       <br />
       <ha-formfield
-        .label=${this.hass.localize("ui.panel.config.automation.editor.actions.type.wait_template.continue_timeout")}
+        .label=${this.hass.localize(
+          "ui.panel.config.automation.editor.actions.type.wait_template.continue_timeout"
+        )}
       >
         <ha-switch
           .checked=${continue_on_timeout}