Enable no explicit any (#40)

* Clean up remaining explicit any * Turn on warn for no-explicit-any --------- Co-authored-by: Cal Irvine <[email protected]>
benvinegar · Feb 8, 2024 · ebee272 · ebee272
1 parent 1d743a1
commit ebee272
Show file tree

Hide file tree

Showing 8 changed files with 53 additions and 38 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -69,7 +69,7 @@ module.exports = {
             },
             rules: {
                 // we're cool with explicit any (for now)
-                "@typescript-eslint/no-explicit-any": 0,
+                "@typescript-eslint/no-explicit-any": 1,
 
                 // https://stackoverflow.com/questions/68802881/get-rid-of-is-defined-but-never-used-in-function-parameter
                 "no-unused-vars": 0,

diff --git a/app/analytics/collect.test.ts b/app/analytics/collect.test.ts
@@ -1,4 +1,4 @@
-import { describe, expect, test, vi } from "vitest";
+import { Mock, describe, expect, test, vi } from "vitest";
 import httpMocks from "node-mocks-http";
 
 import { collectRequestHandler } from "./collect";
@@ -8,7 +8,7 @@ const defaultRequestParams = generateRequestParams({
         "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36",
 });
 
-function generateRequestParams(headers: any /* todo */) {
+function generateRequestParams(headers: Record<string, string>) {
     return {
         method: "GET",
         url:
@@ -50,7 +50,7 @@ describe("collectRequestHandler", () => {
         expect(env.WEB_COUNTER_AE.writeDataPoint).toHaveBeenCalled();
 
         // verify data shows up in the right place
-        expect((writeDataPoint as any).mock.calls[0][0]).toEqual({
+        expect((writeDataPoint as Mock).mock.calls[0][0]).toEqual({
             blobs: [
                 "example.com", // host
                 "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36", // ua string
@@ -84,7 +84,7 @@ describe("collectRequestHandler", () => {
         collectRequestHandler(request, env);
 
         const writeDataPoint = env.WEB_COUNTER_AE.writeDataPoint;
-        expect((writeDataPoint as any).mock.calls[0][0]).toHaveProperty(
+        expect((writeDataPoint as Mock).mock.calls[0][0]).toHaveProperty(
             "doubles",
             [
                 1, // new visitor
@@ -112,7 +112,7 @@ describe("collectRequestHandler", () => {
         collectRequestHandler(request, env);
 
         const writeDataPoint = env.WEB_COUNTER_AE.writeDataPoint;
-        expect((writeDataPoint as any).mock.calls[0][0]).toHaveProperty(
+        expect((writeDataPoint as Mock).mock.calls[0][0]).toHaveProperty(
             "doubles",
             [
                 0, // new visitor
@@ -140,7 +140,7 @@ describe("collectRequestHandler", () => {
         collectRequestHandler(request, env);
 
         const writeDataPoint = env.WEB_COUNTER_AE.writeDataPoint;
-        expect((writeDataPoint as any).mock.calls[0][0]).toHaveProperty(
+        expect((writeDataPoint as Mock).mock.calls[0][0]).toHaveProperty(
             "doubles",
             [
                 0, // new visitor
@@ -168,7 +168,7 @@ describe("collectRequestHandler", () => {
         collectRequestHandler(request, env);
 
         const writeDataPoint = env.WEB_COUNTER_AE.writeDataPoint;
-        expect((writeDataPoint as any).mock.calls[0][0]).toHaveProperty(
+        expect((writeDataPoint as Mock).mock.calls[0][0]).toHaveProperty(
             "doubles",
             [
                 1, // new visitor

diff --git a/app/analytics/query.test.ts b/app/analytics/query.test.ts
@@ -1,11 +1,19 @@
-import { describe, expect, test, vi, beforeEach, afterEach } from "vitest";
+import {
+    describe,
+    expect,
+    test,
+    vi,
+    beforeEach,
+    afterEach,
+    Mock,
+} from "vitest";
 
 import { AnalyticsEngineAPI } from "./query";
 
-function createFetchResponse(data: any) {
+function createFetchResponse<T>(data: T) {
     return {
         ok: true,
-        json: () => new Promise((resolve) => resolve(data)),
+        json: () => new Promise<T>((resolve) => resolve(data)),
     };
 }
 
@@ -14,7 +22,7 @@ describe("AnalyticsEngineAPI", () => {
         "test_account_id_abc123",
         "test_api_token_def456",
     );
-    let fetch: any; // todo: figure out how to type this mocked fetch
+    let fetch: Mock; // todo: figure out how to type this mocked fetch
 
     beforeEach(() => {
         fetch = global.fetch = vi.fn();

diff --git a/app/analytics/query.ts b/app/analytics/query.ts
@@ -6,11 +6,9 @@ import timezone from "dayjs/plugin/timezone";
 
 dayjs.extend(utc);
 dayjs.extend(timezone);
-
-export interface AnalyticsQueryResultRow {
-    [key: string]: any;
-}
-interface AnalyticsQueryResult<SelectionSet extends AnalyticsQueryResultRow> {
+interface AnalyticsQueryResult<
+    SelectionSet extends Record<string, string | number>,
+> {
     meta: string;
     data: SelectionSet[];
     rows: number;
@@ -350,23 +348,23 @@ export class AnalyticsEngineAPI {
         return this.getVisitorCountByColumn(siteId, "userAgent", sinceDays);
     }
 
-    async getCountByCountry(siteId: string, sinceDays: number): Promise<any> {
+    async getCountByCountry(siteId: string, sinceDays: number) {
         return this.getVisitorCountByColumn(siteId, "country", sinceDays);
     }
 
-    async getCountByReferrer(siteId: string, sinceDays: number): Promise<any> {
+    async getCountByReferrer(siteId: string, sinceDays: number) {
         return this.getVisitorCountByColumn(siteId, "referrer", sinceDays);
     }
 
-    async getCountByPath(siteId: string, sinceDays: number): Promise<any> {
+    async getCountByPath(siteId: string, sinceDays: number) {
         return this.getVisitorCountByColumn(siteId, "path", sinceDays);
     }
 
-    async getCountByBrowser(siteId: string, sinceDays: number): Promise<any> {
+    async getCountByBrowser(siteId: string, sinceDays: number) {
         return this.getVisitorCountByColumn(siteId, "browserName", sinceDays);
     }
 
-    async getCountByDevice(siteId: string, sinceDays: number): Promise<any> {
+    async getCountByDevice(siteId: string, sinceDays: number) {
         return this.getVisitorCountByColumn(siteId, "deviceModel", sinceDays);
     }
 

diff --git a/app/components/TableCard.tsx b/app/components/TableCard.tsx
@@ -33,7 +33,7 @@ export default function TableCard({
                     </TableRow>
                 </TableHeader>
                 <TableBody>
-                    {(countByProperty || []).map((item: any) => (
+                    {(countByProperty || []).map((item) => (
                         <TableRow key={item[0]}>
                             <TableCell className="font-medium">
                                 {item[0]}
@@ -51,6 +51,13 @@ export default function TableCard({
 
 TableCard.propTypes = {
     propertyName: PropTypes.string,
-    countByProperty: PropTypes.array,
+    countByProperty: PropTypes.arrayOf(
+        PropTypes.arrayOf(
+            PropTypes.oneOfType([
+                PropTypes.string.isRequired,
+                PropTypes.number.isRequired,
+            ]).isRequired,
+        ).isRequired,
+    ).isRequired,
     columnHeaders: PropTypes.array,
 };
diff --git a/app/components/TimeSeriesChart.tsx b/app/components/TimeSeriesChart.tsx
@@ -20,7 +20,7 @@ export default function TimeSeriesChart({
     }
 
     // get the max integer value of data views
-    const maxViews = Math.max(...data.map((item: any) => item.views));
+    const maxViews = Math.max(...data.map((item) => item.views));
 
     function xAxisDateFormatter(date: string): string {
         const dateObj = new Date(date);
@@ -91,6 +91,10 @@ export default function TimeSeriesChart({
 }
 
 TimeSeriesChart.propTypes = {
-    data: PropTypes.any,
+    data: PropTypes.arrayOf(
+        PropTypes.shape({
+            views: PropTypes.number.isRequired,
+        }).isRequired,
+    ).isRequired,
     intervalType: PropTypes.string,
 };
diff --git a/app/routes/dashboard.test.tsx b/app/routes/dashboard.test.tsx
@@ -8,6 +8,7 @@ import {
     beforeEach,
     afterEach,
     expect,
+    Mock,
 } from "vitest";
 import "vitest-dom/extend-expect";
 
@@ -16,15 +17,15 @@ import { render, screen, waitFor } from "@testing-library/react";
 
 import Dashboard, { loader } from "./dashboard";
 
-function createFetchResponse(data: any) {
+function createFetchResponse<T>(data: T) {
     return {
         ok: true,
-        json: () => new Promise((resolve) => resolve(data)),
+        json: () => new Promise<T>((resolve) => resolve(data)),
     };
 }
 
 describe("Dashboard route", () => {
-    let fetch: any;
+    let fetch: Mock;
 
     beforeAll(() => {
         // polyfill needed for recharts (used by TimeSeriesChart)

diff --git a/app/routes/dashboard.tsx b/app/routes/dashboard.tsx
@@ -11,10 +11,7 @@ import type { LoaderFunctionArgs, MetaFunction } from "@remix-run/cloudflare";
 import { json, redirect } from "@remix-run/cloudflare";
 import { useLoaderData, useSearchParams } from "@remix-run/react";
 
-import {
-    AnalyticsEngineAPI,
-    AnalyticsQueryResultRow,
-} from "../analytics/query";
+import { AnalyticsEngineAPI } from "../analytics/query";
 
 import TableCard from "~/components/TableCard";
 import TimeSeriesChart from "~/components/TimeSeriesChart";
@@ -130,16 +127,16 @@ export const loader = async ({ context, request }: LoaderFunctionArgs) => {
 };
 
 function convertCountryCodesToNames(
-    countByCountry: AnalyticsQueryResultRow[],
-): AnalyticsQueryResultRow[] {
+    countByCountry: [string, number][],
+): [string, number][] {
     const regionNames = new Intl.DisplayNames(["en"], { type: "region" });
-    return countByCountry.map((countByBrowserRow: AnalyticsQueryResultRow) => {
+    return countByCountry.map((countByBrowserRow) => {
         let countryName;
         try {
             // throws an exception if country code isn't valid
             //   use try/catch to be defensive and not explode if an invalid
             //   country code gets insrted into Analytics Engine
-            countryName = regionNames.of(countByBrowserRow[0]); // "United States"
+            countryName = regionNames.of(countByBrowserRow[0])!; // "United States"
         } catch (err) {
             countryName = "(unknown)";
         }
@@ -168,7 +165,7 @@ export default function Dashboard() {
     }
 
     const chartData: { date: string; views: number }[] = [];
-    data.viewsGroupedByInterval.forEach((row: AnalyticsQueryResultRow) => {
+    data.viewsGroupedByInterval.forEach((row) => {
         chartData.push({
             date: row[0],
             views: row[1],