Add note about TypeScript requiring types for namespaced attributes (#…

…954)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

src/routes/configuration/typescript.mdx

@@ -748,12 +748,15 @@ declare module "solid-js" {
       count: number;
       name: string;
     }
+    interface ExplicitBoolAttributes {
+      disabled: boolean;
+    }
   }
 }
 
 // Usage
 <Input prop:name={name()} prop:count={count()}/>
-<my-web-component attr:name={name()} attr:count={count()}/>
+<my-web-component attr:name={name()} attr:count={count()} bool:disabled={true}/>
 ```
 
 #### Custom directives

src/routes/reference/jsx-attributes/attr.mdx

@@ -2,8 +2,14 @@
 title: attr:*
 ---
 
-Forces the prop to be treated as an attribute instead of a property. Useful for Web Components where you want to set attributes.
+Forces the prop to be treated as an attribute instead of a property.
+Useful for Web Components where you want to set attributes.
 
 ```tsx
 <my-element attr:status={props.status} />
 ```
+
+<Callout type="info" title="Strong-Typing Custom Attributes">
+	Type definitions are required when using TypeScript.
+	See the[TypeScript](/configuration/typescript#forcing-properties-and-custom-attributes) page for examples.
+</Callout>

src/routes/reference/jsx-attributes/bool.mdx

@@ -19,3 +19,8 @@ This attribute is most useful for Web Components.
 <my-element />
 
 ```
+
+<Callout type="info" title="Strong-Typing Custom Bollean Attributes">
+	Type definitions are required when using TypeScript.
+	See the [TypeScript](/configuration/typescript#forcing-properties-and-custom-attributes) page for examples.
+</Callout>

src/routes/reference/jsx-attributes/on.mdx

@@ -29,7 +29,7 @@ const handler = {
 
 // or inline
 
-<div on:click={{passive:true, handleEvent(e) => console.log("Weeeee!")}} />
+<div on:click={{passive:true, handleEvent(e) { console.log("Weeeee!")}}} />
 ```
 
 This new syntax replaces the now deprecated `oncapture:` and it's future proof for any posible new event listener options.

src/routes/reference/jsx-attributes/prop.mdx

@@ -8,3 +8,8 @@ Forces the prop to be treated as a property instead of an attribute.
 ```tsx
 <div prop:scrollTop={props.scrollPos + "px"} />
 ```
+
+<Callout type="info" title="Strong-Typing Custom Properties">
+	Type definitions are required when using TypeScript.
+	See the [TypeScript](/configuration/typescript#forcing-properties-and-custom-attributes) page for examples.
+</Callout>