diff --git a/package.json b/package.json
index 03930b17..9f381da7 100644
--- a/package.json
+++ b/package.json
@@ -35,9 +35,10 @@
     "svelte": "^3.48.0",
     "svelte-check": "^2.7.1",
     "svelte-focus-key": "^0.3.2",
+    "svelte-preprocess": "^4.10.7",
     "svelte2tsx": "^0.5.10",
     "totalist": "^3.0.0",
-    "typescript": "^4.7.2",
+    "typescript": "^4.7.3",
     "vitest": "^0.13.1"
   },
   "repository": {
diff --git a/src/Highlight.svelte b/src/Highlight.svelte
index 42b2cd32..10ef981f 100644
--- a/src/Highlight.svelte
+++ b/src/Highlight.svelte
@@ -1,26 +1,61 @@
-<script>
-  /** @type {{ name?: string; register: (hljs: any) => Record<string, any>; }} */
-  export let language = { name: undefined, register: undefined };
-
-  /**
-   * Source code to highlight
-   * @type {string}
-   */
+<script context="module" lang="ts">
+  import type { LanguageFn } from "highlight.js";
+
+  export type HighlightedCode = undefined | string;
+
+  export interface Language {
+    name?: string;
+    register: LanguageFn;
+  }
+
+  export interface Events {
+    highlight: {
+      highlighted?: HighlightedCode;
+    };
+  }
+</script>
+
+<script lang="ts">
+  interface $$Props extends Partial<HTMLPreElement> {
+    /**
+     * Specify the source code to highlight.
+     */
+    code?: any;
+
+    /**
+     * Provide the language to highlight the code.
+     * Import languages from `svelte-highlight/languages/*`.
+     */
+    language?: Language;
+
+    /**
+     * Set to `true` for the language name to be
+     * displayed at the top right of the code block.
+     */
+    langtag?: boolean;
+  }
+
+  interface $$Slots {
+    default: {
+      highlighted: HighlightedCode;
+    };
+  }
+
+  export let language: Language = {
+    name: undefined,
+    register: undefined,
+  };
+
   export let code = undefined;
 
-  /**
-   * Add a language tag to the top-right
-   * of the code block
-   * @type {boolean}
-   */
   export let langtag = false;
 
   import hljs from "highlight.js/lib/core";
   import { createEventDispatcher, afterUpdate } from "svelte";
 
-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher<Events>();
 
-  let highlighted = undefined;
+  let highlighted: HighlightedCode = undefined;
 
   afterUpdate(() => {
     if (highlighted) dispatch("highlight", { highlighted });
diff --git a/src/HighlightAuto.svelte b/src/HighlightAuto.svelte
index c99178ab..05af41c9 100644
--- a/src/HighlightAuto.svelte
+++ b/src/HighlightAuto.svelte
@@ -1,23 +1,43 @@
-<script>
-  /**
-   * Source code to highlight
-   * @type {string}
-   */
+<script context="module" lang="ts">
+  import type { HighlightedCode, Language, Events } from "./Highlight.svelte";
+</script>
+
+<script lang="ts">
+  interface $$Props extends Partial<HTMLPreElement> {
+    /**
+     * Specify the source code to highlight.
+     */
+    code?: any;
+
+    /**
+     * Provide the language to highlight the code.
+     * Import languages from `svelte-highlight/languages/*`.
+     */
+    language?: Language;
+
+    /**
+     * Set to `true` for the language name to be
+     * displayed at the top right of the code block.
+     */
+    langtag?: boolean;
+  }
+
+  interface $$Slots {
+    default: {
+      highlighted: HighlightedCode;
+    };
+  }
+
   export let code = undefined;
 
-  /**
-   * Add a language tag to the top-right
-   * of the code block
-   * @type {boolean}
-   */
   export let langtag = false;
 
   import hljs from "highlight.js";
   import { createEventDispatcher, afterUpdate } from "svelte";
 
-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher<Events>();
 
-  let highlighted = undefined;
+  let highlighted: HighlightedCode = undefined;
   let language = undefined;
 
   afterUpdate(() => {
diff --git a/src/HighlightSvelte.svelte b/src/HighlightSvelte.svelte
index b0a90b08..d1c955fc 100644
--- a/src/HighlightSvelte.svelte
+++ b/src/HighlightSvelte.svelte
@@ -1,15 +1,29 @@
-<script>
-  /**
-   * Source code to highlight
-   * @type {string}
-   */
+<script context="module" lang="ts">
+  import type { HighlightedCode, Language, Events } from "./Highlight.svelte";
+</script>
+
+<script lang="ts">
+  interface $$Props extends Partial<HTMLPreElement> {
+    /**
+     * Specify the source code to highlight.
+     */
+    code?: any;
+
+    /**
+     * Set to `true` for the language name to be
+     * displayed at the top right of the code block.
+     */
+    langtag?: boolean;
+  }
+
+  interface $$Slots {
+    default: {
+      highlighted: HighlightedCode;
+    };
+  }
+
   export let code = undefined;
 
-  /**
-   * Add a language tag to the top-right
-   * of the code block
-   * @type {boolean}
-   */
   export let langtag = false;
 
   import hljs from "highlight.js/lib/core";
@@ -18,7 +32,7 @@
   import css from "highlight.js/lib/languages/css";
   import { createEventDispatcher, afterUpdate } from "svelte";
 
-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher<Events>();
 
   hljs.registerLanguage("xml", xml);
   hljs.registerLanguage("javascript", javascript);
diff --git a/src/index.js b/src/index.ts
similarity index 100%
rename from src/index.js
rename to src/index.ts
diff --git a/svelte.config.js b/svelte.config.js
index e64ed6ef..a39771c3 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -1,5 +1,6 @@
 import adapter from "@sveltejs/adapter-static";
 import fs from "fs";
+import preprocess from "svelte-preprocess"
 import { optimizeImports } from "carbon-preprocess-svelte";
 
 const pkg = JSON.parse(
@@ -16,6 +17,7 @@ const CONTENT = {
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
   preprocess: [
+    preprocess(),
     optimizeImports(),
     {
       script: ({ content }) => {
diff --git a/tsconfig.json b/tsconfig.json
index d2ca3b7b..2f48a1db 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,4 +1,10 @@
 {
   "extends": "./.svelte-kit/tsconfig.json",
-  "include": ["demo/**/*.js", "demo/**/*.svelte", "tests/*.svelte"]
+  "include": [
+    "src/**/*.svelte",
+    "src/**/*.ts",
+    "demo/**/*.js",
+    "demo/**/*.svelte",
+    "tests/*.svelte"
+  ]
 }
diff --git a/yarn.lock b/yarn.lock
index 773fc839..58557cb9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1378,6 +1378,18 @@ svelte-preprocess@^4.10.5:
     sorcery "^0.10.0"
     strip-indent "^3.0.0"
 
+svelte-preprocess@^4.10.7:
+  version "4.10.7"
+  resolved "https://registry.yarnpkg.com/svelte-preprocess/-/svelte-preprocess-4.10.7.tgz#3626de472f51ffe20c9bc71eff5a3da66797c362"
+  integrity sha512-sNPBnqYD6FnmdBrUmBCaqS00RyCsCpj2BG58A1JBswNF7b0OKviwxqVrOL/CKyJrLSClrSeqQv5BXNg2RUbPOw==
+  dependencies:
+    "@types/pug" "^2.0.4"
+    "@types/sass" "^1.16.0"
+    detect-indent "^6.0.0"
+    magic-string "^0.25.7"
+    sorcery "^0.10.0"
+    strip-indent "^3.0.0"
+
 svelte2tsx@^0.5.10:
   version "0.5.10"
   resolved "https://registry.yarnpkg.com/svelte2tsx/-/svelte2tsx-0.5.10.tgz#32f244534361325e40f8976173ce2569c7e71fdb"
@@ -1464,10 +1476,10 @@ typescript@*, typescript@^4.6.3:
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.6.3.tgz#eefeafa6afdd31d725584c67a0eaba80f6fc6c6c"
   integrity sha512-yNIatDa5iaofVozS/uQJEl3JRWLKKGJKh6Yaiv0GLGSuhpFJe7P3SbHZ8/yjAHRQwKRoA6YZqlfjXWmVzoVSMw==
 
-typescript@^4.7.2:
-  version "4.7.2"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.7.2.tgz#1f9aa2ceb9af87cca227813b4310fff0b51593c4"
-  integrity sha512-Mamb1iX2FDUpcTRzltPxgWMKy3fhg0TN378ylbktPGPK/99KbDtMQ4W1hwgsbPAsG3a0xKa1vmw4VKZQbkvz5A==
+typescript@^4.7.3:
+  version "4.7.3"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.7.3.tgz#8364b502d5257b540f9de4c40be84c98e23a129d"
+  integrity sha512-WOkT3XYvrpXx4vMMqlD+8R8R37fZkjyLGlxavMc4iB8lrl8L0DeTcHbYgw/v0N/z9wAFsgBhcsF0ruoySS22mA==
 
 universalify@^0.1.2:
   version "0.1.2"