Improve type defs for styled-components

src/components/AttachmentsPage/AttachmentList.tsx

@@ -45,13 +45,6 @@ const AttachmentList = ({ storage }: AttachmentListProps) => {
                   event.preventDefault()
 
                   popup(event, [
-                    // {
-                    //   type: MenuTypes.Normal,
-                    //   label: 'Copy Image Reference',
-                    //   onClick: () => {
-                    //     // TODO Clipboard
-                    //   }
-                    // },
                     {
                       type: MenuTypes.Normal,
                       label: 'Download',

src/components/GlobalStyle.tsx

@@ -2,7 +2,7 @@ import { createGlobalStyle } from 'styled-components'
 import { backgroundColor, textColor } from '../lib/styled/styleFunctions'
 import { BaseTheme } from '../lib/styled/BaseTheme'
 
-export default createGlobalStyle<BaseTheme>`
+export default createGlobalStyle<{ theme: BaseTheme }>`
   body {
     margin: 0;
     ${backgroundColor}

src/components/Modal/index.tsx

@@ -60,7 +60,7 @@ export default () => {
   useGlobalKeyDownHandler(keydownHandler)
 
   const backgroundClickHandler = useMemo(() => {
-    return (event: MouseEvent) => {
+    return (event: React.MouseEvent<HTMLDivElement>) => {
       event.preventDefault()
       closeHandler()
     }

src/components/Tutorials/TutorialsNavigator.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo, useCallback } from 'react'
 import { tutorialsTree, TutorialsNavigatorTreeItem } from '../../lib/tutorials'
-import SideNavigatorItem from '../SideNavigator/SideNavigatorItem'
+import SideNavigatorItem from '../molecules/SideNavigatorItem'
 import { useRouter, useCurrentTutorialPathname } from '../../lib/router'
 import { useGeneralStatus } from '../../lib/generalStatus'
 import { useContextMenu, MenuTypes } from '../../lib/contextMenu'

src/components/atoms/ButtonIcon.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import styled from '../../lib/styled'
 
-const StyledButtonIcon = styled.button<{ active: boolean }>`
+const StyledButtonIcon = styled.button`
   color: currentColor;
   background-color: transparent;
   border: none;

typings/styled-components.d.ts

@@ -1,12 +1,9 @@
 declare module 'styled-components' {
   export type StyledComponent<T1, T2, T3, T4> = any
-  export function createGlobalStyle<T>(
+  export function createGlobalStyle<P>(
     strings: TemplateStringsArray,
     ...keys: Array<
-      | number
+      number | undefined | string | ((props: P) => string | number | undefined)
-      | undefined
-      | string
-      | ((props: { theme: T }) => string | number | undefined)
     >
   ): any
   export type ThemedBaseStyledInterface<T> = {