From 8a98a49bebbeb664b9e96fac9f13234f79303b07 Mon Sep 17 00:00:00 2001 From: Thada Wangthammang Date: Sat, 18 May 2024 13:24:52 +0700 Subject: [PATCH] doc: add type programming section --- docs/.vitepress/config.ts | 37 ++++++++++------ docs/design-patterns/function-overload.md | 4 ++ docs/examples.md | 6 ++- docs/intro.md | 2 +- docs/type-programming/examples.md | 54 +++++++++++++++++++++++ docs/type-programming/testing.md | 4 ++ docs/type-programming/type-programming.md | 13 ++++++ docs/type-safe.md | 8 +++- 8 files changed, 111 insertions(+), 17 deletions(-) create mode 100644 docs/type-programming/examples.md create mode 100644 docs/type-programming/testing.md create mode 100644 docs/type-programming/type-programming.md diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts index 37561ef..7b6ab10 100644 --- a/docs/.vitepress/config.ts +++ b/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 CC BY-NC-ND 4.0', - copyright: 'Copyright © 2024-present Thada Wangthammang' + message: + 'Content License under CC BY-NC-ND 4.0', + 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()], diff --git a/docs/design-patterns/function-overload.md b/docs/design-patterns/function-overload.md index af65609..fd2f094 100644 --- a/docs/design-patterns/function-overload.md +++ b/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 diff --git a/docs/examples.md b/docs/examples.md index b4f6bbe..4c8a60d 100644 --- a/docs/examples.md +++ b/docs/examples.md @@ -2,6 +2,8 @@ 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 @@ -9,4 +11,6 @@ Reading open source projects is a great way to learn how to write better code. H - Hono - Elysia - ts-odata-client -- [zodios](https://www.zodios.org/) \ No newline at end of file +- [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/) + diff --git a/docs/intro.md b/docs/intro.md index 787f6af..29ae859 100644 --- a/docs/intro.md +++ b/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 diff --git a/docs/type-programming/examples.md b/docs/type-programming/examples.md new file mode 100644 index 0000000..d0d6202 --- /dev/null +++ b/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 extends `${infer path}(${infer optionalPath})` + ? ParseUrlParams & Partial> + : url extends `${infer start}/${infer rest}` + ? ParseUrlParams & ParseUrlParams + : url extends `:${infer param}` + ? { [k in param]: string } + : {}; + +// navigate to a different route +function navigate( + path: T, + params: ParseUrlParams +) { + // interpolate params + let url = Object.entries(params).reduce( + (path, [key, value]) => path.replace(`:${key}`, value), + path + ); + + // clean url + url = url.replace(/(\(|\)|\/?:[^\/]+)/g, '') + + // update url + history.pushState({}, '', url); +} +``` \ No newline at end of file diff --git a/docs/type-programming/testing.md b/docs/type-programming/testing.md new file mode 100644 index 0000000..f4b9f09 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/docs/type-programming/type-programming.md b/docs/type-programming/type-programming.md new file mode 100644 index 0000000..698a8fc --- /dev/null +++ b/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 \ No newline at end of file diff --git a/docs/type-safe.md b/docs/type-safe.md index 3e5329b..0fd55af 100644 --- a/docs/type-safe.md +++ b/docs/type-safe.md @@ -1,9 +1,13 @@ -# 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: @@ -11,4 +15,4 @@ Many libraries and frameworks provide type-safe support, here is some characteri - **Generic**: They use generic types - **Literal**: They use literal types - **Builder Pattern**: They use builder pattern -- TBA \ No newline at end of file +- **Automatic Type Inference**: They use automatic type inference passing through the function and generic types \ No newline at end of file