TypeScript 2.x By Example

By : Sachin Ohri

Buy this Book

TypeScript 2.x By Example

By: Sachin Ohri

Buy this Book

Overview of this book

The TypeScript language, compiler, and open source development toolset brings JavaScript development up to the enterprise level. It allows you to use ES5, ES6, and ES7 JavaScript language features today, including classes, interfaces, generics, modules, and more. Its simple typing syntax enables building large, robust applications using object-oriented techniques and industry-standard design principles. This book aims at teaching you how to get up and running with TypeScript development in the most practical way possible. Taking you through two exciting projects built from scratch, you will learn the basics of TypeScript, before progressing to functions, generics, promises, and callbacks. Then, you’ll get to implement object-oriented programming as well as optimize your applications with effective memory management. You’ll also learn to test and secure your applications, before deploying them. Starting with a basic SPA built using Angular, you will progress on to building, maybe, a Chat application or a cool application. You’ll also learn how to use NativeScript to build a cool mobile application. Each of these applications with be explained in detail, allowing you to grasp the concepts fast. By the end of this book, you will have not only built two amazing projects but you will also have the skills necessary to take your development to the next level.

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Free Chapter

Our First Application – Sports News Combinator

Sports News Combinator (SNC)

Type System

Classes in TypeScript

SNC – 101

Creating our model

First component – NewsComponent

Summary

Sports News Combinator – Adding Features

Functions

Classes in TypeScript

Interfaces

Adding features to SNC

Summary

Sports News Combinator – the Final Version

Decorators

Additional features in SNC

Final product

Summary

Application 2 – Trello

An introduction to the sample Trello application

TypeScript namespace and modules

TypeScript Generics

Sample Trello application

The Trello homepage

Trello – the board component

Summary

Trello - Adding Features

Iterators

Asynchronous programming using TypeScript

Adding features to Sample Trello app

Functional implementation

Data formatting in Angular

Understanding dependency injection in Angular

Summary

Testing the Trello Application

Fundamentals

Tools for testing

Folder and file structure for the test project

Writing test for pipes

Executing the test cases

Writing test cases for the services class

Writing test cases for isolated component

Writing the test cases for integrated components

Summary

Trello - Using Angular CLI

Introducing Angular CLI

Generating an application with Angular CLI

Generating files for the application

Building an Angular app

Serving an Angular app

Linting an Angular application

Code coverage using Angular CLI

Summary

Trello Mobile – Using NativeScript

What is NativeScript?

Setting up your NativeScript environment

Developing the Sample Trello application using NativeScript

Developing the Homepage component

The application so far

Developing the Board component

NativeScript UI elements

Summary

Deploying Sample Trello on the Cloud Using Microsoft Azure

Azure Cloud as a deployment platform

Deploying Sample Trello using a web app service – FTP

Deploying Sample Trello using a web app service – GitHub

Summary

Getting Started with TypeScript

The current state of JavaScript

The not-so-good parts of JavaScript

TypeScript to the rescue

Alternatives to TypeScript

TypeScript features

Installation and setup

TypeScript compiler

TypeScript to-do list application

Playground

Summary

Customer Reviews

5 star

4 star

3 star

2 star

1 star

Additional features in SNC

Now it's time to start working on the final phase of our application, Sports News Combinator. So far, we have created one main component, NewsComponent, which shows the latest sports news, and a couple of core components, namely, HeaderComponent and FooterComponent, which provide us with the standard header and footer for our application.

NewsComponent currently fetches the data that is hardcoded in the application and binds that data to the user interface. The following diagram shows the application architecture that we have been developing so far:

We have created our index.html file that has a reference to our only module, the App module. All our components are part of this App module. The primary component we have is App Component, which is basically made of a combination of other components such as NewsComponent, HeaderComponent, and FooterComponent...