fix: fix TS errors

package.json

@@ -26,7 +26,7 @@
   "scripts": {
     "cypress:open": "cypress open",
     "dev": "astro dev",
-    "build": "astro build",
+    "build": "astro check && tsc --noEmit && astro build",
     "start": "astro preview",
     "format": "prettier -w ./src",
     "check:format": "prettier -c ./src",
@@ -38,6 +38,7 @@
     "cypress": "^12.8.1",
     "prettier": "^2.8.6",
     "prettier-plugin-astro": "^0.8.0",
-    "standard-version": "^9.5.0"
+    "standard-version": "^9.5.0",
+    "typescript": "^5.0.2"
   }
 }

src/SEO.astro

@@ -6,11 +6,7 @@ import OpenGraphOptionalTags from "./components/OpenGraphOptionalTags.astro";
 import ExtendedTags from "./components/ExtendedTags.astro";
 import TwitterTags from "./components/TwitterTags.astro";
 
-export type TwitterCardType =
-  | "summary"
-  | "summary_large_image"
-  | "app"
-  | "player";
+export type TwitterCardType = "summary" | "summary_large_image" | "app" | "player";
 
 export interface Link extends HTMLLinkElement {
   prefetch: boolean;
@@ -79,86 +75,77 @@ export interface Props {
   surpressWarnings?: boolean;
 }
 
-const { props } = Astro;
-const {
-  title,
-  titleTemplate,
-  titleDefault,
-  description,
-  canonical,
-  noindex,
-  nofollow,
-  charset,
-  surpressWarnings,
-} = props;
-
-function validateProps(props) {
-  const { openGraph, description } = props;
-
-  if (openGraph) {
+Astro.props.surpressWarnings = true;
+
+function validateProps(props: Props) {
+  if (props.openGraph) {
     if (
-      !openGraph.basic ||
-      openGraph.basic.title == null ||
-      openGraph.basic.type == null ||
-      openGraph.basic.image == null
+      !props.openGraph.basic ||
+      props.openGraph.basic.title == null ||
+      props.openGraph.basic.type == null ||
+      props.openGraph.basic.image == null
     ) {
       throw new Error(
         "If you pass the openGraph prop, you have to at least define the title, type, and image basic properties!"
       );
     }
   }
 
-  if (title && openGraph?.basic.title) {
-    if (title == openGraph.basic.title) {
-      if (!surpressWarnings) {
-        console.warn(
-          "WARNING(astro-seo): You passed the same value to `title` and `openGraph.optional.title`. This is most likely not what you want. See docs for more."
-        );
-      }
-    }
-  }
-
-  if (openGraph?.basic?.image && !openGraph?.image?.alt) {
-    if (!surpressWarnings) {
+  if (props.title && props.openGraph?.basic.title) {
+    if (props.title == props.openGraph.basic.title && !props.surpressWarnings) {
       console.warn(
-        "WARNING(astro-seo): You defined `openGraph.basic.image`, but didn't define `openGraph.image.alt`. This is stongly discouraged.'"
+        "WARNING(astro-seo): You passed the same value to `title` and `openGraph.optional.title`. This is most likely not what you want. See docs for more."
       );
     }
   }
+
+  if (
+    props.openGraph?.basic?.image &&
+    !props.openGraph?.image?.alt &&
+    !props.surpressWarnings
+  ) {
+    console.warn(
+      "WARNING(astro-seo): You defined `openGraph.basic.image`, but didn't define `openGraph.image.alt`. This is stongly discouraged.'"
+    );
+  }
 }
 
-validateProps(props);
+validateProps(Astro.props);
 
 let updatedTitle = "";
 
-if (title) {
-  updatedTitle = title;
-  if (titleTemplate) {
-    updatedTitle = titleTemplate.replace(/%s/g, updatedTitle);
+if (Astro.props.title) {
+  updatedTitle = Astro.props.title;
+  if (Astro.props.titleTemplate) {
+    updatedTitle = Astro.props.titleTemplate.replace(/%s/g, updatedTitle);
   }
-} else if (titleDefault) {
-  updatedTitle = titleDefault;
+} else if (Astro.props.titleDefault) {
+  updatedTitle = Astro.props.titleDefault;
 }
 ---
 
 {updatedTitle ? <title set:html={updatedTitle} /> : null}
 
-{charset ? <meta charset={charset} /> : null}
+{Astro.props.charset ? <meta charset={Astro.props.charset} /> : null}
 
-<link rel="canonical" href={canonical || Astro.url.href} />
+<link rel="canonical" href={Astro.props.canonical || Astro.url.href} />
 
-{description ? <meta name="description" content={description} /> : null}
+{
+  Astro.props.description ? (
+    <meta name="description" content={Astro.props.description} />
+  ) : null
+}
 
 <meta
   name="robots"
-  content={`${noindex ? "noindex" : "index"}, ${
-    nofollow ? "nofollow" : "follow"
+  content={`${Astro.props.noindex ? "noindex" : "index"}, ${
+    Astro.props.nofollow ? "nofollow" : "follow"
   }`}
 />
 
-{props.openGraph && <OpenGraphBasicTags {...props} />}
-{props.openGraph?.optional && <OpenGraphOptionalTags {...props} />}
-{props.openGraph?.image && <OpenGraphImageTags {...props} />}
-{props.openGraph?.article && <OpenGraphArticleTags {...props} />}
-{props.twitter && <TwitterTags {...props} />}
-{props.extend && <ExtendedTags {...props} />}
+{Astro.props.openGraph && <OpenGraphBasicTags {...Astro.props} />}
+{Astro.props.openGraph?.optional && <OpenGraphOptionalTags {...Astro.props} />}
+{Astro.props.openGraph?.image && <OpenGraphImageTags {...Astro.props} />}
+{Astro.props.openGraph?.article && <OpenGraphArticleTags {...Astro.props} />}
+{Astro.props.twitter && <TwitterTags {...Astro.props} />}
+{Astro.props.extend && <ExtendedTags {...Astro.props} />}

src/components/ExtendedTags.astro

@@ -1,8 +1,16 @@
 ---
+import type { HTMLAttributes } from "astro/types";
+
 const { props } = Astro;
+
+type Link = HTMLAttributes<"link">;
 ---
 
-{props.extend.link?.map((attributes) => <link {...attributes} />)}
+{
+  props.extend.link?.map((attributes: Link) => (
+    <link {...attributes} />
+  ))
+}
 {
   props.extend.meta?.map(({ content, httpEquiv, name, property }) => (
     <meta

src/components/OpenGraphArticleTags.astro

@@ -20,10 +20,10 @@ const { publishedTime, modifiedTime, expirationTime, authors, section, tags } =
 }
 {
   authors
-    ? authors.map((author) => (
+    ? authors.map((author: string) => (
         <meta property="article:author" content={author} />
       ))
     : null
 }
 {section ? <meta property="article:section" content={section} /> : null}
-{tags ? tags.map((tag) => <meta property="article:tag" content={tag} />) : null}
+{tags ? tags.map((tag: string) => <meta property="article:tag" content={tag} />) : null}

src/components/OpenGraphImageTags.astro

@@ -1,6 +1,6 @@
 ---
 const { image } = Astro.props.openGraph.basic;
-const { url, secureUrl, type, width, height, alt } =
+const { secureUrl, type, width, height, alt } =
   Astro.props.openGraph.image;
 ---
 

src/components/OpenGraphOptionalTags.astro

@@ -19,7 +19,7 @@ const { optional } = Astro.props.openGraph;
   ) : null
 }
 {
-  optional.localeAlternate?.map((locale) => (
+  optional.localeAlternate?.map((locale: string) => (
     <meta property="og:locale:alternate" content={locale} />
   ))
 }

src/index.ts

@@ -1,3 +1,5 @@
+// @ts-expect-error
 export { default as SEO } from "./SEO.astro";
 
+// @ts-expect-error
 export * from "./SEO.astro";

tsconfig.json

@@ -1,3 +1,6 @@
 {
-    "extends": "astro/tsconfigs/base"
+    "extends": "astro/tsconfigs/base",
+    "compilerOptions": {
+      "importsNotUsedAsValues": "error",
+    }
   }