From 78cdc05e387e12d225f47431332916bca1ce8b3a Mon Sep 17 00:00:00 2001
From: AkaraChen <85140972+AkaraChen@users.noreply.github.com>
Date: Tue, 20 Dec 2022 21:36:37 +0800
Subject: [PATCH] docs: typescript guide (#3)

Co-authored-by: wibus-wee <1596355173@qq.com>
---
 docs/.vitepress/config.ts  |  7 ++++-
 docs/publish/typescript.md | 54 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 60 insertions(+), 1 deletion(-)
 create mode 100644 docs/publish/typescript.md

diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index a03797a..b3037a9 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -78,7 +78,12 @@ export default defineConfig({
             text: 'Writing JSX',
             link: '/jsx/writing-jsx',
           }]
-        }
+        },
+        {
+          text: 'Publish component library', items: [{
+            text: 'TypeScript',
+            link: '/publish/typescript'
+        }]}
       ]
     },
 
diff --git a/docs/publish/typescript.md b/docs/publish/typescript.md
new file mode 100644
index 0000000..303f203
--- /dev/null
+++ b/docs/publish/typescript.md
@@ -0,0 +1,54 @@
+# TypeScript
+
+## The why
+
+When you define a web components, TypeScript doesn't know anything about it, all the props will be `any` type. Unless you define it.
+
+## Define for TypeScript
+
+```ts
+@JwcComponent({ name: "app-element" })
+export class App extends JwcComponent {
+  @Prop() name: string = "World";
+  override render() {
+    return <div>{this.name}</div>;
+  }
+}
+
+declare global { // [!code focus]
+    interface HTMLElementTagNameMap { // [!code focus]
+        "app-element": App; // [!code focus]
+    } // [!code focus]
+} // [!code focus]
+```
+
+Then, you can get full type intelligence on this component:
+
+```ts
+// Auto complete component name.
+const app = document.createElement('app-element') 
+// Will get type error in IDE.
+app.name = 1
+```
+
+## Define for TSX
+
+In `.tsx`, your component will perform well, but still get type error, becasue jsx compiler have it's own type defination.
+
+Add following code to fix it.
+
+```ts
+type Reactify<T> = Partial<T> &
+    React.DetailedHTMLProps<
+        React.HTMLAttributes<HTMLDivElement>,
+        HTMLDivElement
+    >;
+
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'app-element': Reactify<App>;
+        }
+    }
+}
+```