Enable strict tsconfig (#1228)

Author: jerelmiller

.changeset/tall-garlics-raise.md

@@ -0,0 +1,5 @@
+---
+"apollo-client-devtools": patch
+---
+
+Enable strict tsconfig

src/application/App.tsx

@@ -129,7 +129,7 @@ export const App = () => {
       <BannerAlert />
       <Tabs
         value={selected}
-        onChange={(screen: Screens) => currentScreen(screen)}
+        onChange={(screen) => currentScreen(screen)}
         className="flex flex-col h-screen bg-primary dark:bg-primary-dark"
       >
         <Tabs.List className="flex items-center px-4">

src/application/components/Cache/Cache.tsx

@@ -102,7 +102,7 @@ export function Cache() {
           <JSONTreeViewer
             data={cache[cacheId]}
             hideRoot={true}
-            valueRenderer={(valueAsString: ReactNode, value, key) => {
+            valueRenderer={(valueAsString, value, key) => {
               return (
                 <span
                   className={clsx({
@@ -114,7 +114,7 @@ export function Cache() {
                     }
                   }}
                 >
-                  {valueAsString}
+                  {valueAsString as ReactNode}
                 </span>
               );
             }}

src/application/components/Explorer/Explorer.tsx

@@ -1,11 +1,6 @@
 import { useMemo } from "react";
 import { useState, useEffect } from "react";
-import {
-  Observable,
-  useReactiveVar,
-  FetchResult,
-  NetworkStatus,
-} from "@apollo/client";
+import { Observable, useReactiveVar, NetworkStatus } from "@apollo/client";
 import type { IntrospectionQuery } from "graphql";
 import { getIntrospectionQuery } from "graphql/utilities";
 import { colorTheme } from "../../theme";
@@ -56,7 +51,7 @@ function executeOperation({
   fetchPolicy: FetchPolicy;
   isSubscription?: boolean;
 }) {
-  return new Observable<FetchResult>((observer) => {
+  return new Observable<QueryResult>((observer) => {
     const payload = JSON.stringify({
       operation,
       operationName,
@@ -177,7 +172,7 @@ export const Explorer = ({
         fetchPolicy: FetchPolicy.NoCache,
       });
 
-      observer.subscribe((response: QueryResult) => {
+      observer.subscribe((response) => {
         // If we have errors in the response it means we assume this was a graphql
         // response which means we did hit a graphql endpoint but introspection
         // was specifically disabled

src/application/components/Explorer/explorerRelay.ts

@@ -64,18 +64,26 @@ export const sendExplorerRequest = (operation: string): void => {
 export const receiveExplorerRequests = (
   callback: (event: CustomEvent<MessageObj<string>>) => void
 ): (() => void) => {
-  window.addEventListener(EXPLORER_REQUEST, callback);
+  function handleEvent(event: Event) {
+    callback(event as CustomEvent<MessageObj<string>>);
+  }
+
+  window.addEventListener(EXPLORER_REQUEST, handleEvent);
   return () => {
-    window.removeEventListener(EXPLORER_REQUEST, callback);
+    window.removeEventListener(EXPLORER_REQUEST, handleEvent);
   };
 };
 
 export const receiveSubscriptionTerminationRequest = (
   callback: (event: CustomEvent<MessageObj<undefined>>) => void
 ): (() => void) => {
-  window.addEventListener(EXPLORER_SUBSCRIPTION_TERMINATION, callback);
+  function handleEvent(event: Event) {
+    callback(event as CustomEvent<MessageObj<undefined>>);
+  }
+
+  window.addEventListener(EXPLORER_SUBSCRIPTION_TERMINATION, handleEvent);
   return () => {
-    window.removeEventListener(EXPLORER_SUBSCRIPTION_TERMINATION, callback);
+    window.removeEventListener(EXPLORER_SUBSCRIPTION_TERMINATION, handleEvent);
   };
 };
 
@@ -95,7 +103,8 @@ export const sendResponseToExplorer = ({
 };
 
 export const receiveExplorerResponses = (): (() => void) => {
-  const handleResponse = ({ detail }: CustomEvent<MessageObj>) => {
+  const handleResponse = (event: Event) => {
+    const { detail } = event as CustomEvent<MessageObj>;
     explorer.broadcast(detail);
   };
 

src/application/components/Queries/Queries.tsx

@@ -87,7 +87,7 @@ export const Queries = ({ explorerIFrame }: QueriesProps) => {
         )}
         <QueryLayout.Tabs
           value={currentTab}
-          onChange={(value: QueryTabs) => setCurrentTab(value)}
+          onChange={(value) => setCurrentTab(value)}
         >
           <Tabs.List>
             <Tabs.Trigger value={QueryTabs.Variables}>Variables</Tabs.Trigger>

src/application/components/QueryLayout/Tabs.tsx

@@ -1,14 +1,19 @@
 import { ReactNode } from "react";
 import { Tabs as TabsBase } from "../Tabs";
 
-interface TabsProps {
+interface TabsProps<TValue extends string> {
   children: ReactNode;
-  defaultValue?: string;
-  value?: string;
-  onChange?: (value: string) => void;
+  defaultValue?: TValue;
+  value?: TValue;
+  onChange?: (value: TValue) => void;
 }
 
-export function Tabs({ children, defaultValue, value, onChange }: TabsProps) {
+export function Tabs<TValue extends string = string>({
+  children,
+  defaultValue,
+  value,
+  onChange,
+}: TabsProps<TValue>) {
   return (
     <TabsBase
       className="[grid-area:tabs] lg:overflow-hidden lg:-my-2"

src/application/components/Tabs/Tabs.tsx

@@ -6,27 +6,27 @@ import { Content } from "./Content";
 import { List } from "./List";
 import { Trigger } from "./Trigger";
 
-interface TabsProps {
+interface TabsProps<TValue extends string> {
   children: ReactNode;
   className?: string;
-  defaultValue?: string;
-  value?: string;
-  onChange?: (value: string) => void;
+  defaultValue?: TValue;
+  value?: TValue;
+  onChange?: (value: TValue) => void;
 }
 
-export function Tabs({
+export function Tabs<TValue extends string = string>({
   children,
   className,
   defaultValue,
   value,
   onChange,
-}: TabsProps) {
+}: TabsProps<TValue>) {
   return (
     <Root
       className={clsx(className, "flex data-orientation-horizontal:flex-col")}
       defaultValue={defaultValue}
       value={value}
-      onValueChange={onChange}
+      onValueChange={(value) => onChange?.(value as TValue)}
     >
       {children}
     </Root>

src/application/stateMachine.ts

@@ -1,3 +1,5 @@
+import { SafeAny } from "../types";
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type NoInfer<T> = [T][T extends any ? 0 : never];
 
@@ -63,12 +65,8 @@ type Event<
   Context extends Record<string, unknown>,
 > = { type: EventName; context?: Partial<Context> };
 
-export type GetStates<
-  TMachine extends Machine<string, string, Record<string, unknown>>,
-> =
-  TMachine extends Machine<infer State, string, Record<string, unknown>>
-    ? State
-    : never;
+export type GetStates<TMachine> =
+  TMachine extends Machine<infer State, SafeAny, SafeAny> ? State : never;
 
 export function createMachine<
   State extends string,

src/extension/devtools/devtools.ts

@@ -111,7 +111,7 @@ function sendMessageToClient(message: string) {
 }
 
 function startRequestInterval(ms = 500) {
-  let id: NodeJS.Timeout;
+  let id: number;
 
   if (devtoolsMachine.matches("connected")) {
     sendMessageToClient(REQUEST_DATA);