Improve TypeScript idioms

statico · statico · commit 271d90abb9bd · 2023-07-10T10:49:10.000-04:00
diff --git a/components/FilterBar.tsx b/components/FilterBar.tsx
@@ -19,12 +19,12 @@ import { hasAllKeys, SortOptionKey, SortOptions } from "lib/sorting";
 import { ReactNode } from "react";
 import { atom, useRecoilState, useRecoilValue } from "recoil";
 
-interface FilterState {
+type FilterState = {
   sort: SortOptionKey;
   framework: FrameworkName | null;
   features: Set<FeatureName>;
   license: string | null;
-}
+};
 
 const filterState = atom<FilterState>({
   key: "filters",
diff --git a/components/MultiItemPicker.tsx b/components/MultiItemPicker.tsx
@@ -15,18 +15,18 @@ import { GoChevronDown } from "react-icons/go";
 // We use "T extends string" instead of string because we want to be able to
 // limit the strings that can be used as keys, such as with FeatureName.
 
-interface Option<T extends string> {
+type Option<T extends string> = {
   key: T;
   title: string;
   description: string;
-}
+};
 
-interface MultiItemPickerProps<T extends string> {
+type MultiItemPickerProps<T extends string> = {
   children: ReactNode;
   selected: Set<T>;
   options: Option<T>[];
   onChange: (newValue: Set<T>) => void;
-}
+};
 
 export const MultiItemPicker = <T extends string>({
   children,
diff --git a/components/SingleItemPicker.tsx b/components/SingleItemPicker.tsx
@@ -10,29 +10,29 @@ import {
 import React, { ReactNode } from "react";
 import { GoCheck, GoChevronDown } from "react-icons/go";
 
-interface Option {
+type Option = {
   key: string;
   title: string;
   description?: string;
-}
+};
 
 const BlankIcon = () => <Box boxSize="1em" />;
 
-interface Props {
+type SingleItemPickerProps = {
   children: ReactNode;
   selected: string | null;
   options: Option[];
   allowNull?: boolean;
   onChange: (newValue: any) => void;
-}
+};
 
 export const SingleItemPicker = ({
   children,
   selected,
   options,
   onChange,
   allowNull = true,
-}: Props) => {
+}: SingleItemPickerProps) => {
   return (
     <Menu>
       <MenuButton as={Button} rightIcon={<GoChevronDown />} fontWeight="normal">
diff --git a/lib/sorting.ts b/lib/sorting.ts
@@ -1,12 +1,12 @@
 import { FeatureName } from "./features";
 import { LibraryInfo } from "./libraries";
 
-export interface SortOption {
+export type SortOption = {
   key: "popularity" | "stars" | "downloads";
   title: string;
   description?: string;
   fn: (a: LibraryInfo, b: LibraryInfo) => number;
-}
+};
 
 export type SortOptionKey = SortOption["key"];
 export const SortOptions: SortOption[] = [
@@ -35,7 +35,7 @@ export const SortOptions: SortOption[] = [
 // Sort the features by negative ones first, then positive, then middling.
 // Only important negative features are shown, which is why they're first.
 export const sortedFeatureNames = (
-  features: LibraryInfo["features"]
+  features: LibraryInfo["features"],
 ): FeatureName[] =>
   Object.keys(features).sort((a, b) => {
     const av = features[a];
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -17,10 +17,10 @@ import GithubCorner from "react-github-corner";
 import { DateTime } from "luxon";
 import { FaExternalLinkAlt } from "react-icons/fa";
 
-interface Props {
+type PageProps = {
   items: LibraryInfo[];
   ts: string;
-}
+};
 
 export const getStaticProps: GetStaticProps = async () => {
   return {
@@ -31,7 +31,7 @@ export const getStaticProps: GetStaticProps = async () => {
   };
 };
 
-const Page: NextPage<Props> = ({ items, ts }) => (
+const Page: NextPage<PageProps> = ({ items, ts }) => (
   <>
     <Head>
       <title>
diff --git a/pages/list.tsx b/pages/list.tsx
@@ -12,14 +12,14 @@ import {
 import { getLibraries, LibraryInfo } from "lib/libraries";
 import { GetStaticProps, NextPage } from "next";
 
-interface Props {
+type PageProps = {
   items: LibraryInfo[];
-}
+};
 
 const LinkTo = ({ href }: { href?: string | null }) =>
   href ? <Link href={href}>Link</Link> : <span />;
 
-const Page: NextPage<Props> = ({ items }) => (
+const Page: NextPage<PageProps> = ({ items }) => (
   <Container maxW="full">
     <Heading>All Libraries</Heading>
     <Table size="sm">
