Update typescript to v4.7 (#2408)

* Update typescript to v4.7 * Updates required thanks to typescript bump * Remove polyfill's dependency on useful-types
Shopify · Sep 6, 2022 · 2094cb3 · 2094cb3
1 parent e9a0409
commit 2094cb3
Show file tree

Hide file tree

Showing 17 changed files with 51 additions and 66 deletions.
diff --git a/.changeset/bright-garlics-greet.md b/.changeset/bright-garlics-greet.md
@@ -0,0 +1,5 @@
+---
+'@shopify/jest-dom-mocks': patch
+---
+
+Update typing of Connection mock so it includes `addEventListener`, `removeEventListener`, `dispatchEvent` and `type`
diff --git a/.changeset/olive-actors-sit.md b/.changeset/olive-actors-sit.md
@@ -0,0 +1,8 @@
+---
+'@shopify/performance': patch
+'@shopify/react-async': patch
+'@shopify/react-form-state': patch
+'@shopify/react-graphql': patch
+---
+
+Internal typing adjustments as a result of updating Typescript
diff --git a/.changeset/olive-ducks-divide.md b/.changeset/olive-ducks-divide.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polyfills': patch
+---
+
+Simplify typing in idle-callback polyfill thanks improvements in window's typing in TypeScript 4.4
diff --git a/config/typescript/tsconfig.base.json b/config/typescript/tsconfig.base.json
@@ -3,12 +3,13 @@
   "compilerOptions": {
     "composite": true,
     "emitDeclarationOnly": true,
-    // Strict mode enables these strict* and noImplicit* options.
+    // Strict mode enables these strict*, use* and noImplicit* options.
     // Disable them temporarily while we fix up problematic behaviour from
     // the time before we wanted strict mode
     "strictBindCallApply": false,
     "strictFunctionTypes": false,
     "noImplicitAny": false,
+    "useUnknownInCatchVariables": false,
     "typeRoots": ["../../node_modules/@types"]
   }
 }
diff --git a/package.json b/package.json
@@ -75,7 +75,7 @@
     "react18": "npm:react@^18.1.0",
     "rimraf": "^2.6.2",
     "tsd": "^0.19.1",
-    "typescript": "^4.3.5",
+    "typescript": "~4.7.4",
     "yalc": "^1.0.0-pre.50"
   }
 }
