{"id":2142,"date":"2015-01-30T13:15:12","date_gmt":"2015-01-30T11:15:12","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=2142"},"modified":"2015-01-26T16:06:32","modified_gmt":"2015-01-26T14:06:32","slug":"revisiting-angularjs-with-typescript","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/revisiting-angularjs-with-typescript\/","title":{"rendered":"Revisiting AngularJS with TypeScript"},"content":{"rendered":"<p>Many of my recent blog posts and presentations have focused on pure JavaScript. I believe <a href=\"http:\/\/www.typescriptlang.org\/\" target=\"_blank\">TypeScript<\/a> is an incredibly useful tool, especially when developing heavy client apps with large teams. I don\u2019t use it in most examples so they stay relevant to developers who haven\u2019t adopted it. TypeScript is a strong asset for AngularJS apps. I was recently asked about my Angular app structure using TypeScript, so I developed a small example.<\/p>\n<p>In my recent talk about <a href=\"http:\/\/www.slideshare.net\/jeremylikness\/advanced-angularjs-tips-and-tricks\" target=\"_blank\">Advanced AngularJS Tips and Tricks<\/a>, I provided a fairly <a href=\"http:\/\/jeremylikness.github.io\/AngularTipsAndTricks\/01-controller-as.html\" target=\"_blank\">interactive example<\/a> using a list of pictures with a selection. The purpose was to demonstrate the <em>controller as<\/em> syntax and show that you can accomplish what is needed without depending on explicit watchers. You can <a href=\"https:\/\/github.com\/JeremyLikness\/AngularTipsAndTricks\" target=\"_blank\">browse the source<\/a>; the controllers, etc. are underneath the \u201c01\u201d subfolders.<\/p>\n<p>The first step to developing apps in TypeScript is to pick up any related definition files. I use a repository called <a href=\"https:\/\/github.com\/borisyankov\/DefinitelyTyped\" target=\"_blank\">definitely typed<\/a>. There are definitions for most of the common libraries, including Angular. What\u2019s more, you can also install it in your Visual Studio projects using <a href=\"http:\/\/www.nuget.org\/packages?q=definitely+typed\" target=\"_blank\">NuGet<\/a>.<\/p>\n<p>After I have the type definitions in my project, I define an application module. The module encapsulates the functionality and avoids naming collisions. I should give you the caveat that the Google best practices dictate you should always reference your modules by calling angular.module with the module name (after you\u2019ve defined the module by passing in dependencies), rather than trying to capture a global reference. Personally I don\u2019t have an issue retaining the reference when I am already creating a module scope for the app, so I choose to use it.<\/p>\n<pre class=\"brush: php; title: ; notranslate\" title=\"\">\r\ndeclare var angular: ng.IAngularStatic;\r\n \r\nmodule Application {\r\n    &quot;use strict&quot;;\r\n \r\n    export var angularApp: ng.IModule =\r\n        angular.module(&quot;angularApp&quot;, &#x5B;&quot;ngAnimate&quot;]);\r\n}\r\n<\/pre>\n<p>The code takes advantage of the definitely typed library to define the angular static type. This gives me IntelliSense\/auto-completion and development-time checking of the functional calls I\u2019ll be making. The only real code generated is the scoped reference to the current module contained in the angularApp variable. The generated code looks like this:<\/p>\n<pre class=\"brush: php; title: ; notranslate\" title=\"\">\r\nvar Application;\r\n(function (Application) {\r\n    &quot;use strict&quot;;\r\n \r\n    Application.angularApp = angular.module(\r\n        &quot;angularApp&quot;, &#x5B;&quot;ngAnimate&quot;]);\r\n})(Application || (Application = {}));\r\n<\/pre>\n<p>The next logical component to define is the data. For the data I do two things. First, I export an interface to make it easier to deal with the later elsewhere in the app. This will provide discovery and development-time type checking. Second, I create a function to encapsulate the definition before I pass it to Angular. This closure prevents the data from \u201cleaking\u201d to the rest of the app (and potentially colliding or further dirtying the logical namespaces), so after the call the only way to reference it is through the Angular dependency. I truncated the list for the sake of display:<\/p>\n<pre class=\"brush: php; title: ; notranslate\" title=\"\">\r\nmodule Application {\r\n \r\n    &quot;use strict&quot;;\r\n \r\n    export interface ISunsetData {\r\n        image: string;\r\n        location: string;\r\n        title: string;\r\n    }\r\n \r\n    function initData(): void {\r\n        var data: ISunsetData&#x5B;] = &#x5B;\r\n            {\r\n                image: &quot;backyard.jpg&quot;,\r\n                location: &quot;Woodstock, GA&quot;,\r\n                title: &quot;Sunset in Woods&quot;\r\n            }\r\n        ];\r\n        angularApp.value(&quot;sunsets&quot;, data);\r\n    };\r\n\r\n \r\n    initData();\r\n}\r\n<\/pre>\n<p>After the data is defined, I wrap it in a service. The service exposes a filter that controllers can use, and provides a \u201cselected item\u201d used to render the full size picture. Notice that in TypeScript I can expose a contract for the service without exposing the service itself. The class for the service is not exported, so it is only available for registration with Angular. When I reference it, I use the interface.<\/p>\n<pre class=\"brush: php; title: ; notranslate\" title=\"\">\r\nmodule Application {\r\n \r\n    &quot;use strict&quot;;\r\n \r\n    export interface ISunsetService {\r\n        sunsets: ISunsetData&#x5B;];\r\n        selected: ISunsetData;\r\n        filter: string;\r\n        select: (sunset: ISunsetData) =&gt; void;\r\n    }\r\n \r\n    class SunsetService implements ISunsetService {\r\n        constructor(\r\n            public sunsets: ISunsetData&#x5B;],\r\n            public $log: ng.ILogService) {\r\n\r\n            $log.log(&quot;Sunsets service created.&quot;);\r\n        }\r\n \r\n        public selected: ISunsetData;\r\n \r\n        public filter: string;\r\n \r\n        public select(sunset: ISunsetData): void {\r\n            this.$log.log(&quot;Selected sunset &quot;\r\n                + sunset.title);\r\n            this.selected = sunset;\r\n        }\r\n \r\n    }\r\n \r\n    angularApp.service(&quot;sunsetSvc&quot;, &#x5B;\r\n        &quot;sunsets&quot;, &quot;$log&quot;, SunsetService]);\r\n} \r\n<\/pre>\n<p>In this example, I register the service using the variable I set up in the main app to reference the module. I also am using the registration-time version of dependency injection since I am registering the class the same time I define it. If I were using a system to define the class and then register it elsewhere, I\u2019d use the static $inject: string[] signature instead so the dependencies are easily discoverable.<\/p>\n<p>I don\u2019t have any need to expose the definition for the controller to the rest of the application, so I simply define the class without exporting it and register it with Angular. I use the exported contracts to bring properties into the constructor. Note how easy TypeScript makes it to define property getters and setters.<\/p>\n<pre class=\"brush: php; title: ; notranslate\" title=\"\">\r\nmodule Application {\r\n \r\n    &quot;use strict&quot;;\r\n \r\n    class SearchController {\r\n \r\n        private _filter:string;\r\n \r\n        constructor(\r\n            public $log: ng.ILogService,\r\n            public sunsetSvc: ISunsetService) {\r\n            this._filter = &quot;&quot;;\r\n            $log.log(&quot;Search controller created.&quot;);\r\n        }\r\n \r\n        public get filter(): string {\r\n            return this._filter;\r\n        }\r\n \r\n        public set filter(val: string) {\r\n            this.sunsetSvc.filter = val;\r\n            this._filter = val;\r\n        }\r\n \r\n    }\r\n \r\n    angularApp.controller(&quot;searchCtrl&quot;, &#x5B;&quot;$log&quot;, &quot;sunsetSvc&quot;, SearchController]);\r\n} \r\n<\/pre>\n<p>This is the generated JavaScript for the filter property:<\/p>\n<pre class=\"brush: php; title: ; notranslate\" title=\"\">\r\nObject.defineProperty(SearchController.prototype,\r\n    &quot;filter&quot;, {\r\n    get: function () {\r\n        return this._filter;\r\n    },\r\n    set: function (val) {\r\n        this.sunsetSvc.filter = val;\r\n        this._filter = val;\r\n    },\r\n    enumerable: true,\r\n    configurable: true\r\n});\r\n<\/pre>\n<p>The list controller is similar. You can view the full source for the converted TypeScript project at <a href=\"https:\/\/github.com\/JeremyLikness\/AngularTipsAndTricks\/tree\/master\/typescript\" target=\"_blank\">this link<\/a>. It is part of the original project, and only contains the TypeScript source files for simplicity.<\/p>\n<p>As you can see, TypeScript works very well with AngularJS. The definition files help with exploring the API and ensuring it is used correctly at development time. Interfaces help describe structure and it is easy to contain them within defined modules or scopes. Although all of this is possible with pure JavaScript, the TypeScript language not only makes it easier to define these patterns, but also implements them in a consistent way.<\/p>\n<p>Do you use TypeScript with AngularJS or are you considering it? If so, share your thoughts or questions in the comments below!<\/p>\n<div class=\"attribution\">\n<table>\n<tbody>\n<tr>\n<td><span class=\"reference\">Reference: <\/span><\/td>\n<td><a href=\"http:\/\/csharperimage.jeremylikness.com\/2014\/09\/revisiting-angularjs-with-typescript.html\">Revisiting AngularJS with TypeScript<\/a> from our <a href=\"http:\/\/www.webcodegeeks.com\/wcg\/\">WCG partner<\/a> Jeremy Likness at the <a href=\"http:\/\/csharperimage.jeremylikness.com\/\">C#er : IMage<\/a> blog.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Many of my recent blog posts and presentations have focused on pure JavaScript. I believe TypeScript is an incredibly useful tool, especially when developing heavy client apps with large teams. I don\u2019t use it in most examples so they stay relevant to developers who haven\u2019t adopted it. TypeScript is a strong asset for AngularJS apps. &hellip;<\/p>\n","protected":false},"author":40,"featured_media":909,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[25],"tags":[76],"class_list":["post-2142","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular-js","tag-typescript"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Revisiting AngularJS with TypeScript - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"Many of my recent blog posts and presentations have focused on pure JavaScript. I believe TypeScript is an incredibly useful tool, especially when\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/revisiting-angularjs-with-typescript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Revisiting AngularJS with TypeScript - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"Many of my recent blog posts and presentations have focused on pure JavaScript. I believe TypeScript is an incredibly useful tool, especially when\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/revisiting-angularjs-with-typescript\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:published_time\" content=\"2015-01-30T11:15:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Jeremy Likness\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/jeremylikness\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jeremy Likness\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/revisiting-angularjs-with-typescript\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/revisiting-angularjs-with-typescript\/\"},\"author\":{\"name\":\"Jeremy Likness\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/2cd31c082e3e1cc5f595ba18a6e03a43\"},\"headline\":\"Revisiting AngularJS with TypeScript\",\"datePublished\":\"2015-01-30T11:15:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/revisiting-angularjs-with-typescript\/\"},\"wordCount\":1057,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/revisiting-angularjs-with-typescript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg\",\"keywords\":[\"TypeScript\"],\"articleSection\":[\"Angular.js\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/revisiting-angularjs-with-typescript\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/revisiting-angularjs-with-typescript\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/revisiting-angularjs-with-typescript\/\",\"name\":\"Revisiting AngularJS with TypeScript - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/revisiting-angularjs-with-typescript\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/revisiting-angularjs-with-typescript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg\",\"datePublished\":\"2015-01-30T11:15:12+00:00\",\"description\":\"Many of my recent blog posts and presentations have focused on pure JavaScript. I believe TypeScript is an incredibly useful tool, especially when\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/revisiting-angularjs-with-typescript\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/revisiting-angularjs-with-typescript\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/revisiting-angularjs-with-typescript\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/revisiting-angularjs-with-typescript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Angular.js\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/angular-js\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Revisiting AngularJS with TypeScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/2cd31c082e3e1cc5f595ba18a6e03a43\",\"name\":\"Jeremy Likness\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b4d8ee78925818e3f7a4d0d82df06d34a2b76aa4d260a1f4b67dc0553efbf1b6?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b4d8ee78925818e3f7a4d0d82df06d34a2b76aa4d260a1f4b67dc0553efbf1b6?s=96&d=mm&r=g\",\"caption\":\"Jeremy Likness\"},\"description\":\"Jeremy Likness is a principal architect at iVision, Inc. He has been building enterprise applications using the Microsoft stack for 20 years with a focus on web-based solutions for the past 15. A prolific author and speaker, Jeremy's mission is to empower developers to create success in their careers through learning and growth.\",\"sameAs\":[\"http:\/\/csharperimage.jeremylikness.com\/\",\"http:\/\/linkedin.com\/in\/jeremylikness\",\"https:\/\/x.com\/https:\/\/twitter.com\/jeremylikness\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/jeremy-likness\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Revisiting AngularJS with TypeScript - Web Code Geeks - 2026","description":"Many of my recent blog posts and presentations have focused on pure JavaScript. I believe TypeScript is an incredibly useful tool, especially when","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/revisiting-angularjs-with-typescript\/","og_locale":"en_US","og_type":"article","og_title":"Revisiting AngularJS with TypeScript - Web Code Geeks - 2026","og_description":"Many of my recent blog posts and presentations have focused on pure JavaScript. I believe TypeScript is an incredibly useful tool, especially when","og_url":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/revisiting-angularjs-with-typescript\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_published_time":"2015-01-30T11:15:12+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg","type":"image\/jpeg"}],"author":"Jeremy Likness","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/jeremylikness","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Jeremy Likness","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/revisiting-angularjs-with-typescript\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/revisiting-angularjs-with-typescript\/"},"author":{"name":"Jeremy Likness","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/2cd31c082e3e1cc5f595ba18a6e03a43"},"headline":"Revisiting AngularJS with TypeScript","datePublished":"2015-01-30T11:15:12+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/revisiting-angularjs-with-typescript\/"},"wordCount":1057,"commentCount":1,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/revisiting-angularjs-with-typescript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg","keywords":["TypeScript"],"articleSection":["Angular.js"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/revisiting-angularjs-with-typescript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/revisiting-angularjs-with-typescript\/","url":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/revisiting-angularjs-with-typescript\/","name":"Revisiting AngularJS with TypeScript - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/revisiting-angularjs-with-typescript\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/revisiting-angularjs-with-typescript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg","datePublished":"2015-01-30T11:15:12+00:00","description":"Many of my recent blog posts and presentations have focused on pure JavaScript. I believe TypeScript is an incredibly useful tool, especially when","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/revisiting-angularjs-with-typescript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/revisiting-angularjs-with-typescript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/revisiting-angularjs-with-typescript\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/revisiting-angularjs-with-typescript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/"},{"@type":"ListItem","position":3,"name":"Angular.js","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/angular-js\/"},{"@type":"ListItem","position":4,"name":"Revisiting AngularJS with TypeScript"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/2cd31c082e3e1cc5f595ba18a6e03a43","name":"Jeremy Likness","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b4d8ee78925818e3f7a4d0d82df06d34a2b76aa4d260a1f4b67dc0553efbf1b6?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b4d8ee78925818e3f7a4d0d82df06d34a2b76aa4d260a1f4b67dc0553efbf1b6?s=96&d=mm&r=g","caption":"Jeremy Likness"},"description":"Jeremy Likness is a principal architect at iVision, Inc. He has been building enterprise applications using the Microsoft stack for 20 years with a focus on web-based solutions for the past 15. A prolific author and speaker, Jeremy's mission is to empower developers to create success in their careers through learning and growth.","sameAs":["http:\/\/csharperimage.jeremylikness.com\/","http:\/\/linkedin.com\/in\/jeremylikness","https:\/\/x.com\/https:\/\/twitter.com\/jeremylikness"],"url":"https:\/\/www.webcodegeeks.com\/author\/jeremy-likness\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/2142","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/40"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=2142"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/2142\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/909"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=2142"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=2142"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=2142"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}