[react-tracking] Add types for useTracking hook (#35607)

types/react-tracking/index.d.ts

@@ -1,13 +1,14 @@
-// Type definitions for react-tracking 6.0
+// Type definitions for react-tracking 7.0
 // Project: https://github.com/NYTimes/react-tracking
 // Definitions by: Eloy Durán <https://github.com/alloy>
+//                 Christopher Pappas <https://github.com/damassi>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.8
 
 import * as React from "react";
 
-export interface TrackingProp {
-    trackEvent({}): any;
+export interface TrackingProp<P = {}> {
+    trackEvent(data: Partial<P>): any;
 
     /**
      * This method returns all of the contextual tracking data up until this point in the component hierarchy.
@@ -55,15 +56,26 @@ export type TrackingInfo<T, P, S> = T | ((props: P, state: S, args: any[any]) =>
 // Duplicated from ES6 lib to remove the `void` typing, otherwise `track` can’t be used as a HOC function that passes
 // through a JSX component that be used without casting.
 type ClassDecorator = <TFunction extends Function>(target: TFunction) => TFunction;
-type MethodDecorator = <T>(target: object, propertyKey: string | symbol, descriptor: TypedPropertyDescriptor<T>) => TypedPropertyDescriptor<T>;
+type MethodDecorator = <T>(
+    target: object,
+    propertyKey: string | symbol,
+    descriptor: TypedPropertyDescriptor<T>
+) => TypedPropertyDescriptor<T>;
 export type Decorator = ClassDecorator & MethodDecorator;
 
+/**
+ * A React context used to support passing and dispatching tracking data throughout a tree of components.
+ */
 export type TrackingContext<T = any> = React.Context<{
-    tracking: Options<T> & { data?: {} }
+    tracking: Options<T> & { data?: {} };
 }>;
-
 export const ReactTrackingContext: TrackingContext;
 
+/**
+ * A React hook used to tap into the tracking context.
+ */
+export function useTracking<P = {}>(): TrackingProp<P>;
+
 /**
  * This is the type of the `track` function. It’s declared as an interface so that consumers can extend the typing and
  * specify defaults, such as a global analytics schema for the tracking-info.

types/react-tracking/test/react-tracking-with-types-tests.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { Track, track as _track, TrackingProp, Options, Decorator, TrackingContext, ReactTrackingContext } from 'react-tracking';
+import { Track, track as _track, TrackingProp, Options, Decorator, TrackingContext, ReactTrackingContext, useTracking } from 'react-tracking';
+import { string } from 'prop-types';
 
 function customEventReporter(data: { page?: string }) {}
 
@@ -85,3 +86,17 @@ const TestContext = () => {
         </ReactTrackingContext.Provider>
     );
 };
+
+interface Trackables {
+    page: string;
+    app: string;
+}
+
+const App = track()((props: { foo: string }) => {
+    const tracking = useTracking<Trackables>();
+    return <div onClick={() => {
+        tracking.trackEvent({
+            page: 'Home'
+        });
+    }}/>;
+});

types/react-tracking/test/react-tracking-without-types-tests.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Track, track, TrackingProp } from 'react-tracking';
+import { Track, track, TrackingProp, useTracking } from 'react-tracking';
 
 function customEventReporter(data: { page?: string }) {}
 
@@ -55,3 +55,13 @@ class Test extends React.Component<any, null> {
         );
     }
 }
+
+const App = track()(({ foo }: { foo: string }) => {
+    const tracking = useTracking();
+    return <div onClick={() => {
+        tracking.trackEvent({
+            page: 'Home',
+            foo
+        });
+    }}/>;
+});