fix(ts-typings): make prop api generic and 100% type safe (#1048)

.gitignore

@@ -33,3 +33,4 @@ node_modules
 dist
 _book
 .vscode/
+ts-output

src/ts-typings/api.d.ts

@@ -92,11 +92,11 @@ export function link(elem: Component<any>, target?: string): (e: Event) => void;
 export var prop: {
   create<T>(attr: PropOptions<any, T>): PropOptions<any, T> & ((attr: PropOptions<any, T>) => PropOptions<any, T>);
 
-  number(attr?: PropOptions<any, number>): PropOptions<any, number>;
-  boolean(attr?: PropOptions<any, boolean>): PropOptions<any, boolean>;
-  string(attr?: PropOptions<any, string>): PropOptions<any, string>;
-  array<T>(attr?: PropOptions<any, T[]>): PropOptions<any, T[]>;
-  object<T extends Object>(attr?: PropOptions<any, T>): PropOptions<any, T>;
+  number<E extends Component<any>, T extends number>(attr?: PropOptions<E, T>): PropOptions<E, T>;
+  boolean<E extends Component<any>, T extends boolean>(attr?: PropOptions<E, T>): PropOptions<E, T>;
+  string<E extends Component<any>, T extends string>(attr?: PropOptions<E, T>): PropOptions<E, T>;
+  array<E extends Component<any>, T>(attr?: PropOptions<E, T[]>): PropOptions<E, T[]>;
+  object<E extends Component<any>, T extends Object>(attr?: PropOptions<E, T>): PropOptions<E, T>;
 };
 
 /**

test/definitions/misc.tsx

@@ -245,11 +245,12 @@
     }
   });
 
-  class Elem extends skate.Component<{ str: string; arr: any[]; }> {
-    static get props() {
+  type ElemProps = { str: string; arr: string[]; };
+  class Elem extends skate.Component<ElemProps> {
+    static get props(): skate.ComponentProps<Elem, ElemProps> {
       return {
         str: skate.prop.string(),
-        arr: skate.prop.array()
+        arr: skate.prop.array<Elem, string>()
       }
     }
 

test/definitions/sample-component.tsx

@@ -7,20 +7,38 @@ import * as skate from "skatejs";
   d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
 };
 
-interface CountUpProps {
-  count: number;
+
+export type NumLiteral = 123 | 124 | 125;
+export type StrLiteral = 'one' | 'two' | 'three';
+export type SkateType = { trucks: string, deck: string }
+export interface CountUpProps {
+  count?: number;
+  num?: number,
+  numLiteral?: NumLiteral,
+  str?: string,
+  strLiteral?: StrLiteral,
+  bool?: boolean,
+  arr?: string[],
+  obj?: SkateType,
 }
 
-class CountUpComponent extends skate.Component<CountUpProps> {
+export class CountUpComponent extends skate.Component<CountUpProps> {
   static get is() { return 'x-countup' }
   static get props(): skate.ComponentProps<CountUpComponent, CountUpProps> {
     return {
-      count: skate.prop.number({
+      count: skate.prop.number<CountUpComponent, number>({
         attribute: true,
         default(elem, data) {
           return 7;
         },
       }),
+      num: skate.prop.number(),
+      numLiteral: skate.prop.number<CountUpComponent, NumLiteral>(),
+      str: skate.prop.string(),
+      strLiteral: skate.prop.string<CountUpComponent, StrLiteral>(),
+      bool: skate.prop.boolean(),
+      arr: skate.prop.array<CountUpComponent, string>(),
+      obj: skate.prop.object<CountUpComponent, SkateType>(),
     }
   }
 
@@ -46,12 +64,29 @@ customElements.define("x-app", class extends skate.Component<{}> {
     return (
       <div>
         <h1>app</h1>
-        <CountUpComponent count={100}></CountUpComponent>
+        <CountUpComponent count={100} obj={{ trucks: 'Independent', deck: 'ZERO' }}></CountUpComponent>
       </div>
     );
   }
 });
 
+export type ElmProps = { str: string; arr: any[]; };
+class Elem extends skate.Component<ElmProps> {
+  static get props(): skate.ComponentProps<Elem, ElmProps> {
+    return {
+      str: skate.prop.string(),
+      arr: skate.prop.array()
+    }
+  }
+
+  str: string;
+  arr: string[];
+
+  renderCallback() {
+    return skate.h('div', 'testing');
+  }
+}
+
 
 type ButtonProps = { onClick: (e: MouseEvent) => void };
 const Button: skate.SFC<ButtonProps> = ({onClick}, children: any) => (

tsconfig.json

@@ -20,10 +20,12 @@
     "sourceMap": false,
     "moduleResolution": "node",
     "strictNullChecks": true,
+    "declaration": true,
     "noEmit": true,
     "jsx": "react",
     "jsxFactory": "skate.h",
-    "pretty": true
+    "pretty": true,
+    "outDir": "ts-output"
   },
   "include": [
     "src/index.d.ts",