Upgrade to TypeScript 6

.yarn/sdks/typescript/package.json

@@ -1,6 +1,6 @@
 {
   "name": "typescript",
-  "version": "5.9.3-sdk",
+  "version": "6.0.2-sdk",
   "main": "./lib/typescript.js",
   "type": "commonjs",
   "bin": {

app/javascript/@types/assets.d.ts

@@ -2,3 +2,5 @@ declare module '*.svg' {
   const content: string;
   export default content;
 }
+
+declare module 'vite/modulepreload-polyfill';

app/javascript/Authentication/EditUser.tsx

@@ -103,7 +103,11 @@ function EditUserForm() {
         <div className="card-header">{t('authentication.editUser.accountDataHeader')}</div>
 
         <div className="card-body">
-          <UserFormFields formState={formState} setFormState={setFormState} showNameWarning />
+          <UserFormFields
+            formState={formState}
+            setFormState={setFormState as React.Dispatch<React.SetStateAction<UserFormState>>}
+            showNameWarning
+          />
           <div className="mb-3">
             <label className="form-label" htmlFor={passwordFieldId}>
               {t('authentication.editUser.passwordLabel')}

app/javascript/Authentication/SignInForm.tsx

@@ -72,8 +72,8 @@ function SignInForm(): React.JSX.Element {
         autoDismissAfter: 1000 * 60,
       });
     } catch (e) {
-      if (!e.message.match(/invalid email or password/i)) {
-        errorReporting().error(e);
+      if (!(e instanceof Error && e.message.match(/invalid email or password/i))) {
+        errorReporting().error(e as string | Error);
       }
 
       // we're doing suppressError below specifically so that we can not capture invalid email

app/javascript/AuthenticityTokensContext.tsx

@@ -33,7 +33,9 @@ export default class AuthenticityTokensManager {
 
     if (
       Object.keys(newTokens).length === Object.keys(prevTokens ?? {}).length &&
-      Object.keys(prevTokens).every((key: keyof typeof prevTokens) => newTokens[key] !== prevTokens[key])
+      Object.keys(prevTokens).every(
+        (key) => newTokens[key as keyof typeof prevTokens] !== prevTokens[key as keyof typeof prevTokens],
+      )
     ) {
       return;
     }

app/javascript/BuiltInFormControls/GraphQLAsyncSelect.tsx

@@ -5,21 +5,30 @@ import { useApolloClient } from '@apollo/client/react';
 
 // This will be a lot more useful once https://github.com/microsoft/TypeScript/issues/36981
 // is fixed
-export type GraphQLAsyncSelectProps<QueryType extends TypedDocumentNode, OptionType, IsMulti extends boolean> = Omit<
-  AsyncProps<OptionType, IsMulti, GroupBase<OptionType>>,
-  'loadOptions'
-> & {
+// TypedDocumentNode<any, any> is needed because TypeScript 6 now correctly checks variance
+// of phantom type parameters in TypedDocumentNode, and only `any` bypasses this constraint.
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export type GraphQLAsyncSelectProps<
+  QueryType extends TypedDocumentNode<any, any>,
+  OptionType,
+  IsMulti extends boolean,
+> = Omit<AsyncProps<OptionType, IsMulti, GroupBase<OptionType>>, 'loadOptions'> & {
   query: QueryType;
   getVariables: (inputValue: string) => VariablesOf<QueryType>;
   getOptions: (results: ResultOf<QueryType>) => OptionType[];
 };
 
-function GraphQLAsyncSelect<QueryType extends TypedDocumentNode, OptionType, IsMulti extends boolean = false>({
+function GraphQLAsyncSelect<
+  QueryType extends TypedDocumentNode<any, any>,
+  OptionType,
+  IsMulti extends boolean = false,
+>({
   query,
   getOptions,
   getVariables,
   ...otherProps
 }: GraphQLAsyncSelectProps<QueryType, OptionType, IsMulti>): React.JSX.Element {
+  /* eslint-enable @typescript-eslint/no-explicit-any */
   const client = useApolloClient();
   const loadOptions = async (inputValue: string) => {
     try {

app/javascript/BuiltInFormControls/ScheduledValueTimespanRow.tsx

@@ -41,7 +41,7 @@ function ScheduledValueTimespanRow<ValueType>({
   );
 
   const valueChanged = useCallback(
-    (value: ValueType) => valueDidChange(rowIdentifier, value),
+    (value: ValueType | undefined) => valueDidChange(rowIdentifier, value),
     [valueDidChange, rowIdentifier],
   );
 

app/javascript/BuiltInFormControls/UserConProfileSelect.tsx

@@ -14,12 +14,19 @@ type DO<QueryType extends DefaultUserConProfilesQueryData> = NonNullable<
   QueryType['convention']
 >['user_con_profiles_paginated']['entries'][0];
 
-export type UserConProfileSelectProps<QueryType extends TypedDocumentNode, OptionType, IsMulti extends boolean> = Omit<
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// TypedDocumentNode<any, any> needed because TypeScript 6 variance checks require it
+export type UserConProfileSelectProps<
+  QueryType extends TypedDocumentNode<any, any>,
+  OptionType,
+  IsMulti extends boolean,
+> = Omit<
   GraphQLAsyncSelectProps<QueryType, OptionType, IsMulti>,
   'isClearable' | 'getOptions' | 'getVariables' | 'getOptionValue' | 'formatOptionLabel' | 'query'
 > & {
   userConProfilesQuery?: DocumentNode;
 };
+/* eslint-enable @typescript-eslint/no-explicit-any */
 
 function UserConProfileSelect<
   IsMulti extends boolean = false,

app/javascript/BuiltInFormControls/UserSelect.tsx

@@ -11,7 +11,6 @@ type UserNameLabelProps<OptionType, IsMulti extends boolean> = MultiValueGeneric
     name?: string;
   };
   children: ReactNode;
-  [x: string]: unknown;
 };
 
 function UserNameLabel<OptionType, IsMulti extends boolean>({

app/javascript/BuiltInForms/FileUploadForm.tsx

@@ -9,7 +9,11 @@ import RailsDirectUploadsContext from '../RailsDirectUploadsContext';
 import classNames from 'classnames';
 import { AuthenticityTokensContext } from '../AuthenticityTokensContext';
 
-function uploadFile(file: File, directUploadURL: string, onProgress?: (event: ProgressEvent<XMLHttpRequest>) => void) {
+function uploadFile(
+  file: File,
+  directUploadURL: string,
+  onProgress?: (event: ProgressEvent<XMLHttpRequestEventTarget>) => void,
+) {
   return new Promise<Blob | undefined>((resolve, reject) => {
     const delegate: DirectUploadDelegate = {
       directUploadWillStoreFileWithXHR: (xhr) => {
@@ -44,7 +48,7 @@ function FileUploadForm({ onUpload }: FileUploadFormProps): React.JSX.Element {
   const manager = useContext(AuthenticityTokensContext);
   const directUploadsAuthenticityToken = manager.tokens?.railsDirectUploads;
 
-  const onProgress = useCallback((event: ProgressEvent<XMLHttpRequest>) => {
+  const onProgress = useCallback((event: ProgressEvent<XMLHttpRequestEventTarget>) => {
     setProgressIndeterminate(!event.lengthComputable);
     if (event.lengthComputable) {
       setProgressPercent((event.loaded / event.total) * 100);

app/javascript/BuiltInForms/RunFormFields.tsx

@@ -130,7 +130,7 @@ function RunFormFields<RunType extends RunForRunFormFields>({
             rooms={convention.rooms ?? []}
             isMulti
             value={run.rooms}
-            onChange={(rooms: RoomForSelect[]) => onChange((prevRun) => ({ ...prevRun, rooms }))}
+            onChange={(rooms) => onChange((prevRun) => ({ ...prevRun, rooms: [...rooms] }))}
           />
         )}
       </FormGroupWithLabel>

app/javascript/CmsAdmin/CmsContentGroupsAdmin/CmsContentGroupFormFields.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import uniqWith from 'lodash/uniqWith';
 import { BootstrapFormInput, FormGroupWithLabel, notEmpty } from '@neinteractiveliterature/litform';
 
-import CmsContentSelect, { CmsContentOption } from './CmsContentSelect';
+import CmsContentSelect from './CmsContentSelect';
 import PermissionsTableInput from '../../Permissions/PermissionsTableInput';
 import SelectWithLabel from '../../BuiltInFormControls/SelectWithLabel';
 import { permissionEquals, getPermissionNamesForModelType } from '../../Permissions/PermissionUtils';
@@ -84,9 +84,7 @@ function CmsContentGroupFormFields({
             name="contents"
             value={contentGroup.contents}
             inputId={id}
-            onChange={(contents: CmsContentOption[]) =>
-              setContentGroup && setContentGroup({ ...contentGroup, contents })
-            }
+            onChange={(contents) => setContentGroup && setContentGroup({ ...contentGroup, contents: [...contents] })}
             isDisabled={disabled || readOnly}
           />
         )}
@@ -111,7 +109,7 @@ function CmsContentGroupFormFields({
               }}
               readOnly={readOnly}
               changeSet={permissionsChangeSet}
-              add={addPermission}
+              add={addPermission as UsePermissionsChangeSetOptions['add']}
               remove={removePermission}
             />
           )}
@@ -122,7 +120,7 @@ function CmsContentGroupFormFields({
               options={convention?.staff_positions ?? []}
               getOptionValue={(staffPosition) => staffPosition.id.toString()}
               getOptionLabel={(staffPosition) => staffPosition.name}
-              onChange={addRole}
+              onChange={(role) => role && addRole(role)}
             />
           )}
         </div>

app/javascript/CmsAdmin/CmsContentGroupsAdmin/EditCmsContentGroup.tsx

@@ -13,7 +13,7 @@ import { ErrorDisplay, notEmpty } from '@neinteractiveliterature/litform';
 
 import { buildPermissionInput } from '../../Permissions/PermissionUtils';
 import { useChangeSet } from '../../ChangeSet';
-import CmsContentGroupFormFields from './CmsContentGroupFormFields';
+import CmsContentGroupFormFields, { CmsContentGroupFormFieldsProps } from './CmsContentGroupFormFields';
 import { CmsContentGroupsAdminQueryData } from './queries.generated';
 import { CmsContentTypeIndicator } from '../../graphqlTypes.generated';
 import { singleCmsContentGroupAdminLoader, SingleCmsContentGroupAdminLoaderResult } from './loaders';
@@ -89,7 +89,7 @@ function EditCmsContentGroupForm() {
         disabled={submitInProgress}
         convention={convention}
         permissionsChangeSet={permissionsChangeSet}
-        addPermission={addPermission}
+        addPermission={addPermission as unknown as CmsContentGroupFormFieldsProps['addPermission']}
         removePermission={removePermission}
       />
 

app/javascript/CmsAdmin/CmsContentGroupsAdmin/NewCmsContentGroup.tsx

@@ -6,7 +6,7 @@ import { ErrorDisplay } from '@neinteractiveliterature/litform';
 import { buildPermissionInput } from '../../Permissions/PermissionUtils';
 import { useChangeSet } from '../../ChangeSet';
 import usePageTitle from '../../usePageTitle';
-import CmsContentGroupFormFields from './CmsContentGroupFormFields';
+import CmsContentGroupFormFields, { CmsContentGroupFormFieldsProps } from './CmsContentGroupFormFields';
 import { CmsContentGroupsAdminQueryData } from './queries.generated';
 import { CmsContentTypeIndicator, CreateCmsContentGroupInput } from '../../graphqlTypes.generated';
 import { useCmsContentGroupsAdminLoader } from './loaders';
@@ -79,7 +79,7 @@ function NewCmsContentGroup(): React.JSX.Element {
         disabled={createInProgress}
         convention={data.convention}
         permissionsChangeSet={permissionsChangeSet}
-        addPermission={addPermission}
+        addPermission={addPermission as unknown as CmsContentGroupFormFieldsProps['addPermission']}
         removePermission={removePermission}
       />
 

app/javascript/CmsAdmin/NavigationItemsAdmin/Client.ts

@@ -81,7 +81,7 @@ class Client implements CadmusNavbarAdminClient {
       });
       return data!.cmsParent.cmsNavigationItems.map(graphqlNavigationItemToCadmusNavbarAdminObject);
     } catch (error) {
-      this.onError(error);
+      this.onError(error as Error);
       throw error;
     } finally {
       this.requestsInProgress.loadingNavigationItems = false;
@@ -105,7 +105,7 @@ class Client implements CadmusNavbarAdminClient {
         name: page.name ?? 'Untitled page',
       }));
     } catch (error) {
-      this.onError(error);
+      this.onError(error as Error);
       throw error;
     } finally {
       this.requestsInProgress.loadingPages = false;
@@ -150,7 +150,7 @@ class Client implements CadmusNavbarAdminClient {
       await this.apolloClient.resetStore();
       return graphqlNavigationItemToCadmusNavbarAdminObject(mutationResponse.cms_navigation_item);
     } catch (error) {
-      this.onError(error);
+      this.onError(error as Error);
       throw error;
     } finally {
       this.requestsInProgress.savingNavigationItem = false;
@@ -168,7 +168,7 @@ class Client implements CadmusNavbarAdminClient {
       });
       await this.apolloClient.resetStore();
     } catch (error) {
-      this.onError(error);
+      this.onError(error as Error);
       throw error;
     } finally {
       this.requestsInProgress.deletingNavigationItem = false;
@@ -193,7 +193,7 @@ class Client implements CadmusNavbarAdminClient {
 
       await this.apolloClient.resetStore();
     } catch (error) {
-      this.onError(error);
+      this.onError(error as Error);
       throw error;
     } finally {
       this.requestsInProgress.sortingNavigationItems = false;

app/javascript/ConventionAdmin/ConventionFormGeneralSection.tsx

@@ -124,7 +124,11 @@ function ConventionFormGeneralSection({
         disabled={disabled}
       />
 
-      <ConventionLanguageInput value={convention.language} onChange={setLanguage} disabled={disabled} />
+      <ConventionLanguageInput
+        value={convention.language}
+        onChange={setLanguage as React.Dispatch<React.SetStateAction<string | null | undefined>>}
+        disabled={disabled}
+      />
 
       <BootstrapFormInput
         name="domain"

app/javascript/ConventionAdmin/ConventionFormWebsiteSection.tsx

@@ -59,7 +59,7 @@ function ConventionFormWebsiteSection({
         getOptionValue={(option) => option?.id.toString() ?? ''}
         getOptionLabel={(option) => option?.name ?? ''}
         options={cmsLayouts}
-        onChange={(newValue: typeof convention.defaultLayout) => setDefaultLayout(newValue)}
+        onChange={(newValue) => newValue && setDefaultLayout(newValue)}
         styles={selectStyles}
         isDisabled={disabled}
       />
@@ -71,7 +71,7 @@ function ConventionFormWebsiteSection({
         getOptionValue={(option) => option?.id.toString() ?? ''}
         getOptionLabel={(option) => option?.name ?? ''}
         options={pages}
-        onChange={(newValue: typeof convention.rootPage) => setRootPage(newValue)}
+        onChange={(newValue) => newValue && setRootPage(newValue)}
         styles={selectStyles}
         isDisabled={disabled}
       />

app/javascript/DevModeGraphiql.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useContext, useEffect } from 'react';
 import { GraphiQL } from 'graphiql';
 import { parse } from 'graphql';
-import { Fetcher } from '@graphiql/toolkit';
+import { Fetcher, FetcherParams } from '@graphiql/toolkit';
 
 import { ApolloLink, execute } from '@apollo/client';
 import { useIntercodeApolloLink } from './useIntercodeApolloClient';
@@ -27,15 +27,15 @@ function DevModeGraphiql({ authenticityTokens }: DevModeGraphiqlProps): React.JS
   const link = useIntercodeApolloLink(new URL('/graphql', window.location.href), manager);
   const client = useApolloClient();
 
-  const fetcher: Fetcher = useCallback(
-    (operation) => {
+  const fetcher = useCallback(
+    (operation: FetcherParams) => {
       const operationAsGraphQLRequest = operation as unknown as ApolloLink.Request;
 
       operationAsGraphQLRequest.query = parse(operation.query);
       return execute(link, operationAsGraphQLRequest, { client });
     },
     [link, client],
-  );
+  ) as unknown as Fetcher;
 
   return <GraphiQL fetcher={fetcher} editorTheme="intercode" />;
 }

app/javascript/EventAdmin/EditRunModal.tsx

@@ -58,7 +58,12 @@ function EditRunModal({
         </div>
         {run && (
           <div className="modal-body">
-            <RunFormFields convention={convention} run={run} event={event} onChange={editingRunChanged} />
+            <RunFormFields
+              convention={convention}
+              run={run as RunFieldsFragment}
+              event={event}
+              onChange={editingRunChanged as React.Dispatch<React.SetStateAction<RunFieldsFragment>>}
+            />
           </div>
         )}
         <div className="modal-footer">

app/javascript/EventAdmin/NewEvent.tsx

@@ -116,7 +116,7 @@ function NewEvent() {
         encType: 'application/json',
       });
     } catch (error) {
-      setCreateError(error);
+      setCreateError(error instanceof Error ? error : undefined);
       throw error;
     }
   };

app/javascript/EventAdmin/useEventForm.tsx

@@ -121,8 +121,8 @@ export default function useEventForm<
   const { formRef, validate, itemInteractionTrackingProps } = useValidatableForm();
 
   const formResponseValuesChanged = useCallback(
-    (newResponseValues: EventType['form_response_attrs']) => {
-      const processedResponseValues = Object.entries(newResponseValues).reduce(
+    (newResponseValues: unknown) => {
+      const processedResponseValues = Object.entries(newResponseValues as EventType['form_response_attrs']).reduce(
         (processed, [key, value]) => ({
           ...processed,
           ...processFormResponseValue(key, value),

app/javascript/EventProposals/CreateEventProposalModal.tsx

@@ -83,7 +83,7 @@ function CreateEventProposalModal({
           value={department || (eventCategory && eventCategory.department == null ? eventCategory : null)}
           getOptionValue={(option) => `${option.__typename}:${option.id}`}
           getOptionLabel={(option) => option.name}
-          onChange={(entity: (typeof topLevelEntities)[0]) => {
+          onChange={(entity) => {
             if (!entity) {
               setDepartment(undefined);
               setEventCategory(undefined);
@@ -111,9 +111,7 @@ function CreateEventProposalModal({
               value={eventCategory}
               getOptionValue={(option) => option.id.toString()}
               getOptionLabel={(option) => option.name}
-              onChange={(category: (typeof departmentEventCategories)[0]) => {
-                setEventCategory(category);
-              }}
+              onChange={(category) => setEventCategory(category ?? undefined)}
             />
           </>
         )}
@@ -142,9 +140,7 @@ function CreateEventProposalModal({
           value={cloneEventProposal}
           getOptionValue={(option) => option.id.toString()}
           getOptionLabel={(option) => `${option.title} (${option.event_category.name}, ${option.convention.name})`}
-          onChange={(proposal: (typeof userEventProposals)[0]) => {
-            setCloneEventProposal(proposal);
-          }}
+          onChange={(proposal) => setCloneEventProposal(proposal ?? undefined)}
         />
 
         {cloneEventProposal &&