diff --git a/app/components/CenteredContent.tsx b/app/components/CenteredContent.tsx index 7ddb94255..6eb0d9d6f 100644 --- a/app/components/CenteredContent.tsx +++ b/app/components/CenteredContent.tsx @@ -12,7 +12,7 @@ const Container = styled.div` padding: ${(props) => (props.withStickyHeader ? "4px 12px" : "60px 12px")}; ${breakpoint("tablet")` - padding: ${(props: any) => + padding: ${(props: Props) => props.withStickyHeader ? "4px 44px 60px" : "60px 44px"}; `}; `; diff --git a/app/components/ContextMenu/Separator.tsx b/app/components/ContextMenu/Separator.tsx index 0a40982c1..60f7d9c03 100644 --- a/app/components/ContextMenu/Separator.tsx +++ b/app/components/ContextMenu/Separator.tsx @@ -2,7 +2,7 @@ import * as React from "react"; import { MenuSeparator } from "reakit/Menu"; import styled from "styled-components"; -export default function Separator(rest: any) { +export default function Separator(rest: React.HTMLAttributes) { return ( {(props) => } diff --git a/app/components/GroupListItem.tsx b/app/components/GroupListItem.tsx index eb7b3e2e7..e23fb5eb4 100644 --- a/app/components/GroupListItem.tsx +++ b/app/components/GroupListItem.tsx @@ -19,7 +19,7 @@ type Props = RootStore & { membership?: CollectionGroupMembership; showFacepile?: boolean; showAvatar?: boolean; - renderActions: (arg0: { openMembersModal: () => void }) => React.ReactNode; + renderActions: (params: { openMembersModal: () => void }) => React.ReactNode; }; @observer diff --git a/app/components/NavLink.tsx b/app/components/NavLink.tsx index 311f8e180..a81ff4f72 100644 --- a/app/components/NavLink.tsx +++ b/app/components/NavLink.tsx @@ -1,8 +1,15 @@ import * as React from "react"; -import { NavLink, Route } from "react-router-dom"; +import { match, NavLink, Route } from "react-router-dom"; type Props = React.ComponentProps & { - children?: (match: any) => React.ReactNode; + children?: ( + match: + | match<{ + [x: string]: string | undefined; + }> + | boolean + | null + ) => React.ReactNode; exact?: boolean; activeStyle?: React.CSSProperties; to: string; diff --git a/app/components/PathToDocument.tsx b/app/components/PathToDocument.tsx index 915afc001..a449170ab 100644 --- a/app/components/PathToDocument.tsx +++ b/app/components/PathToDocument.tsx @@ -14,7 +14,7 @@ type Props = { collection: Collection | null | undefined; onSuccess?: () => void; style?: React.CSSProperties; - ref?: (arg0: React.ElementRef<"div"> | null | undefined) => void; + ref?: (element: React.ElementRef<"div"> | null | undefined) => void; }; @observer diff --git a/app/components/Sidebar/Sidebar.tsx b/app/components/Sidebar/Sidebar.tsx index bb97e32d4..e02d10bd5 100644 --- a/app/components/Sidebar/Sidebar.tsx +++ b/app/components/Sidebar/Sidebar.tsx @@ -65,8 +65,7 @@ const Sidebar = React.forwardRef( const handleStopDrag = React.useCallback(() => { setResizing(false); - if (document.activeElement) { - // @ts-expect-error ts-migrate(2339) FIXME: Property 'blur' does not exist on type 'Element'. + if (document.activeElement instanceof HTMLElement) { document.activeElement.blur(); } diff --git a/app/hooks/useDebouncedCallback.ts b/app/hooks/useDebouncedCallback.ts index 9d24782ad..ddd6a5161 100644 --- a/app/hooks/useDebouncedCallback.ts +++ b/app/hooks/useDebouncedCallback.ts @@ -1,11 +1,11 @@ import * as React from "react"; -export default function useDebouncedCallback( - callback: (arg0: any) => unknown, +export default function useDebouncedCallback( + callback: (...params: T[]) => unknown, wait: number ) { // track args & timeout handle between calls - const argsRef = React.useRef(); + const argsRef = React.useRef(); const timeout = React.useRef>(); function cleanup() { @@ -16,12 +16,11 @@ export default function useDebouncedCallback( // make sure our timeout gets cleared if consuming component gets unmounted React.useEffect(() => cleanup, []); - return function (...args: any) { + return function (...args: T[]) { argsRef.current = args; cleanup(); timeout.current = setTimeout(() => { if (argsRef.current) { - // @ts-expect-error ts-migrate(2556) FIXME: Expected 1 arguments, but got 0 or more. callback(...argsRef.current); } }, wait); diff --git a/app/scenes/Document/components/MultiplayerEditor.tsx b/app/scenes/Document/components/MultiplayerEditor.tsx index 6b5bbcb8b..0a04a0b1f 100644 --- a/app/scenes/Document/components/MultiplayerEditor.tsx +++ b/app/scenes/Document/components/MultiplayerEditor.tsx @@ -241,8 +241,8 @@ function MultiplayerEditor({ onSynced, ...props }: Props, ref: any) { // we must prevent the user from continuing to edit as their changes will not // be persisted. See: https://github.com/yjs/yjs/issues/303 React.useEffect(() => { - function onUnhandledError(err: any) { - if (err.message.includes("URIError: URI malformed")) { + function onUnhandledError(event: ErrorEvent) { + if (event.message.includes("URIError: URI malformed")) { showToast( t( "Sorry, the last change could not be persisted – please reload the page" diff --git a/app/scenes/Invite.tsx b/app/scenes/Invite.tsx index 544e7f534..0c829be7a 100644 --- a/app/scenes/Invite.tsx +++ b/app/scenes/Invite.tsx @@ -223,7 +223,7 @@ function Invite({ onSubmit }: Props) { required={!!invite.email} /> handleRoleChange(role as Role, index)} + onChange={(role: Role) => handleRoleChange(role, index)} value={invite.role} labelHidden={index !== 0} short diff --git a/app/scenes/Settings/components/ImageUpload.tsx b/app/scenes/Settings/components/ImageUpload.tsx index 4566b8ec2..2b33ef4bb 100644 --- a/app/scenes/Settings/components/ImageUpload.tsx +++ b/app/scenes/Settings/components/ImageUpload.tsx @@ -14,8 +14,6 @@ import withStores from "~/components/withStores"; import { compressImage } from "~/utils/compressImage"; import { uploadFile, dataUrlToBlob } from "~/utils/files"; -const EMPTY_OBJECT = {}; - export type Props = { onSuccess: (url: string) => void | Promise; onError: (error: string) => void; @@ -84,7 +82,7 @@ class ImageUpload extends React.Component { this.isCropping = false; }; - handleZoom = (event: React.DragEvent) => { + handleZoom = (event: React.ChangeEvent) => { const target = event.target; if (target instanceof HTMLInputElement) { @@ -119,7 +117,6 @@ class ImageUpload extends React.Component { max="2" step="0.01" defaultValue="1" - // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call. onChange={this.handleZoom} /> @@ -139,9 +136,6 @@ class ImageUpload extends React.Component { {({ getRootProps, getInputProps }) => (