Tricking TS to type-check component attributes

see microsoft/TypeScript#7004

Author: thorn0

README.md

@@ -1,12 +1,12 @@
 # babel-plugin-transform-ng1-jsx
 
-A proof of concept of type-checking Angular 1 templates with TypeScript. 
+A proof of concept of type-checking Angular 1 templates with TypeScript.
 
-The idea is to use [JSX](https://facebook.github.io/jsx/) for the templates, to type-check them with TypeScript, and to convert them into the usual HTML string representation with a Babel plugin. 
+The idea is to use [JSX](https://facebook.github.io/jsx/) for the templates, to type-check them with TypeScript, and to convert them into the usual HTML string representation with a Babel plugin.
 
 The solution consists of two parts:
 
-1. Type definitions for JSX ([`ng1-jsx.d.ts`](ng1-jsx.d.ts))
+1. Type definitions for JSX ([`ng1-jsx.ts`](ng1-jsx.ts))
 2. The Babel plugin
 
 Written in JSX, templates become just part of the TypeScript code. Include the type definitions with a `/// <reference path="..." />` comment, and use the [`--jsx preserve`](https://github.com/Microsoft/TypeScript/wiki/JSX) mode (`"jsx": "preserve"` in `tsconfig.json`) for the TypeScript compiler to understand and emit JSX. Finally, use the Babel plugin to compile JSX into HTML strings.
@@ -52,8 +52,6 @@ You can find an example to play with in the `example` folder. Run `npm run build
 
 # Issues / TBD
 
-* Type-checking component attributes. This one currently is **a big show stopper**. TypeScript _almost_ (but not quite) allows this. See the comments in [`ng1-jsx.d.ts`](ng1-jsx.d.ts).
-
 * Non-JS syntax elements in Angular expressions: filters and one-time bindings.
 
   The comma operator can help with this: `attr={ '|myFilter', $ctrl.foo }`, `ng-if={ '::', $ctrl.flag }`. This seems to be a good solution for one-time bindings, however the filters can change the type of the resulting value, so it's not type-checkable.
@@ -71,4 +69,5 @@ You can find an example to play with in the `example` folder. Run `npm run build
 * [JSX in TypeScript](https://github.com/Microsoft/TypeScript/wiki/JSX)
 * [Angular Expressions](https://docs.angularjs.org/guide/expression)
 * [TypeScript, issue #5151: checking frontend template files](https://github.com/Microsoft/TypeScript/issues/5151)
+* [TypeScript, issue #7004: JSX: a way to make all the properties of value-based elements optional](https://github.com/Microsoft/TypeScript/issues/7004)
 * [Refactoring Angular Apps to Component Style](http://teropa.info/blog/2015/10/18/refactoring-angular-apps-to-components.html)

example/src/example.tsx

@@ -1,12 +1,11 @@
-/// <reference path="../../ng1-jsx.d.ts" />
+/// <reference path="../../ng1-jsx.ts" />
 
 var mod = angular.module('example', []);
 
-
-class ParentView {
+class ParentView extends Component {
   record: { id: string };
   flag: boolean;
-  save(data: string) { }
+  save(data: string) {}
 }
 
 mod.component('parentView', {
@@ -21,19 +20,24 @@ mod.component('parentView', {
 mod.factory('parentViewTemplate', function() {
   let $ctrl: ParentView;
   return (
-    <div class='ooo'>
-      { $ctrl.record.id }
-      <ChildView someParameter="aaa" onSave={ ({data}) => $ctrl.save(data) } />
-      <span ng-if={ $ctrl.flag }>foo</span>
+    <div class="ooo">
+      {$ctrl.record.id}
+      <ChildView
+        someParameter="aaa"
+        onSave={({ data }) => $ctrl.save(data)}
+      />
+      <span ng-if={$ctrl.flag}>foo</span>
     </div>
   );
 });
 
-
-class ChildView {
+class ChildView extends Component {
   someParameter: string;
   onSave: (param: { data: string }) => void;
-  // doSave() { this.onSave({data: 'abc'}); }
+  doSave() {
+    var a = { a: 1 };
+    this.onSave({ data: 'abc' });
+  }
 }
 
 mod.component('childView', {
@@ -43,7 +47,7 @@ mod.component('childView', {
     someParameter: '<',
     onSave: '&'
   }
-})
+});
 
 mod.factory('childViewTemplate', function() {
   let $ctrl: ChildView;

example/tsconfig.json

@@ -3,7 +3,5 @@
     "jsx": "preserve",
     "experimentalDecorators": true
   },
-  "exclude": [
-    "node_modules"
-  ]
+  "exclude": ["node_modules"]
 }

ng1-jsx.d.ts

@@ -0,0 +1,23 @@
+class Component {
+  /** A bogus type-system-only property. */
+  __bogusProps: Partial<this>;
+}
+
+declare namespace JSX {
+  interface IntrinsicElements {
+    [elemName: string]: {
+      class?: string;
+      'ng-if'?: boolean;
+      'ng-show'?: boolean;
+      'ng-hide'?: boolean;
+      'ng-class'?: { [key: string]: string };
+      // and so on
+    };
+  }
+
+  type Element = string;
+
+  interface ElementAttributesProperty {
+    __bogusProps: any;
+  }
+}