[Idea] angular 1 template type checking with TypeScript

Wouldn’t it be super useful if we could do type checking on template code in angular 1?

Quick research shows I’m not the only one having that thought: https://github.com/Microsoft/TypeScript/issues/5151 https://github.com/Microsoft/TypeScript/issues/369 https://github.com/thorn0/babel-plugin-transform-ng1-jsx

I’m bringing this here because this project plans to have or already has a template parser and is having the @Input() and @Output() decorators which define the API of a component.

So right now I’m just having this initial thought and would like to discuss it with the community. If there are already other projects that are better suited as a “starting point” for this than please share them here.

[reppners]

Just as a heads up: I’m working on this in my spare time. Got template-to-code transpiler basically working but did rely on TSLint as a kind of “runner” for it. This won’t work in the long run because of its “single-file-scope” but was enough to get going and do experiments.

Also there are lots of special-cases down the road that need to be solved but I will publish what I have on github as soon as it can be applied to a project with the complexity level of a TODO-app 😉

EDIT: After refactoring a codebase of >150 components I wish it would be already working!

[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