diff --git a/packages/jest-dom-mocks/src/connection.ts b/packages/jest-dom-mocks/src/connection.ts
@@ -1,7 +1,7 @@
 import {set} from './utilities';
 
 export interface NavigatorWithConnection extends Navigator {
-  connection: {
+  connection: Navigator['connection'] & {
     downlink: number;
     effectiveType: string;
     onchange: null | Function;
@@ -25,6 +25,10 @@ export class Connection {
     this.originalConnection = globalNavigator.connection;
 
     const mockConnection: NavigatorWithConnection['connection'] = {
+      addEventListener: () => {},
+      removeEventListener: () => {},
+      dispatchEvent: () => false,
+      type: 'unknown',
       downlink: 0,
       effectiveType: '3g',
       onchange: null,

diff --git a/packages/jest-dom-mocks/src/tests/connection.test.ts b/packages/jest-dom-mocks/src/tests/connection.test.ts
@@ -1,4 +1,4 @@
-import {Connection, NavigatorWithConnection} from '../connection';
+import {Connection} from '../connection';
 
 describe('Connection', () => {
   describe('mock', () => {
@@ -29,9 +29,7 @@ describe('Connection', () => {
 
       connection.mock(mockValues);
 
-      expect((navigator as NavigatorWithConnection).connection).toMatchObject(
-        mockValues,
-      );
+      expect(navigator.connection).toMatchObject(mockValues);
     });
   });
 

diff --git a/packages/performance/src/utilities.ts b/packages/performance/src/utilities.ts
@@ -63,7 +63,7 @@ export function withNavigation(
   const {pushState, replaceState} = window.history;
   let currentPathname: string | undefined = window.location.pathname;
 
-  const handlePushOrReplace = (url: string | null | undefined) => {
+  const handlePushOrReplace = (url: string | URL | null | undefined) => {
     const pathname = url
       ? new URL(url, window.location.href).pathname
       : undefined;

diff --git a/packages/polyfills/package.json b/packages/polyfills/package.json
@@ -88,7 +88,6 @@
     "node": "^14.17.0 || >=16.0.0"
   },
   "dependencies": {
-    "@shopify/useful-types": "^5.1.1",
     "caniuse-api": "^3.0.0",
     "core-js": "^3.13.0",
     "formdata-polyfill": "^3.0.20",

diff --git a/packages/polyfills/src/idle-callback.browser.ts b/packages/polyfills/src/idle-callback.browser.ts
@@ -1,23 +1,7 @@
-// reference: https://developers.google.com/web/updates/2015/08/using-requestidlecallback
-import {ExtendedWindow} from '@shopify/useful-types';
-
-interface IdleCallback {
-  (params: CallbackParams): void;
-}
-
-interface CallbackParams {
-  didTimeout: boolean;
-  timeRemaining(): number;
-}
-interface PolyfilledWindow extends Window {
-  requestIdleCallback(cb: IdleCallback): any;
-  cancelIdleCallback(): any;
-}
-
 // According to the spec the max value timeRemaining can return is 50
 const MAX_TIME_REMAINING = 50;
 
-function fallbackQueueingFunction(cb: IdleCallback) {
+function fallbackQueueingFunction(cb: IdleRequestCallback) {
   const start = Date.now();
   return setImmediate(() => {
     cb({
@@ -29,10 +13,9 @@ function fallbackQueueingFunction(cb: IdleCallback) {
   });
 }
 
-const extendedWindow = window as ExtendedWindow<PolyfilledWindow>;
+window.requestIdleCallback =
+  window.requestIdleCallback || fallbackQueueingFunction;
 
-extendedWindow.requestIdleCallback =
-  extendedWindow.requestIdleCallback || fallbackQueueingFunction;
+window.cancelIdleCallback = window.cancelIdleCallback || window.clearImmediate;
 
-extendedWindow.cancelIdleCallback =
-  extendedWindow.cancelIdleCallback || (window as any).clearImmediate;
+export {};
diff --git a/packages/polyfills/src/idle-callback.jest.ts b/packages/polyfills/src/idle-callback.jest.ts
@@ -1,24 +1,7 @@
-// reference: https://developers.google.com/web/updates/2015/08/using-requestidlecallback
-import {ExtendedWindow} from '@shopify/useful-types';
-
-interface IdleCallback {
-  (params: CallbackParams): void;
-}
-
-interface CallbackParams {
-  didTimeout: boolean;
-  timeRemaining(): number;
-}
-
-interface PolyfilledWindow extends Window {
-  requestIdleCallback(cb: IdleCallback): any;
-  cancelIdleCallback(): any;
-}
-
 // According to the spec the max value timeRemaining can return is 50
 const MAX_TIME_REMAINING = 50;
 
-function fallbackQueueingFunction(cb: IdleCallback) {
+function fallbackQueueingFunction(cb: IdleRequestCallback) {
   const start = Date.now();
   return setImmediate(() => {
     cb({
@@ -31,11 +14,11 @@ function fallbackQueueingFunction(cb: IdleCallback) {
 }
 
 if (typeof window !== 'undefined') {
-  const extendedWindow = window as ExtendedWindow<PolyfilledWindow>;
+  window.requestIdleCallback =
+    window.requestIdleCallback || fallbackQueueingFunction;
 
-  extendedWindow.requestIdleCallback =
-    extendedWindow.requestIdleCallback || fallbackQueueingFunction;
-
-  extendedWindow.cancelIdleCallback =
-    extendedWindow.cancelIdleCallback || (window as any).clearImmediate;
+  window.cancelIdleCallback =
+    window.cancelIdleCallback || window.clearImmediate;
 }
+
+export {};
diff --git a/packages/polyfills/tsconfig.json b/packages/polyfills/tsconfig.json
@@ -10,6 +10,5 @@
     "../../config/typescript/*.d.ts",
     "./src/**/*.ts",
     "./src/**/*.tsx"
-  ],
-  "references": [{"path": "../useful-types"}]
+  ]
 }
diff --git a/packages/react-async/src/Prefetcher.tsx b/packages/react-async/src/Prefetcher.tsx
@@ -12,7 +12,7 @@ interface State {
 }
 
 interface NavigatorWithConnection extends Navigator {
-  connection: {saveData: boolean};
+  connection: Navigator['connection'] & {saveData: boolean};
 }
 
 export const INTENTION_DELAY_MS = 150;

diff --git a/packages/react-form-state/src/components/List.tsx b/packages/react-form-state/src/components/List.tsx
@@ -52,7 +52,7 @@ export default class List<Fields> extends React.PureComponent<
     });
   }
 
-  private handleChange = <Key extends keyof Fields>({
+  private handleChange = <Key extends string & keyof Fields>({
     index,
     key,
   }: {

diff --git a/packages/react-form-state/src/utilities.ts b/packages/react-form-state/src/utilities.ts
@@ -6,10 +6,10 @@ export {isEqual};
 
 export function mapObject<Input, Output>(
   input: Input,
-  mapper: (value: any, key: keyof Input) => any,
+  mapper: (value: any, key: string & keyof Input) => any,
 ) {
   return Object.entries(input).reduce((accumulator: any, [key, value]) => {
-    accumulator[key] = mapper(value, key as keyof Input);
+    accumulator[key] = mapper(value, key as string & keyof Input);
     return accumulator;
   }, {}) as Output;
 }

diff --git a/packages/react-graphql/src/hooks/query.ts b/packages/react-graphql/src/hooks/query.ts
@@ -147,7 +147,7 @@ export default function useQuery<
         queryObservable?.resetLastResults();
         subscribe();
       } finally {
-        Object.assign(queryObservable, {lastError, lastResult});
+        Object.assign(queryObservable || {}, {lastError, lastResult});
       }
 
       if (!hasOwnProperty.call(error, 'graphQLErrors')) {

diff --git a/yarn.lock b/yarn.lock
@@ -14352,10 +14352,10 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
-typescript@^4.3.5:
-  version "4.3.5"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.3.5.tgz#4d1c37cc16e893973c45a06886b7113234f119f4"
-  integrity sha512-DqQgihaQ9cUrskJo9kIyW/+g0Vxsk8cDtZ52a3NGh0YNTfpUSArXSohyUGnvbPazEPLu398C0UxmKSOrPumUzA==
+typescript@^4.3.5, typescript@~4.7.4:
+  version "4.7.4"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.7.4.tgz#1a88596d1cf47d59507a1bcdfb5b9dfe4d488235"
+  integrity sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ==
 
 ua-parser-js@^0.7.30:
   version "0.7.30"
-Original file line number
+Diff line change
@@ Expand Up @@
         });
       }
-      private handleChange = <Key extends keyof Fields>({
+      private handleChange = <Key extends string & keyof Fields>({
         index,
         key,
       }: {
@@ Expand Down @@