Merge pull request #27314 from software-mansion-labs/ts-migration/dev…

…ice-capabilities-lib

[No QA] [TS migration] Migrate 'DeviceCapabilities' lib to TypeScript

src/libs/DeviceCapabilities/canUseTouchScreen/index.native.ts

@@ -0,0 +1,5 @@
+import CanUseTouchScreen from './types';
+
+const canUseTouchScreen: CanUseTouchScreen = () => true;
+
+export default canUseTouchScreen;

src/libs/DeviceCapabilities/canUseTouchScreen/index.js → src/libs/DeviceCapabilities/canUseTouchScreen/index.ts

@@ -1,29 +1,38 @@
+import {Merge} from 'type-fest';
+import CanUseTouchScreen from './types';
+
+type ExtendedNavigator = Merge<Navigator, {msMaxTouchPoints: number}>;
+
 /**
  * Allows us to identify whether the platform has a touchscreen.
  *
  * https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent
- *
- * @returns {Boolean}
  */
-function canUseTouchScreen() {
+const canUseTouchScreen: CanUseTouchScreen = () => {
     let hasTouchScreen = false;
+
+    // TypeScript removed support for msMaxTouchPoints, this doesn't mean however that
+    // this property doesn't exist - hence the use of ExtendedNavigator to ensure
+    // that the functionality doesn't change
+    // https://github.com/microsoft/TypeScript-DOM-lib-generator/issues/1029
     if ('maxTouchPoints' in navigator) {
         hasTouchScreen = navigator.maxTouchPoints > 0;
     } else if ('msMaxTouchPoints' in navigator) {
-        hasTouchScreen = navigator.msMaxTouchPoints > 0;
+        hasTouchScreen = (navigator as ExtendedNavigator).msMaxTouchPoints > 0;
     } else {
-        const mQ = window.matchMedia && matchMedia('(pointer:coarse)');
+        // Same case as for Navigator - TypeScript thinks that matchMedia is obligatory property of window although it may not be
+        const mQ = window.matchMedia?.('(pointer:coarse)');
         if (mQ && mQ.media === '(pointer:coarse)') {
             hasTouchScreen = !!mQ.matches;
         } else if ('orientation' in window) {
             hasTouchScreen = true; // deprecated, but good fallback
         } else {
             // Only as a last resort, fall back to user agent sniffing
-            const UA = navigator.userAgent;
+            const UA = (navigator as ExtendedNavigator).userAgent;
             hasTouchScreen = /\b(BlackBerry|webOS|iPhone|IEMobile)\b/i.test(UA) || /\b(Android|Windows Phone|iPad|iPod)\b/i.test(UA);
         }
     }
     return hasTouchScreen;
-}
+};
 
 export default canUseTouchScreen;

src/libs/DeviceCapabilities/canUseTouchScreen/types.ts

@@ -0,0 +1,3 @@
+type CanUseTouchScreen = () => boolean;
+
+export default CanUseTouchScreen;

src/libs/DeviceCapabilities/hasHoverSupport/index.native.js → src/libs/DeviceCapabilities/hasHoverSupport/index.native.ts

@@ -1,9 +1,8 @@
+import HasHoverSupport from './types';
+
 /**
  * Allows us to identify whether the platform is hoverable.
- *
- * @returns {Boolean}
  */
-
-const hasHoverSupport = () => false;
+const hasHoverSupport: HasHoverSupport = () => false;
 
 export default hasHoverSupport;

src/libs/DeviceCapabilities/hasHoverSupport/index.ts

@@ -0,0 +1,8 @@
+import HasHoverSupport from './types';
+
+/**
+ * Allows us to identify whether the platform is hoverable.
+ */
+const hasHoverSupport: HasHoverSupport = () => window.matchMedia?.('(hover: hover) and (pointer: fine)').matches;
+
+export default hasHoverSupport;

src/libs/DeviceCapabilities/hasHoverSupport/types.ts

@@ -0,0 +1,3 @@
+type HasHoverSupport = () => boolean;
+
+export default HasHoverSupport;