Fix typescript (Shopify#182)

.github/workflows/ci.yml

@@ -26,6 +26,29 @@ jobs:
       - name: 🔬 Lint
         run: npm run lint
 
+  typecheck:
+    name: Typescript
+    runs-on: shopify-ubuntu-latest
+    steps:
+      - name: 🛑 Cancel Previous Runs
+        uses: styfle/cancel-workflow-action@0.11.0
+
+      - name: ⬇️ Checkout repo
+        uses: actions/checkout@v3
+
+      - name: ⎔ Setup node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
+      - name: 📥 Download deps
+        uses: bahmutov/npm-install@v1
+        with:
+          useLockFile: false
+
+      - name: ✅ Typecheck
+        run: npm run typecheck
+
   test:
     name: ⚫️ Playwright tests
     timeout-minutes: 60

app/components/Hero.tsx

@@ -1,7 +1,9 @@
 import clsx from 'clsx';
 import {Image, Video} from '@shopify/hydrogen-react';
 import type {
+  MediaImage,
   Media,
+  Video as MediaVideo,
   Metafield,
 } from '@shopify/hydrogen-react/storefront-api-types';
 import {Link} from '@remix-run/react';
@@ -66,7 +68,7 @@ export function Hero({
                 sizes="(min-width: 80em) 700, (min-width: 48em) 450, 500"
                 widths={[450, 700]}
                 width={375}
-                data={spreadSecondary.reference}
+                data={spreadSecondary.reference as Media}
               />
             </div>
           )}
@@ -90,7 +92,7 @@ export function Hero({
 }
 
 interface SpreadMediaProps {
-  data: Media;
+  data: Media | MediaImage | MediaVideo;
   loading?: HTMLImageElement['loading'];
   scale?: 2 | 3;
   sizes: string;
@@ -112,7 +114,7 @@ function SpreadMedia({
         previewImageOptions={{scale, src: data.previewImage!.url}}
         width={scale! * width}
         className="block object-cover w-full h-full"
-        data={data}
+        data={data as MediaVideo}
         controls={false}
         muted
         loop
@@ -129,7 +131,7 @@ function SpreadMedia({
         sizes={sizes}
         alt={data.alt || 'Marketing Banner Image'}
         className="block object-cover w-full h-full"
-        data={data.image}
+        data={(data as MediaImage).image!}
         loading={loading}
         width={width}
         loaderOptions={{scale, crop: 'center'}}

app/components/ProductGallery.tsx

@@ -1,5 +1,6 @@
 import type {MediaEdge} from '@shopify/hydrogen-react/storefront-api-types';
 import {ATTR_LOADING_EAGER} from '~/lib/const';
+import type {MediaImage} from '@shopify/hydrogen-react/storefront-api-types';
 
 /**
  * A client component that defines a media gallery for hosting images, 3D models, and videos of products
@@ -32,7 +33,7 @@ export function ProductGallery({
             ...med.image,
             altText: med.alt || 'Product image',
           },
-        };
+        } as MediaImage;
 
         switch (med.mediaContentType) {
           case 'IMAGE':
@@ -82,10 +83,10 @@ export function ProductGallery({
             key={med.id || med.image.id}
           >
             {/* TODO: Replace with MediaFile when it's available */}
-            {med.image && (
+            {(med as MediaImage).image && (
               <img
-                src={med.image.url}
-                alt={med.image.altText}
+                src={data.image!.url}
+                alt={data.image!.altText!}
                 className="w-full h-full aspect-square fadeIn object-cover"
               />
             )}

app/lib/session.server.ts

@@ -6,7 +6,10 @@ import {
 
 let sessionStorage: SessionStorage;
 
-export async function getSession(request: Request, context: AppLoadContext) {
+export async function getSession(
+  request: Request,
+  context: AppLoadContext & {env?: Record<string, string>},
+) {
   if (!context.env?.ENCRYPTION_KEY) {
     throw new Error('ENCRYPTION_KEY environment variable is not set');
   }

app/root.tsx

@@ -25,7 +25,8 @@ import styles from './styles/app.css';
 import favicon from '../public/favicon.svg';
 
 export const handle = {
-  seo: (data) => ({
+  // @todo - remove any and type the seo callback
+  seo: (data: any) => ({
     title: data.layout.shop.name,
     bypassTitleTemplate: true,
     titleTemplate: `%s | ${data.layout.shop.name}`,

app/routes/$lang/index.tsx

@@ -1,4 +1,4 @@
 // Everything in the $lang folder is a re-export of the route folder
 // Wondering if we can just have it as a build process (dynamically creates these
 // files based on the files in the routes folder) during build/hot reload process
-export {default, meta, loader} from '~/routes/index';
+export {default, loader} from '~/routes/index';

app/routes/$lang/journal/$journalHandle.tsx

@@ -1,9 +1,4 @@
-import Component, {
-  loader,
-  meta,
-  links,
-  CatchBoundary,
-} from '~/routes/journal/$journalHandle';
+import Component, {loader, meta, links} from '~/routes/journal/$journalHandle';
 
-export {loader, meta, links, CatchBoundary};
+export {loader, meta, links};
 export default Component;

app/routes/$lang/products/$productHandle.tsx

@@ -1,8 +1,4 @@
-import Component, {
-  loader,
-  action,
-  ProductForm,
-} from '~/routes/products/$productHandle';
+import Component, {loader, ProductForm} from '~/routes/products/$productHandle';
 
-export {loader, action, ProductForm};
+export {loader, ProductForm};
 export default Component;

app/routes/account/__private/orders.$id.tsx

@@ -49,9 +49,9 @@ export async function loader({request, context, params}: LoaderArgs) {
     throw new Response('Order not found', {status: 404});
   }
 
-  const lineItems: Array<OrderLineItem> = flattenConnection<OrderLineItem>(
+  const lineItems = flattenConnection<OrderLineItem>(
     order.lineItems!,
-  );
+  ) as Array<OrderLineItem>;
 
   const discountApplications = flattenConnection<DiscountApplication>(
     order.discountApplications as DiscountApplicationConnection,

packages/@hydrogen/remix/storefront.ts

@@ -24,7 +24,9 @@ export type StorefrontClientProps = Parameters<
   typeof createStorefrontUtilities
 >[0];
 
-export type Storefront = ReturnType<typeof createStorefrontClient>;
+export type Storefront = ReturnType<
+  typeof createStorefrontClient
+>['storefront'];
 
 export type HydrogenContext = {
   storefront: Storefront;