Typescript on programming mentor

Typescript on programming mentor https://programmingmentor.com/tags/typescript/ Recent content in Typescript on programming mentor Hugo -- gohugo.io en-us Tue, 25 Jul 2017 10:54:24 +0200 Intro to Angular 4 Forms: Template-Driven vs. Reactive https://programmingmentor.com/post/angular-forms/ Tue, 25 Jul 2017 10:54:24 +0200 https://programmingmentor.com/post/angular-forms/ Prerequisuites Install Node.js. Install angular-cli: npm i -g @angular/cli Generate project: ng new angular-forms Regular HTML form This is how regular html form looks like: <form> <label>Name <input type="text" placeholder="Name" name="name"> </label> <input type="submit"> </form> We will create same form with Angular using two approaches: template-driven - form including validations is described in HTML template and Angular generates data model from it automatically or allows to bind it to existing model reactive - form model is described in TypeScript source code and it need to be bound to HTML-form Template-driven form We start with Angular template-driven form: TypeScript 2 WorkShop https://programmingmentor.com/post/typescript-workshop/ Wed, 12 Jul 2017 10:54:24 +0200 https://programmingmentor.com/post/typescript-workshop/ Intro Welcome to the practice-first WorkShop on TypeScript programming language. For the convenience WorkShop has been split on several steps that should be completed one after another. Also each folder has files that are produced as result of completing instruction for the step. Source code and instructions for each step located on GitHub: https://github.com/programmingmentor/typescript-workshop If you want to skip some steps, use source files from previous step. List of steps Step 01 - Prepare environment. TypeScript 2 WorkShop - Step 1: Prepare environment. Create 'Hello World'. Basic configuration and debugging https://programmingmentor.com/post/typescript-workshop-01/ Wed, 12 Jul 2017 10:54:23 +0200 https://programmingmentor.com/post/typescript-workshop-01/ Intro This is practice-first introduction into TypeScript 2.4 language brought to you by programming mentor. Each step continues on files created as result of previous step. Step 01 - Prepare environment. Create ‘Hello World’. Basic configuration and debugging I. Install prerequisites 1. Install Node.js Navigate to nodejs.org, download and install latest version of Node.JS 2. Install Visual Studio Code Navigate to code.visualstudio.com, download and install latest version of Visual Studio Code TypeScript 2 WorkShop - Step 2: Basic Types and OOP https://programmingmentor.com/post/typescript-workshop-02/ Wed, 12 Jul 2017 10:54:22 +0200 https://programmingmentor.com/post/typescript-workshop-02/ I. Prepare index.html For this step we will create ToDo list application, here is the code for index.html file: index.html: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>TypeScript ToDo</title> </head> <body> <h1>Ultimate ToDo List</h1> <h2>Tasks:</h2> <ul id="task-list"></ul> <h3>New task:</h3> <form> <label for="task-priority">Priority:</label> <input type="text" id="task-priority"> <label for="task-title">Title:</label> <input type="text" id="task-title"> <button id="btn-add">Add</button> </form> <script src="index.js"></script> </body> </html> II. Create index.ts Let’s create code on in index.ts to handle adding tasks to the list and showing them: TypeScript 2 WorkShop - Step 3: Using Type Definitions https://programmingmentor.com/post/typescript-workshop-03/ Wed, 12 Jul 2017 10:54:20 +0200 https://programmingmentor.com/post/typescript-workshop-03/ Let’s add jQuery to our project to see how we can use type definitions. I. Add jQuery to HTML We will use jQuery CDN to Add this line to index.html just before link to index.js: from index.html: ... <script src="http://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> ... II. Refactor code Let’s refactor our code to use jQuery: index.ts: class Task { private priority: number; private title: string; constructor(priority: number, title: string) { this.priority = priority; this. TypeScript 2 WorkShop - Step 4: Creating Decorator https://programmingmentor.com/post/typescript-workshop-04/ Wed, 12 Jul 2017 10:54:19 +0200 https://programmingmentor.com/post/typescript-workshop-04/ I. Preparation At this step we will add decorators to our project From TypeScript documentation: A Decorator is a special kind of declaration that can be attached to a class declaration, method, accessor, property, or parameter. Decorators use the form @expression, where expression must evaluate to a function that will be called at runtime with information about the decorated declaration. Also please note: Decorators are an experimental feature that may change in future releases. TypeScript 2 WorkShop - Step 5: Splitting Code into Modules https://programmingmentor.com/post/typescript-workshop-05/ Wed, 12 Jul 2017 10:54:18 +0200 https://programmingmentor.com/post/typescript-workshop-05/ At this step we will continue refactoring our application, we will use TypeScript modules to organise our project and make it maintainable. One important note about terminology from official TypeScript documentation: > It’s important to note that in TypeScript 1.5, the nomenclature has changed. “Internal modules” are now “namespaces”. “External modules” are now simply “modules”, as to align with ECMAScript 2015’s terminology, (namely that module X { is equivalent to the now-preferred namespace X {).