Convert Context/Provider/Subscription to Typescript

src/components/Context.js → src/components/Context.ts

@@ -1,6 +1,11 @@
 import React from 'react'
+import type Subscription from '../utils/Subscription'
 
-export const ReactReduxContext = /*#__PURE__*/ React.createContext(null)
+export type ReduxContextProps = {
+  store: any,
+  subscription: Subscription,
+}
+export const ReactReduxContext = /*#__PURE__*/ React.createContext<ReduxContextProps | null>(null)
 
 if (process.env.NODE_ENV !== 'production') {
   ReactReduxContext.displayName = 'ReactRedux'

src/components/Provider.js → src/components/Provider.tsx

@@ -1,10 +1,10 @@
-import React, { useMemo } from 'react'
+import React, { ReactNode, useMemo } from 'react'
 import PropTypes from 'prop-types'
-import { ReactReduxContext } from './Context'
+import { ReactReduxContext, ReduxContextProps } from './Context'
 import Subscription from '../utils/Subscription'
 import { useIsomorphicLayoutEffect } from '../utils/useIsomorphicLayoutEffect'
 
-function Provider({ store, context, children }) {
+function Provider({ store, context, children }: { store: any, context?: React.Context<ReduxContextProps>, children: ReactNode }) {
   const contextValue = useMemo(() => {
     const subscription = new Subscription(store)
     subscription.onStateChange = subscription.notifyNestedSubs
@@ -25,7 +25,7 @@ function Provider({ store, context, children }) {
     }
     return () => {
       subscription.tryUnsubscribe()
-      subscription.onStateChange = null
+      subscription.onStateChange = undefined
     }
   }, [contextValue, previousState])
 

src/utils/Subscription.js → src/utils/Subscription.ts

@@ -4,12 +4,16 @@ import { getBatch } from './batch'
 // well as nesting subscriptions of descendant components, so that we can ensure the
 // ancestor components re-render before descendants
 
-const nullListeners = { notify() {} }
+type Listener = {
+  callback: () => void;
+  next: Listener | null;
+  prev: Listener | null;
+};
 
 function createListenerCollection() {
   const batch = getBatch()
-  let first = null
-  let last = null
+  let first: Listener | null = null
+  let last: Listener | null = null
 
   return {
     clear() {
@@ -37,7 +41,7 @@ function createListenerCollection() {
       return listeners
     },
 
-    subscribe(callback) {
+    subscribe(callback: () => void) {
       let isSubscribed = true
 
       let listener = (last = {
@@ -57,6 +61,7 @@ function createListenerCollection() {
         isSubscribed = false
 
         if (listener.next) {
+          //@ts-expect-error -- listener.next is always null
           listener.next.prev = listener.prev
         } else {
           last = listener.prev
@@ -71,29 +76,35 @@ function createListenerCollection() {
   }
 }
 
+type ListenerCollection = ReturnType<typeof createListenerCollection>;
+
 export default class Subscription {
-  constructor(store, parentSub) {
+  private store: any;
+  private parentSub?: Subscription;
+  private unsubscribe?: () => void;
+  private listeners?: ListenerCollection;
+  public onStateChange?: () => void;
+
+  constructor(store: any, parentSub?: Subscription) {
     this.store = store
     this.parentSub = parentSub
-    this.unsubscribe = null
-    this.listeners = nullListeners
+    this.unsubscribe = undefined
+    this.listeners = undefined
 
     this.handleChangeWrapper = this.handleChangeWrapper.bind(this)
   }
 
-  addNestedSub(listener) {
+  addNestedSub(listener: () => void) {
     this.trySubscribe()
-    return this.listeners.subscribe(listener)
+    return this.listeners?.subscribe(listener)
   }
 
   notifyNestedSubs() {
-    this.listeners.notify()
+    this.listeners?.notify()
   }
 
   handleChangeWrapper() {
-    if (this.onStateChange) {
-      this.onStateChange()
-    }
+    this.onStateChange?.()
   }
 
   isSubscribed() {
@@ -113,9 +124,9 @@ export default class Subscription {
   tryUnsubscribe() {
     if (this.unsubscribe) {
       this.unsubscribe()
-      this.unsubscribe = null
-      this.listeners.clear()
-      this.listeners = nullListeners
+      this.unsubscribe = undefined
+      this.listeners?.clear()
+      this.listeners = undefined;
     }
   }
 }

tsconfig.json

@@ -9,7 +9,7 @@
     // "lib": [],                                   /* Specify library files to be included in the compilation. */
     "allowJs": true,                             /* Allow javascript files to be compiled. */
     // "checkJs": true,                             /* Report errors in .js files. */
-    // "jsx": "preserve",                           /* Specify JSX code generation: 'preserve', 'react-native', 'react', 'react-jsx' or 'react-jsxdev'. */
+    "jsx": "react",                           /* Specify JSX code generation: 'preserve', 'react-native', 'react', 'react-jsx' or 'react-jsxdev'. */
     "declaration": true,                         /* Generates corresponding '.d.ts' file. */
     "emitDeclarationOnly": true,
     // "declarationMap": true,                      /* Generates a sourcemap for each corresponding '.d.ts' file. */