Integration with AngularJS - Compile AngularJS bindings in HTML files

[vitalybe]

Consider the following code in an HTML file:

<div ng-controller="HomeController as home">
    {{home.property1}}
</div>

Since we know that "home" is an instance of HomeController, it would be great if TypeScript could compile that and throw a compilation error if "property1" doesn't exist in its definition.

[basarat]

Will be closed as not a part of the Design goals.

But I'd like to hear any community work.

[RyanCavanaugh]

What basarat said. We're not an HTML compiler, but it would be cool to see someone write an HTML validator that used TypeScript files as a reference.

[Gambero81]

It will be a killer feature to implement! type check will be finally complete! actually parsing only .ts and no html leave code not really safe..

[basarat]

There is JSX support baked into TypeScript ... and I recommend looking into that 🌹 Quick rundown

[Gambero81]

i'm trying to implement type check in html angular bindings,
i can parse html with HtmlAgilityPack library and locate all angular bindings, now next step is to compile this bindings with typescript.
basarat in a stackoverflow post (http://stackoverflow.com/questions/25140029/use-typescript-in-angularjs-to-check-the-interpolation-binding-in-html) you suggest to use Typescript language service, do you have any suggestion how to use it? i only need to compile typescript code that i have extrapolated from html...
Thanks

[basarat]

you suggest to use Typescript language service, do you have any suggestion how to use it

I imagine something like pseudo ts files passed to the language as input and then asking the language service questions about the file (e.g. errors, completions) etc.

[mhegazy]

also see #5151 for related discussion.

[mhegazy]

@Gambero81 would be interested to see how this work proceeds; would appreciate it if you can share your progress.

[emmanueltouzery]

I wrote a project to handle this issue specifically for angular1 views. It uses the typescript compiler API to parse the javascript and typescript code, htmlparser2 to parse the views, and the parsimmon parser combinator library to parse angular expressions (such as "for .. in .. track by ..").

It then generates "viewtest" files, combining code from views and controllers, which then get type checked by the compiler at the same time as normal typescript files. It also allows the user to specify custom angular directives & filters to have them also type-checked.

Obviously it does not support everything possible with angular1, by far, as the scope is huge, but we use it on a real-size project at work, and tested it on another real-size one too.

You can find the project there:
https://github.com/emmanueltouzery/ng-typeview