Use the correct type inplace any where applicable (#1533)

* Add the @typescript-eslint no-explicit-any rule to eslint

* Add lint script to package.json file

* Add public to eslint ignore file

* Run lint, fix existing any type errors and the other type errors

* Remove the @typescript-eslint/no-explicit-any type rule from eslint

* Remove the lint script from package.json file

* remove eslint exceptions and revert unknown to any type

Co-authored-by: Phil Leggetter <phil@leggetter.co.uk>

.eslintignore

@@ -1,3 +1,4 @@
 gatsby/
 gatsby*
-mdxImportGen.js
+mdxImportGen.js
+public

plugins/gasby-remark-lazy-imgix/index.js

@@ -1,4 +1,7 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+// eslint-disable-next-line no-redeclare
 /* global __dirname, require, module */
+
 const visit = require('unist-util-visit')
 const imageSize = require(`probe-image-size`)
 const fs = require(`fs-extra`)

src/components/AnchorScrollNavbar/index.tsx

@@ -12,7 +12,7 @@ const ButtonLink = ({
 }: {
     section: string
     currentSection: string
-    children: any
+    children: React.ReactNode
 }) => {
     const baseClasses = 'px-3 py-2 rounded'
     const classList =

src/components/Blog/BlogPostLayout/index.tsx

@@ -13,7 +13,7 @@ import { BlogIntro } from '../BlogIntro'
 
 interface BlogPostLayoutProps {
     pageTitle: string
-    children: any
+    children: React.ReactNode
     featuredImage?: string | null | undefined
     featuredImageType?: string
     blogArticleSlug: string

src/components/CallToAction/index.tsx

@@ -21,7 +21,7 @@ interface CallToActionProps {
     type?: string
     icon?: string
     iconBg?: string
-    children: any
+    children: React.ReactNode
     width?: string
     href?: string
     to?: string

src/components/Careers/InterviewProcess/index.tsx

@@ -11,7 +11,7 @@ import offerImg from './images/offer.svg'
 interface InterviewStepProps {
     image: string
     title: string
-    children: any
+    children: React.ReactNode
     titleColor: string
     className?: string
 }

src/components/Careers/Transparency/index.tsx

@@ -10,7 +10,7 @@ import feedbackImg from './images/feedback.svg'
 interface TransparencyFeatureProps {
     image: string
     title: string
-    children: any
+    children: React.ReactNode
     titleColor: string
     className?: string
 }

src/components/CodeBlock/index.tsx

@@ -42,7 +42,7 @@ export const CodeBlock = (props: CodeBlockProps) => {
             setProjectName(getCookie('ph_current_project_name') || '')
             const phToken = getCookie('ph_current_project_token')
             if (phToken) {
-                let updatedCode = props.children.props.children
+                const updatedCode = props.children.props.children
                     .trim()
                     .replace(/<ph_project_api_key>/g, phToken)
                     .replace(/<ph_instance_address>/g, 'https://app.posthog.com')
@@ -71,7 +71,7 @@ export const CodeBlock = (props: CodeBlockProps) => {
         )
         const tokenHighlightHtml = `<span class='code-block-ph-token' data-tooltip='This is the API key of your ${projectName} project in PostHog Cloud.'>${token}</span>`
         const tokenMatchRegex = new RegExp(token, 'g')
-        let snapshotIndex = 0
+        const snapshotIndex = 0
         let node: HTMLElement | null = phTokenElements.snapshotItem(snapshotIndex) as HTMLElement
         while (node) {
             node.innerHTML = node.innerHTML.replace(tokenMatchRegex, tokenHighlightHtml)

src/components/Container/index.tsx

@@ -4,7 +4,7 @@ interface ContainerProps {
     onPostPage: boolean
     className: string
     containerStyle?: any
-    children: any
+    children: React.ReactNode
 }
 
 export const Container = ({ onPostPage, className, containerStyle = {}, children }: ContainerProps) => {

src/components/ContributorCard/emojiKey.ts

@@ -1,4 +1,11 @@
-export const emojiKey: Record<string, any> = {
+interface EmojiKeyInterface {
+    [key: string]: {
+        symbol: string
+        description: string
+    }
+}
+
+export const emojiKey: EmojiKeyInterface = {
     a11y: {
         symbol: '️️️️♿️',
         description: 'Accessibility',

src/components/Footer/Footer.tsx

@@ -8,7 +8,7 @@ import { mergeClassList } from '../../lib/utils'
 interface FooterListItemProps {
     to?: string
     href?: string
-    children: any
+    children: React.ReactNode
     border?: boolean
 }
 
@@ -27,11 +27,11 @@ const FooterListItem = ({ to = '', border = true, href = '', children }: FooterL
     )
 }
 
-const FooterSubCategory = ({ children }: { children: any }) => (
+const FooterSubCategory = ({ children }: { children: React.ReactNode }) => (
     <header className="block text-white mt-8 mb-2 font-bold text-sm">{children}</header>
 )
 
-const FooterCategory = ({ children, title }: { children: any; title: string }) => {
+const FooterCategory = ({ children, title }: { children: React.ReactNode; title: string }) => {
     const [expanded, setExpanded] = useState(false)
 
     return (

src/components/Header/Header.tsx

@@ -10,7 +10,7 @@ import Sprites from './Sprites'
 import Link from '../Link'
 import AnimatedBurger from '../AnimatedBurger'
 
-const PrimaryCta = ({ children, className = '' }: { children: any; className?: string }) => {
+const PrimaryCta = ({ children, className = '' }: { children: React.ReactNode; className?: string }) => {
     const classList = `button-primary ${className} border-none px-4 py-2 ml-2 lg:ml-4 mt-4 lg:mt-0 transition-none hover:transition-none text-xs rounded-sm`
 
     return (

src/components/HiddenSection/index.tsx

@@ -5,8 +5,8 @@ import './style.scss'
 
 interface HiddenSectionProps {
     headingType: Heading
-    title: any
-    children: any
+    title: string
+    children: React.ReactNode
     endWithDivider?: boolean
     defaultIsOpen?: boolean
 }

src/components/Layout/index.tsx

@@ -26,7 +26,7 @@ interface LayoutProps {
     isDocsPage?: boolean
     isHomePage?: boolean
     blogArticleSlug?: string
-    children?: any
+    children?: React.ReactNode
     className?: string
     containerStyle?: Record<string, any>
     menuActiveKey?: string

src/components/LibraryStats/libraries.ts

@@ -1,4 +1,9 @@
-export const librariesList: Record<string, any>[] = [
+interface LibrariesListInterface {
+    name: string
+    path: string
+}
+
+export const librariesList: LibrariesListInterface[] = [
     {
         name: 'JavaScript',
         path: 'PostHog/posthog-js',

src/components/Structure/SectionFullWidth.tsx

@@ -8,7 +8,7 @@ export const SectionFullWidth = ({
 }: {
     className?: string
     width?: string
-    children?: any
+    children?: React.ReactNode
 }) => {
     const baseClasses = `max-w-${width} mx-auto`
     const classList = mergeClassList(baseClasses, className)

src/components/seo.tsx

@@ -7,7 +7,7 @@ import { useStaticQuery, graphql } from 'gatsby'
 interface SEOProps {
     title: string
     description?: string
-    image?: any
+    image?: string
     article?: boolean
     canonicalUrl?: string
 }

src/custom.d.ts

@@ -1,8 +1,8 @@
 declare module '*.svg' {
-    const content: any
+    const content: React.HTMLImageElement
     export default content
 }
 declare module '*.png' {
-    const content: any
+    const content: React.HTMLImageElement
     export default content
 }