Using TypeScript in your AngularJS Controllers - Some getting started tips

So at FireBootCampwe are using Typescript and I have to say its a little early to say I love it but everyone I respect form experience eon large projects like the Monaco and TFS use it! Here are some tips and code highlights of how we ended up implementing our controllers with Typescript

For more information on the typescript controllers we made the following changes to improve the typescript implementation:

1. Removed $scope out of the forms and controllers. 2. Removed the interface for ng.Iscope, to make less duplicated code 3. Used $inject for minificationsafety so we did not have duplicate declaration of injected modules at the bottom and also now we can add the changes easily to both as they are right next to the class declaration.
/// /// /// interface ILoginController { user: LoginModel; login(): void; schema: Array; } class LoginModel { username: string = ""; password: string = ""; rememberMe: boolean = false; } class loginController implements ILoginController { public static controllerId: string = "LoginController"; log: Function; logError: Function; logSuccess: Function; title: string = "Login"; message: string; loginForm: any; public static $inject = ["common", "security"]; constructor(private common: any, private security: any) { var getLogFn = common.logger.getLogFn; this.log = getLogFn(loginController.controllerId); this.logError = getLogFn(loginController.controllerId, 'error'); this.logSuccess = getLogFn(loginController.controllerId, 'success'); this.activate([]); } private activate(promises: Array>) { this.common.activateController(['/')], loginController.controllerId) .then(() => { this.log("Activated Login View"); }); } user = new LoginModel(); login = () => { if (!this.loginForm.$valid) return; this.message = "Processing Login..."; .then((data) => {; this.logSuccess("Successfully logged in"); }, (data) => { var msg = data.error_description; this.logError(msg); }); this.message = null; }; //autofields.js to make login form schema = [ { label: '', placeholder: 'Email', property: 'username', type: 'email', attr: { required: true }, msgs: { required: '' } }, { label: '', property: 'password', type: 'password', attr: { required: true, ngPattern: "/(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z])(?=.*[0-9])/", ngMinlength: 6 }, msgs: { required: '' } }, { property: 'rememberMe', label: 'Keep me logged in', type: 'checkbox' } ]; }, [loginController=> new loginController()]); 
**Hers is the before**
**Here is the after**
Love to hear any thought below on how to do this better? 
Tweet Post Share Update Email RSS

Hi, I'm Duncan Hunter, I write this blog, work for SSW as a Software Architect in Australia, create courses for Pluralsight, travel the world speaking at events and training technology professionals.