diff --git a/app/CookieBanner.js b/app/CookieBanner.tsx
similarity index 96%
rename from app/CookieBanner.js
rename to app/CookieBanner.tsx
index bb929ba..8212604 100644
--- a/app/CookieBanner.js
+++ b/app/CookieBanner.tsx
@@ -10,9 +10,7 @@ export default function CookieBanner() {
 
   // // In case you are using state variables with multiple different
   // // possible types
-  // const [areCookiesAccepted, setAreCookiesAccepted] = useState<
-  //   boolean | string
-  // >(false);
+  // const [areCookiesAccepted, setAreCookiesAccepted] = useState<boolean | string>(false);
 
   useEffect(() => {
     const localStorageValue = getLocalStorage('cookiePolicy');
diff --git a/app/animal-management-naive-dont-copy/create/page.js b/app/animal-management-naive-dont-copy/create/page.tsx
similarity index 80%
rename from app/animal-management-naive-dont-copy/create/page.js
rename to app/animal-management-naive-dont-copy/create/page.tsx
index b128965..a523ca1 100644
--- a/app/animal-management-naive-dont-copy/create/page.js
+++ b/app/animal-management-naive-dont-copy/create/page.tsx
@@ -1,7 +1,16 @@
 import { notFound } from 'next/navigation';
 import { createAnimalInsecure } from '../../../database/animals';
 
-export default async function CreateAnimalNaivePage(props) {
+type Props = {
+  searchParams: Promise<{
+    firstName: string;
+    type: string;
+    accessory: string;
+    birthDate: string;
+  }>;
+};
+
+export default async function CreateAnimalNaivePage(props: Props) {
   const animalSearchParams = await props.searchParams;
 
   const animal = await createAnimalInsecure({
diff --git a/app/animals/page.js b/app/animals/page.tsx
similarity index 100%
rename from app/animals/page.js
rename to app/animals/page.tsx
diff --git a/app/error.js b/app/error.tsx
similarity index 100%
rename from app/error.js
rename to app/error.tsx
diff --git a/app/fruits/[fruitId]/FruitCommentForm.js b/app/fruits/[fruitId]/FruitCommentForm.js
deleted file mode 100644
index 638c782..0000000
--- a/app/fruits/[fruitId]/FruitCommentForm.js
+++ /dev/null
@@ -1,19 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-import createOrUpdateCookie from './actions';
-
-export default function FruitCommentForm(props) {
-  const [comment, setComment] = useState('');
-  return (
-    <form>
-      <textarea
-        value={comment}
-        onChange={(event) => setComment(event.currentTarget.value)}
-      />
-      <button formAction={() => createOrUpdateCookie(props.fruitId, comment)}>
-        Add comment
-      </button>
-    </form>
-  );
-}
diff --git a/app/fruits/[fruitId]/FruitCommentForm.tsx b/app/fruits/[fruitId]/FruitCommentForm.tsx
new file mode 100644
index 0000000..f4cfed7
--- /dev/null
+++ b/app/fruits/[fruitId]/FruitCommentForm.tsx
@@ -0,0 +1,33 @@
+'use client';
+
+import { useState } from 'react';
+import createOrUpdateCookie from './actions';
+
+type Props = {
+  fruitId: number;
+};
+
+export default function FruitCommentForm(props: Props) {
+  const [comment, setComment] = useState('');
+
+  // Option 2: If you use a function declared elsewhere, you need to define the type of `event`
+  // function handleChange(event: ChangeEvent<HTMLTextAreaElement>) {
+  //   setComment(event.currentTarget.value)
+  // }
+
+  return (
+    <form>
+      <textarea
+        value={comment}
+        // Option 1: Inline function does not require type
+        onChange={(event) => setComment(event.currentTarget.value)}
+
+        // Option 2: If you use a function declared elsewhere...
+        // onChange={handleChange}
+      />
+      <button formAction={() => createOrUpdateCookie(props.fruitId, comment)}>
+        Add comment
+      </button>
+    </form>
+  );
+}
diff --git a/app/fruits/[fruitId]/actions.js b/app/fruits/[fruitId]/actions.ts
similarity index 72%
rename from app/fruits/[fruitId]/actions.js
rename to app/fruits/[fruitId]/actions.ts
index 218ad80..97445c4 100644
--- a/app/fruits/[fruitId]/actions.js
+++ b/app/fruits/[fruitId]/actions.ts
@@ -8,16 +8,24 @@ import { cookies } from 'next/headers';
 import { getCookie } from '../../../util/cookies';
 import { parseJson } from '../../../util/json';
 
-export default async function createOrUpdateCookie(fruitId, comment) {
+export type FruitComment = {
+  id: number;
+  comment: string;
+};
+
+export default async function createOrUpdateCookie(
+  fruitId: FruitComment['id'],
+  comment: FruitComment['comment'],
+) {
   // 1. get current cookie!
   const fruitsCommentsCookie = await getCookie('fruitsComments');
 
   // 2. parse the cookie value
-  const fruitsComments =
+  const fruitsComments: FruitComment[] =
     fruitsCommentsCookie === undefined
       ? // Case A: cookie undefined
         []
-      : parseJson(fruitsCommentsCookie);
+      : parseJson(fruitsCommentsCookie)!;
 
   // 3. edit the cookie value
   const fruitToUpdate = fruitsComments.find((fruitComment) => {
@@ -25,8 +33,8 @@ export default async function createOrUpdateCookie(fruitId, comment) {
   });
 
   // Case B: cookie set, id doesn't exist
-  fruitsComments.push({ id: fruitId, comment: comment });
   if (!fruitToUpdate) {
+    fruitsComments.push({ id: fruitId, comment: comment });
   } else {
     // Case C: cookie set, id exists already
     fruitToUpdate.comment = comment;
diff --git a/app/fruits/[fruitId]/page.js b/app/fruits/[fruitId]/page.tsx
similarity index 88%
rename from app/fruits/[fruitId]/page.js
rename to app/fruits/[fruitId]/page.tsx
index b23ade7..bb6dac4 100644
--- a/app/fruits/[fruitId]/page.js
+++ b/app/fruits/[fruitId]/page.tsx
@@ -5,7 +5,13 @@ import { getCookie } from '../../../util/cookies';
 import { parseJson } from '../../../util/json';
 import FruitCommentForm from './FruitCommentForm';
 
-export default async function SingleFruitPage(props) {
+type Props = {
+  params: Promise<{
+    fruitId: string;
+  }>;
+};
+
+export default async function SingleFruitPage(props: Props) {
   const fruit = getFruit(Number((await props.params).fruitId));
 
   const fruitCommentsCookie = await getCookie('fruitsComments');
diff --git a/app/fruits/page.js b/app/fruits/page.tsx
similarity index 100%
rename from app/fruits/page.js
rename to app/fruits/page.tsx
diff --git a/app/layout.js b/app/layout.tsx
similarity index 89%
rename from app/layout.js
rename to app/layout.tsx
index d80c65d..6f8d48f 100644
--- a/app/layout.js
+++ b/app/layout.tsx
@@ -1,6 +1,7 @@
 import './globals.scss';
 import localFont from 'next/font/local';
 import Link from 'next/link';
+import { ReactNode } from 'react';
 
 const geistSans = localFont({
   src: './fonts/GeistVF.woff',
@@ -22,7 +23,11 @@ export const metadata = {
   description: 'Generated by create next app',
 };
 
-export default function RootLayout({ children }) {
+type Props = {
+  children: ReactNode;
+};
+
+export default function RootLayout({ children }: Props) {
   return (
     <html lang="en">
       <body className={`${geistSans.variable} ${geistMono.variable}`}>
diff --git a/app/not-found.js b/app/not-found.tsx
similarity index 100%
rename from app/not-found.js
rename to app/not-found.tsx
diff --git a/app/page.js b/app/page.tsx
similarity index 100%
rename from app/page.js
rename to app/page.tsx
diff --git a/database/animals.ts b/database/animals.ts
index 73351d6..621d41b 100644
--- a/database/animals.ts
+++ b/database/animals.ts
@@ -73,6 +73,16 @@ export const getAnimalInsecure = cache(async (id: number) => {
       id = ${id}
   `;
 
+  // Alternative to destructuring: access using [0]
+  // const animal = (await sql<Animal[]>`
+  //   SELECT
+  //     *
+  //   FROM
+  //     animals
+  //   WHERE
+  //     id = ${id}
+  // `)[0];
+
   return animal;
 });
 
diff --git a/util/cookies.js b/util/cookies.ts
similarity index 76%
rename from util/cookies.js
rename to util/cookies.ts
index 4675fad..51cce80 100644
--- a/util/cookies.js
+++ b/util/cookies.ts
@@ -1,6 +1,6 @@
 import { cookies } from 'next/headers';
 
-export async function getCookie(name) {
+export async function getCookie(name: string) {
   const cookie = (await cookies()).get(name);
   if (!cookie) {
     return undefined;
diff --git a/util/json.js b/util/json.js
deleted file mode 100644
index 11c69e5..0000000
--- a/util/json.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import sjson from 'secure-json-parse';
-
-export function parseJson(json) {
-  if (!json) return undefined;
-  try {
-    return sjson(json);
-  } catch {
-    return undefined;
-  }
-}
diff --git a/util/json.ts b/util/json.ts
new file mode 100644
index 0000000..75df90d
--- /dev/null
+++ b/util/json.ts
@@ -0,0 +1,19 @@
+import sjson from 'secure-json-parse';
+import { FruitComment } from '../app/fruits/[fruitId]/actions';
+
+export function parseJson(json: string | undefined) {
+  if (!json) return undefined;
+  try {
+    // `as` is called a type assertion
+    //
+    // This tells TypeScript that you know better about
+    // what the type is
+    //
+    // Slightly unsafe, because we don't really absolutely
+    // know what the type is coming back from sjson (it
+    // tells us that it is `any`)
+    return sjson(json) as FruitComment[];
+  } catch {
+    return undefined;
+  }
+}
diff --git a/util/math.js b/util/math.ts
similarity index 73%
rename from util/math.js
rename to util/math.ts
index 4206546..8d7fedf 100644
--- a/util/math.js
+++ b/util/math.ts
@@ -1,4 +1,4 @@
-export function add(a, b) {
+export function add(a: number, b: number) {
   if (typeof a !== 'number' || typeof b !== 'number') {
     throw new Error('Pass only numbers!');
   }