Can AngularJS templates use TypeScript for type-safety?

Question

Assuming an Angular 1.6 app using best practices (components/bind-to-controller where possible), can we harness the power of TypeScript in templates?

For example if we have some template code

<div>{{$ctrl.children[0].name}}</div>

& we know the type of the controller ($ctrl) - can we have TypeScript give us an error if

'children' does not exist on $ctrl
'children' is not an array
the items in 'children' do not have a property 'name' (etc)?

Code completion in VS Code would be nice too.

I've seen the issues below:

However it's difficult to conclude from that where things are at (especially in the AngularJS 1.x world).

If it's relevant, Webpack (2) is being used to manage bundling. — eddiewould
– eddiewould, Commented Jan 31, 2018 at 11:20
angular 2 has something like this when compiling ahead of time. for angularjs though the templates are not being compiled at buildtime so they never get to pass trough such a check. — toskv
– toskv, Commented Jan 31, 2018 at 11:56
@toskv - I'm asking whether there is a way to compile/check AngularJS templates at build time. — eddiewould
– eddiewould, Commented Jan 31, 2018 at 11:58
I got that. And the answer is no because angularjs templates are not compiled. they only get interpreted at runtime. — toskv
– toskv, Commented Jan 31, 2018 at 11:59

toskv · Accepted Answer · 2018-01-31 14:37:18Z

1

No.

AngularJs templates are interpreted at runtime, there is no compilation step for them where this check could happen.

answered Jan 31, 2018 at 14:37

toskv

31.8k7 gold badges77 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

eddiewould Over a year ago

Wondering if there might be external tooling or a compiler extension point (e.g. VS Code plugin) that parses & validates the templates (I think it's clear that this functionality isn't built into the TS compiler - it doesn't belong there). Will leave the question open for a bit longer and if no further answers will accept yours :)

eddiewould · Accepted Answer · 2018-08-04 12:44:59Z

1

As an alternative you could start writing Angular 2 components and then downgrade them to AngularJS using @angular/upgrade/static::downgradeComponent downgradeComponent

answered Aug 4, 2018 at 12:44

eddiewould

1,65320 silver badges41 bronze badges

Collectives™ on Stack Overflow

Can AngularJS templates use TypeScript for type-safety?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related