doc: add type programming section

docs/.vitepress/config.ts

@@ -1,6 +1,8 @@
 import { defineConfig } from "vitepress";
 import { transformerTwoslash } from "@shikijs/vitepress-twoslash";
 
+const isCollapsed = true;
+
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
   lastUpdated: true,
@@ -17,16 +19,16 @@ export default defineConfig({
     sidebar: [
       {
         text: "Start Reading",
-        collapsed: false,
+        collapsed: isCollapsed,
         items: [
           { text: "Introduction", link: "/intro" },
-          { text: "Type-safe", link: "/type-safe" },
+          { text: "What is Type-safe", link: "/type-safe" },
           { text: "Examples", link: "/examples" },
         ],
       },
       {
         text: "Data Structure",
-        collapsed: false,
+        collapsed: isCollapsed,
         items: [
           { text: "Intro", link: "/data-structure/data-structure" },
           { text: "Literal String", link: "/data-structure/literal-string" },
@@ -36,7 +38,7 @@ export default defineConfig({
       },
       {
         text: "Design Patterns",
-        collapsed: false,
+        collapsed: isCollapsed,
         items: [
           { text: "Intro", link: "/design-patterns/design-patterns" },
           { text: "Builder Pattern", link: "/design-patterns/builder-pattern" },
@@ -52,24 +54,32 @@ export default defineConfig({
       },
       {
         text: "Framework Pattern",
-        collapsed: false,
+        collapsed: isCollapsed,
         items: [
           { text: "Intro", link: "/framework-pattern/framework-pattern" },
           { text: "Config File", link: "/framework-pattern/config-file" },
         ],
       },
       {
-        text: "Performance",
-        collapsed: false,
+        text: "Type Programming",
+        collapsed: isCollapsed,
         items: [
-          { text: "Intro", link: "/performance/performance" },
+          { text: "Intro", link: "/type-programming/type-programming" },
+
+          { text: "Testing", link: "/type-programming/testing" },
+          { text: "Examples", link: "/type-programming/examples" },
         ],
       },
-
+      {
+        text: "Performance",
+        collapsed: isCollapsed,
+        items: [{ text: "Intro", link: "/performance/performance" }],
+      },
     ],
     footer: {
-      message: 'Content License under <a href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="blank">CC BY-NC-ND 4.0</a>',
-      copyright: 'Copyright © 2024-present Thada Wangthammang'
+      message:
+        'Content License under <a href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="blank">CC BY-NC-ND 4.0</a>',
+      copyright: "Copyright © 2024-present Thada Wangthammang",
     },
     socialLinks: [
       {
@@ -81,8 +91,9 @@ export default defineConfig({
       provider: "local",
     },
     editLink: {
-      pattern: 'https://github.com/mildronize/type-safe-design-pattern/tree/main/docs/:path'
-    }
+      pattern:
+        "https://github.com/mildronize/type-safe-design-pattern/tree/main/docs/:path",
+    },
   },
   markdown: {
     codeTransformers: [transformerTwoslash()],

docs/design-patterns/function-overload.md

@@ -2,6 +2,10 @@
 
 Function overloading is a feature that allows creating multiple functions with the same name but different parameters. It is a way to achieve polymorphism in programming languages that do not support it natively.
 
+## Prerequisites
+
+- [TypeScript Function Overloading](https://dmitripavlutin.com/typescript-function-overloading/)
+
 ## Examples
 
 ```ts

docs/examples.md

@@ -2,11 +2,15 @@
 
 Reading open source projects is a great way to learn how to write better code. However, it can be difficult to understand the codebase of a large project. In this book, I will provide examples of code snippets from well-known open-source projects such as Zod, tRPC, Hono, Elysia, and ts-odata-client. I will explain the code and show you how to apply the same patterns to your own projects.
 
+Most Type-safe in the Modern TypeScript libraries use Template Literal Types, you can checkout [TypeScript Awesome Template Literal Types](https://github.com/ghoullier/awesome-template-literal-types) which is a curated list of awesome things related to TypeScript Template Literal Types.
+
 ## Modern TypeScript Libraries
 
 - Zod
 - tRPC
 - Hono
 - Elysia
 - ts-odata-client
-- [zodios](https://www.zodios.org/)
+- [hotscript](https://github.com/gvergnaud/hotscript) - A library of composable functions for the type-level! Transform your TypeScript types in any way you want using functions you already know.
+- [zodios](https://www.zodios.org/)
+

docs/intro.md

@@ -43,7 +43,7 @@ Please make sure you have a good understanding of TypeScript before reading this
 Generics are a fundamental concept in TypeScript, so make sure you understand them. You can read the [Generics](https://www.typescriptlang.org/docs/handbook/2/generics.html) section of the TypeScript Handbook. 
 
 After that, make sure you have understand type-level programming. You can read the [Type-Level Programming](https://type-level-typescript.com/) book. 
-There are many free chapters available. However, I recommend buying the book to support the author.
+There are many free chapters available. However, I recommend buying the book to support the author. See more in [YouTube](https://www.youtube.com/watch?v=vGVvJuazs84) and his [slide](https://docs.google.com/presentation/d/18Y0M4SRjKoJGR3ePSBBn8yPlpkE5biufZRdHo1Ka2AI/edit?usp=sharin).
 
 ### Recommended Books
 - [Effective TypeScript: 62 Specific Ways to Improve Your TypeScript](https://learning.oreilly.com/library/view/effective-typescript/9781098155056/) By Dan Vanderkam

docs/type-programming/examples.md

@@ -0,0 +1,54 @@
+# Examples
+
+A curated list of awesome things related to Type Programming
+
+
+## Check Object base on string pattern
+
+Ref: https://type-level-typescript.com/
+
+```ts twoslash
+// ✅ this is correct 👌
+navigate("user/:userId", { userId: "2"});
+
+// ✅ Looks good! `dashboardId` is optional.
+navigate("user/:userId/dashboard(/:dashboardId)", { userId: "2" });
+
+// ❌ `userId` is missing. Add one to fix the error!
+// @ts-expect-error
+navigate("user/:userId/dashboard(/:dashboardId)", { dashboardId: "2" });
+
+// ❌ `oops` isn't a parameter. Remove it to fix the error!
+// @ts-expect-error
+navigate("user/:userId/dashboard(/:dashboardId)", { userId: "2", oops: ":(" });
+
+// 👇 Scroll to see how this works!
+
+// 🤫 Here are the kind of things you will soon be able to do!
+type ParseUrlParams<url> =
+  url extends `${infer path}(${infer optionalPath})`
+    ? ParseUrlParams<path> & Partial<ParseUrlParams<optionalPath>>
+    : url extends `${infer start}/${infer rest}`
+    ? ParseUrlParams<start> & ParseUrlParams<rest>
+    : url extends `:${infer param}`
+    ? { [k in param]: string }
+    : {};
+
+// navigate to a different route
+function navigate<T extends string>(
+  path: T,
+  params: ParseUrlParams<T>
+) {
+  // interpolate params
+  let url = Object.entries<string>(params).reduce<string>(
+    (path, [key, value]) => path.replace(`:${key}`, value),
+    path
+  );
+
+  // clean url
+  url = url.replace(/(\(|\)|\/?:[^\/]+)/g, '')
+
+  // update url
+  history.pushState({}, '', url);
+}
+```

docs/type-programming/testing.md

@@ -0,0 +1,4 @@
+# Testing
+
+- https://www.npmjs.com/package/@type-challenges/utils
+- [Testing Types](https://vitest.dev/guide/testing-types) in Vitest 

docs/type-programming/type-programming.md

@@ -0,0 +1,13 @@
+# Type Programming
+
+Type programming or type-level programmming, definition from [Type-Level Programming](https://type-level-typescript.com/), some developer say about [the Turing Complete type system](https://github.com/microsoft/TypeScript/issues/14833) in Typescript. Whatever it is, in my book, I will describe as **Type Programming**.
+
+Type programming is the practice of writing programs that operate on types. In TypeScript, this is done using the type system. Type-level programming is a powerful technique that can be used to create complex type-level computations and to enforce constraints on types.
+
+## Here is curated list of awesome things related to Type Programming:
+
+- [type-challenges](https://github.com/type-challenges/type-challenges) Collection of TypeScript type challenges with online judge
+- [TypeScript Awesome Template Literal Types](https://github.com/ghoullier/awesome-template-literal-types)
+- [Type-Level Programming](https://type-level-typescript.com/)
+- [Extreme Explorations of TypeScript's Type System](https://www.learningtypescript.com/articles/extreme-explorations-of-typescripts-type-system) by Josh Goldberg
+- [TypeScript Type System Hacks](https://matt-rickard.com/typescript-type-system-hacks) by Matt Rickard

docs/type-safe.md

@@ -1,14 +1,18 @@
-# What's Type-safe?
+# What is Type-safe?
 
 Most community said that **type-safe** a lot, but no one try to define it. So, I will try to define it.
 
 Type-safe is a design pattern that provide a way to ensure that the data type is correct and consistent in the program. This pattern is very useful in modern programming language like TypeScript, where the type system is very powerful and can be used to ensure the correctness of the program.
 
+## The Traditional Type
+
+
+
 ## Characteristics of Type-safe
 
 Many libraries and frameworks provide type-safe support, here is some characteristics of type-safe when the they claim that they are type-safe:
 
 - **Generic**: They use generic types
 - **Literal**: They use literal types
 - **Builder Pattern**: They use builder pattern
-- TBA
+- **Automatic Type Inference**: They use automatic type inference passing through the function and generic types