Replace some uses of any with more specific types (#344)

* Add tsconfig.json for common

* Prefer `const` over `let` over `var`

* Kill dead code

* Fix some trivial Typescript issues

* Turn on Typescript linting in common except for no-explicit-any

* Correctly specify tsconfig dir name in functions eslintrc

* Give react children explicit types

* Add explicit types to removeUndefinedProps

* Create StripeSession type

* Give event in Dropdown an explicit type

* Revert "Give event in Dropdown an explicit type"

This reverts commit 80604310f2.

* Give bids in NewBidTable an explicit type

* Cast results of removeUndefinedProps when neccessary

* Fix type of JoinSpans

* Revert "Cast results of removeUndefinedProps when neccessary"

This reverts commit 5541617bc8.

* Revert "Add explicit types to removeUndefinedProps"

This reverts commit ccf8ffb0b5.

* Give React children types everywhere

* Give event a type

* Give event correct type

* Lint

* Standardize React import

Co-authored-by: Marshall Polaris <marshall@pol.rs>

functions/src/stripe.ts

@@ -5,11 +5,13 @@ import Stripe from 'stripe'
 import { getPrivateUser, getUser, isProd, payUser } from './utils'
 import { sendThankYouEmail } from './emails'
 
+export type StripeSession = Stripe.Event.Data.Object & { id: any, metadata: any}
+
 export type StripeTransaction = {
   userId: string
   manticDollarQuantity: number
   sessionId: string
-  session: any
+  session: StripeSession
   timestamp: number
 }
 
@@ -96,14 +98,14 @@ export const stripeWebhook = functions
     }
 
     if (event.type === 'checkout.session.completed') {
-      const session = event.data.object as any
+      const session = event.data.object as StripeSession
       await issueMoneys(session)
     }
 
     res.status(200).send('success')
   })
 
-const issueMoneys = async (session: any) => {
+const issueMoneys = async (session: StripeSession) => {
   const { id: sessionId } = session
 
   const query = await firestore

web/components/SEO.tsx

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react'
 import Head from 'next/head'
 
 export type OgCardProps = {
@@ -35,7 +36,7 @@ export function SEO(props: {
   title: string
   description: string
   url?: string
-  children?: any[]
+  children?: ReactNode
   ogCardProps?: OgCardProps
 }) {
   const { title, description, url, children, ogCardProps } = props

web/components/advanced-panel.tsx

@@ -1,7 +1,7 @@
 import clsx from 'clsx'
-import { useState } from 'react'
+import { useState, ReactNode } from 'react'
 
-export function AdvancedPanel(props: { children: any }) {
+export function AdvancedPanel(props: { children: ReactNode }) {
   const { children } = props
   const [collapsed, setCollapsed] = useState(true)
 

web/components/avatar.tsx

@@ -1,5 +1,6 @@
 import Router from 'next/router'
 import clsx from 'clsx'
+import { MouseEvent } from 'react'
 import { UserCircleIcon } from '@heroicons/react/solid'
 
 export function Avatar(props: {
@@ -15,7 +16,7 @@ export function Avatar(props: {
   const onClick =
     noLink && username
       ? undefined
-      : (e: any) => {
+      : (e: MouseEvent) => {
           e.stopPropagation()
           Router.push(`/${username}`)
         }

web/components/confirmation-button.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx'
-import { useState } from 'react'
+import { ReactNode, useState } from 'react'
 import { Col } from './layout/col'
 import { Modal } from './layout/modal'
 import { Row } from './layout/row'
@@ -20,7 +20,7 @@ export function ConfirmationButton(props: {
     className?: string
   }
   onSubmit: () => void
-  children: any
+  children: ReactNode
 }) {
   const { id, openModalBtn, cancelBtn, submitBtn, onSubmit, children } = props
 

web/components/join-spans.tsx

@@ -1,14 +1,14 @@
 import { ReactNode } from 'react'
 
 export const JoinSpans = (props: {
-  children: any[]
+  children: ReactNode[]
   separator?: ReactNode
 }) => {
   const { separator } = props
   const children = props.children.filter((x) => !!x)
 
   if (children.length === 0) return <></>
-  if (children.length === 1) return children[0]
+  if (children.length === 1) return <>{children[0]}</>
   if (children.length === 2)
     return (
       <>

web/components/layout/col.tsx

@@ -1,8 +1,8 @@
 import clsx from 'clsx'
-import { CSSProperties, Ref } from 'react'
+import { CSSProperties, Ref, ReactNode } from 'react'
 
 export function Col(props: {
-  children?: any
+  children?: ReactNode
   className?: string
   style?: CSSProperties
   ref?: Ref<HTMLDivElement>

web/components/layout/row.tsx

@@ -1,7 +1,8 @@
 import clsx from 'clsx'
+import { ReactNode } from 'react'
 
 export function Row(props: {
-  children?: any
+  children?: ReactNode
   className?: string
   id?: string
 }) {

web/components/number-input.tsx

@@ -1,4 +1,5 @@
 import clsx from 'clsx'
+import { ReactNode } from 'react'
 
 import React from 'react'
 import { Col } from './layout/col'
@@ -14,7 +15,7 @@ export function NumberInput(props: {
   inputClassName?: string
   // Needed to focus the amount input
   inputRef?: React.MutableRefObject<any>
-  children?: any
+  children?: ReactNode
 }) {
   const {
     numberString,

web/components/page.tsx

@@ -9,7 +9,7 @@ export function Page(props: {
   assertUser?: 'signed-in' | 'signed-out'
   rightSidebar?: ReactNode
   suspend?: boolean
-  children?: any
+  children?: ReactNode
 }) {
   const { margin, assertUser, children, rightSidebar, suspend } = props
 

web/components/site-link.tsx

@@ -4,7 +4,7 @@ import Link from 'next/link'
 
 export const SiteLink = (props: {
   href: string
-  children?: any
+  children?: ReactNode
   onClick?: () => void
   className?: string
 }) => {

web/components/yes-no-selector.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx'
-import React from 'react'
+import React, { ReactNode } from 'react'
 import { formatMoney } from 'common/util/format'
 import { Col } from './layout/col'
 import { Row } from './layout/row'
@@ -230,7 +230,7 @@ function Button(props: {
   className?: string
   onClick?: () => void
   color: 'green' | 'red' | 'blue' | 'yellow' | 'gray'
-  children?: any
+  children?: ReactNode
 }) {
   const { className, onClick, children, color } = props
 

web/pages/simulator.tsx

@@ -112,7 +112,7 @@ function TableRowEnd(props: { entry: Entry | null; isNew?: boolean }) {
 
 function NewBidTable(props: {
   steps: number
-  bids: any[]
+  bids: Array<{ yesBid: number; noBid: number }>
   setSteps: (steps: number) => void
   setBids: (bids: any[]) => void
 }) {