Fix TypeScript strict mode kinda

Author: statico

components/Card.tsx

@@ -13,9 +13,9 @@ import {
   useColorModeValue,
 } from "@chakra-ui/react"
 import { fileSize } from "humanize-plus"
-import { Features } from "lib/features"
+import { FeatureName, Features } from "lib/features"
 import { FrameworkIcons, FrameworkTitles } from "lib/frameworks"
-import { LibraryInfo } from "lib/libraries"
+import { FrameworkName, LibraryInfo } from "lib/libraries"
 import { sortedFeatureNames } from "lib/sorting"
 import { JSXElementConstructor } from "react"
 import {
@@ -49,7 +49,7 @@ const ColoredIcon = ({
 const useCardBackgroundColor = () => useColorModeValue("white", "gray.700")
 
 const Feature: React.FC<{
-  name: string
+  name: FeatureName
   value: boolean | string | null
 }> = ({ name, value }) => {
   if (!Features[name]) {
@@ -85,9 +85,10 @@ const Feature: React.FC<{
 
 const FrameworkList: React.FC<{ info: LibraryInfo }> = ({ info }) => {
   const bg = useCardBackgroundColor()
+  const names = Object.keys(info.frameworks) as FrameworkName[]
   return (
     <Flex fontSize="2xl">
-      {Object.keys(info.frameworks).map((name) => {
+      {names.map((name) => {
         const value = info.frameworks[name]
         const isThirdParty = typeof value === "string"
         const url = isThirdParty ? value : info.homeUrl
@@ -98,7 +99,7 @@ const FrameworkList: React.FC<{ info: LibraryInfo }> = ({ info }) => {
         return (
           <Tooltip label={title} key={name}>
             <Link
-              href={url}
+              href={url ?? undefined}
               position="relative"
               _hover={{ opacity: 0.75 }}
               title={title}
@@ -176,7 +177,7 @@ const Card: React.FC<{ info: LibraryInfo }> = ({ info }) => {
         <Heading
           size="lg"
           as="a"
-          href={info.homeUrl}
+          href={info.homeUrl ?? undefined}
           fontWeight="semibold"
           id={id}
         >

components/FilterBar.tsx

@@ -22,8 +22,8 @@ const ResponsiveText = ({ short, long }: { short: string; long: string }) => (
 )
 
 const FrameworkSelector: React.FC<{
-  selected: FrameworkName
-  onChange: (newSelected: FrameworkName) => void
+  selected: FrameworkName | null
+  onChange: (newSelected: FrameworkName | null) => void
 }> = ({ selected, onChange }) => {
   const handleToggle = (name: FrameworkName) => () => {
     onChange(selected === name ? null : name)
@@ -107,7 +107,7 @@ const SortSelector: React.FC<{
       options={SortOptions}
       allowNull={false}
     >
-      <ResponsiveText short="Sort" long={`Sort by ${selectedOption.title}`} />
+      <ResponsiveText short="Sort" long={`Sort by ${selectedOption?.title}`} />
     </SingleItemPicker>
   )
 }
@@ -137,7 +137,9 @@ const FilterBar: React.FC<FilteredItemsProps> = ({ items, children }) => {
   clone.sort(sortOption.fn)
 
   if (filters.framework) {
-    clone = clone.filter((item) => item.frameworks[filters.framework])
+    clone = clone.filter(
+      (item) => filters.framework && item.frameworks[filters.framework]
+    )
   }
   if (filters.features.size) {
     clone = clone.filter((item) => hasAllKeys(item.features, filters.features))
@@ -174,7 +176,7 @@ const FilterBar: React.FC<FilteredItemsProps> = ({ items, children }) => {
         }}
       />
       <LicenseSelector
-        licenses={new Set(items.map((i) => i.license))}
+        licenses={new Set<string>(items.map((i: any) => i.license))}
         selected={filters.license}
         onChange={(license) => {
           setFilters({ ...filters, license })

components/MultiItemPicker.tsx

@@ -21,7 +21,7 @@ interface Option {
 export const MultiItemPicker: React.FC<{
   selected: Set<string>
   options: Option[]
-  onChange: (newValue: Set<string>) => void
+  onChange: (newValue: any) => void
 }> = ({ children, selected, options, onChange }) => (
   <Menu>
     <MenuButton as={Button} rightIcon={<GoChevronDown />} fontWeight="normal">

components/SingleItemPicker.tsx

@@ -22,7 +22,7 @@ export const SingleItemPicker: React.FC<{
   selected: string | null
   options: Option[]
   allowNull?: boolean
-  onChange: (newValue: string) => void
+  onChange: (newValue: any) => void
 }> = ({ children, selected, options, onChange, allowNull = true }) => {
   return (
     <Menu>

lib/features.ts

@@ -8,67 +8,81 @@ export const Features = {
     title: "Accessible",
     description:
       "Uses semantic markup or ARIA attributes to make the interface less challenging to use.",
+    important: false,
   },
   copyPaste: {
     title: "Copy and Paste",
     description: "Supports copy and paste, preferably to the system clipboard.",
+    important: false,
   },
   csvExport: {
     title: "CSV Export",
     description:
       "The library has built-in functionality which lets you download a CSV file.",
+    important: false,
   },
   customEditors: {
     title: "Custom Editors",
     description:
       "The library lets you create your own dynamic cell value editor widgets.",
+    important: false,
   },
   customFormatters: {
     title: "Custom Formatters",
     description:
       "The library lets you customize how data is shown in each grid cell.",
+    important: false,
   },
   draggableRows: {
     title: "Draggable Rows",
     description: "Allows rows to be reordered by dragging.",
+    important: false,
   },
   editable: {
     title: "Editable Cells",
     description: "Cell values can be changed to update data in memory.",
+    important: false,
   },
   fillDown: {
     title: "Fill Down",
     description:
       "A drag handle or keyboard shortcut can be used to copy a value or formula to cells below the selected cell.",
+    important: false,
   },
   fillRight: {
     title: "Fill Right",
     description:
       "A drag handle or keyboard shortcut can be used to copy a value or formula to cells to the right of the selected cell.",
+    important: false,
   },
   filtering: {
     title: "Filtering",
     description:
       "The library or interface has provisions for only showing rows that meet certain criteria.",
+    important: false,
   },
   formulas: {
     title: "Formula Support",
     description:
       "The library has built-in support for deriving cell values from other cells.",
+    important: false,
   },
   freezableCols: {
     title: "Freezable Columns",
     description:
       "The library lets you make columns persist on one or both sides of the grid.",
+    important: false,
   },
   headless: {
     title: "Headless",
     description:
       "There is no user interface provided by default; this library is logic-only.",
+    important: false,
   },
   i18n: {
     title: "i18n",
     description: "Has features for internationalization and localization.",
+    important: false,
   },
   maintained: {
     title: "Maintained",
@@ -86,62 +100,75 @@ export const Features = {
     title: "Pagination",
     description:
       "Supports a widget to navigate through pages of rows as opposed to scrolling.",
+    important: false,
   },
   pdfExport: {
     title: "PDF Export",
     description:
       "The library has built-in functionality which lets you download a PDF.",
+    important: false,
   },
   pivots: {
     title: "Pivot Tables",
     description: "Has support for pivot tables.",
+    important: false,
   },
   rangeSelection: {
     title: "Range Selection",
     description: "An arbitrary block of cells can be selected.",
+    important: false,
   },
   resizableCols: {
     title: "Resizable Columns",
     description: "The user interface lets you resize columns by dragging.",
+    important: false,
   },
   responsive: {
     title: "Responsive",
     description: "Works well on tablet and mobile devices.",
+    important: false,
   },
   rowGrouping: {
     title: "Row Grouping",
     description:
       "Whether rows be grouped and preferably collapsed and expanded.",
+    important: false,
   },
   rowSelection: {
     title: "Row Selection",
     description: "Entire rows can be selected.",
+    important: false,
   },
   serverSide: {
     title: "Server-Side",
     description:
       "Has the ability to use external data sources to fetch, filter, and sort data.",
+    important: false,
   },
   sorting: {
     title: "Sorting",
     description:
       "The library or interface has provisions for ordering rows given certain criteria.",
+    important: false,
   },
   trees: {
     title: "Tree Data",
     description: "Has support for hierarchical data.",
+    important: false,
   },
   xlsxExport: {
     title: "XLSX Export",
     description:
       "The library has built-in functionality which lets you download an Excel workbook.",
+    important: false,
   },
   virtualization: {
     title: "Virtualization",
     description:
       "Uses a technique to greatly reduce DOM elements and increase performance.",
+    important: false,
   },
-}
+} as const
 
 export type FeatureName = keyof typeof Features
 

lib/fetcher.ts

@@ -40,7 +40,7 @@ const throttledFetch = throttler(async (url: string) => {
     const res = await fetch(url, { headers })
     const data = await res.json()
     return { headers: JSON.parse(JSON.stringify(res.headers)), data }
-  } catch (err) {
+  } catch (err: any) {
     const status = err.response?.status
     const headers = JSON.stringify(err.response?.headers, null, "  ")
     log("failed %s - status=%s, headers=%o - %s", url, status, headers, err)

lib/libraries.ts

@@ -152,7 +152,7 @@ export const getLibraries = async (): Promise<LibraryInfo[]> => {
         } else {
           const link = res1.headers.link ?? ""
           const parts = link.split(",")
-          const lastPart = parts.find((s) => /rel="last"/.test(s)) ?? ""
+          const lastPart = parts.find((s: string) => /rel="last"/.test(s)) ?? ""
           const match = lastPart.match(/\bpage=(\d+)/)
           const lastPage = Number(match ? match[1] : 1)
           const res2 = await fetcher(`${url}&page=${lastPage}`)

lib/sorting.ts

@@ -1,3 +1,4 @@
+import { FeatureName } from "./features"
 import { LibraryInfo } from "./libraries"
 
 export interface SortOption {
@@ -35,7 +36,7 @@ export const SortOptions: SortOption[] = [
 // Only important negative features are shown, which is why they're first.
 export const sortedFeatureNames = (
   features: LibraryInfo["features"]
-): string[] =>
+): FeatureName[] =>
   Object.keys(features).sort((a, b) => {
     const av = features[a]
     const bv = features[b]
@@ -54,9 +55,9 @@ export const sortedFeatureNames = (
     } else {
       return a.localeCompare(b)
     }
-  })
+  }) as FeatureName[]
 
-export const hasAllKeys = (obj: Object, keys: Iterable<string>) => {
+export const hasAllKeys = (obj: any, keys: Iterable<string>) => {
   for (const key of Array.from(keys)) {
     if (!obj[key]) {
       return false

lib/theme.ts

@@ -7,7 +7,7 @@ const theme = extendTheme({
     useSystemColorMode: false,
   },
   styles: {
-    global: (props) => ({
+    global: (props: any) => ({
       body: {
         bg: mode("gray.100", "gray.800")(props),
         color: mode("gray.900", "gray.100")(props),

pages/_app.tsx

@@ -1,8 +1,9 @@
 import { ChakraProvider } from "@chakra-ui/react"
 import theme from "lib/theme"
 import { DefaultSeo } from "next-seo"
+import { AppProps } from "next/app"
 
-function MyApp({ Component, pageProps }) {
+function MyApp({ Component, pageProps }: AppProps) {
   return (
     <ChakraProvider theme={theme}>
       <DefaultSeo

pages/list.tsx

@@ -18,7 +18,7 @@ interface Props {
   items: LibraryInfo[]
 }
 
-const LinkTo = ({ href }: { href?: string }) =>
+const LinkTo = ({ href }: { href?: string | null }) =>
   href ? <Link href={href}>Link</Link> : <span />
 
 const Page: NextPage<Props> = ({ items }) => (

tsconfig.json

@@ -1,21 +1,21 @@
 {
   "compilerOptions": {
     "baseUrl": ".",
-    "strict": false,
     "target": "es5",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
+    "strict": true,
     "forceConsistentCasingInFileNames": true,
     "noEmit": true,
+    "incremental": true,
     "esModuleInterop": true,
     "module": "esnext",
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
-    "incremental": true
+    "jsx": "preserve"
   },
-  "exclude": ["node_modules"],
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
 }