TypeScript: Modern JavaScript Development

Table of Contents

TypeScript: Modern JavaScript Development

TypeScript: Modern JavaScript Development

Credits

Preface

What this learning path covers

What you need for this learning path

Who this learning path is for

Reader feedback

Customer support

Downloading the example code

Errata

Piracy

Questions

1. Module 1

1. Introducing TypeScript

The TypeScript architecture

Design goals

TypeScript components

TypeScript language features

Types

Optional static type notation

Variables, basic types, and operators

Var, let, and const

Union types

Type guards

Type aliases

Ambient declarations

Arithmetic operators

Comparison operators

Logical operators

Bitwise operators

Assignment operators

Flow control statements

The single-selection structure (if)

The double-selection structure (if…else)

The inline ternary operator (?)

The multiple-selection structure (switch)

The expression is tested at the top of the loop (while)

The expression is tested at the bottom of the loop (do…while)

Iterate on each object's properties (for…in)

Counter controlled repetition (for)

Functions

Classes

Interfaces

Namespaces

Putting everything together

Summary

2. Automating Your Development Workflow

A modern development workflow

Prerequisites

Node.js

Atom

Git and GitHub

Source control tools

Package management tools

npm

Bower

tsd

Task runners

Checking the quality of the TypeScript code

Compiling the TypeScript code

Optimizing a TypeScript application

Managing the Gulp tasks' execution order

Test runners

Synchronized cross-device testing

Continuous Integration tools

Scaffolding tools

Summary

3. Working with Functions

Working with functions in TypeScript

Function declarations and function expressions

Function types

Functions with optional parameters

Functions with default parameters

Functions with rest parameters

Function overloading

Specialized overloading signatures

Function scope

Immediately invoked functions

Generics

Tag functions and tagged templates

Asynchronous programming in TypeScript

Callbacks and higher-order functions

Arrow functions

Callback hell

Promises

Generators

Asynchronous functions – async and await

Summary

4. Object-Oriented Programming with TypeScript

SOLID principles

Classes

Interfaces

Association, aggregation, and composition

Association

Aggregation

Composition

Inheritance

Mixins

Generic classes

Generic constraints

Multiple types in generic type constraints

The new operator in generic types

Applying the SOLID principles

The Liskov substitution principle

The interface segregation principle

The dependency inversion principle

Namespaces

Modules

ES6 modules – runtime and design time

External modules – design time only

AMD modules – runtime only

CommonJS modules – runtime only

UMD modules – runtime only

SystemJS modules – runtime only

Circular dependencies

Summary

5. Runtime

The environment

The runtime

Frames

Stack

Queue

Heap

The event loop

The this operator

The this operator in the global context

The this operator in a function context

The call, apply, and bind methods

Prototypes

Instance properties versus class properties

Prototypal inheritance

The prototype chain

Accessing the prototype of an object

The new operator

Closures

Static variables with closures

Private members with closures

Summary

6. Application Performance

Prerequisites

Performance and resources

Performance metrics

Availability

The response time

Processing speed

Latency

Bandwidth

Scalability

Performance analysis

Network performance analysis

Network performance and user experience

Network performance best practices and rules

GPU performance analysis

Frames per second (FPS)

CPU performance analysis

Memory performance analysis

The garbage collector

Performance automation

Performance optimization automation

Performance monitoring automation

Performance testing automation

Exception handling

The Error class

The try…catch statements and throw statements

Summary

7. Application Testing

Software testing glossary

Assertions

Specs

Test cases

Suites

Spies

Dummies

Stubs

Mocks

Test coverage

Prerequisites

Gulp

Karma

Istanbul

Mocha

Chai

Sinon.JS

Type definitions

PhantomJS

Selenium and Nightwatch.js

Testing planning and methodologies

Test-driven development

Behavior-driven development (BDD)

Tests plans and test types

Setting up a test infrastructure

Building the application with Gulp

Running the unit test with Karma

Running E2E tests with Selenium and Nightwatch.js

Creating test assertions, specs, and suites with Mocha and Chai

Testing the asynchronous code

Asserting exceptions

TDD versus BDD with Mocha and Chai

Test spies and stubs with Sinon.JS

Spies

Stubs

Creating end-to-end tests with Nightwatch.js

Generating test coverage reports

Summary

8. Decorators

Prerequisites

Annotations and decorators

The class decorators

The method decorators

The property decorators

The parameter decorators

The decorator factory

Decorators with arguments

The reflection metadata API

Summary

9. Application Architecture

The single-page application architecture

The MV* architecture

Common components and features in the MV* frameworks

Models

Collections

Item views

Collection views

Controllers

Events

Router and hash (#) navigation

Mediator

Dispatcher

Client-side rendering and Virtual DOM

User interface data binding

One-way data binding

Two-way data binding

Data flow

Web components and shadow DOM

Choosing an application framework

Writing an MVC framework from scratch

Prerequisites

Application events

Mediator

Application

Route

Event emitter

Router

Dispatcher

Controller

Model and model settings

View and view settings

Framework

Summary

10. Putting Everything Together

Prerequisites

The application's requirements

The application's data

The application's architecture

The application's file structure

Configuring the automated build

The application's layout

Implementing the root component

Implementing the market controller

Implementing the NASDAQ model

Implementing the NYSE model

Implementing the market view

Implementing the market template

Implementing the symbol controller

Implementing the quote model

Implementing the symbol view

Implementing the chart model

Implementing the chart view

Testing the application

Preparing the application for a production release

Summary

2. Module 2

1. Tools and Frameworks

Installing the prerequisites

Installing Node.js

Installing TypeScript compiler

Choosing a handy editor

Visual Studio Code

Configuring Visual Studio Code

Opening a folder as a workspace

Configuring a minimum build task

Sublime Text with TypeScript plugin

Installing Package Control

Installing the TypeScript plugin

Other editor or IDE options

Atom with the TypeScript plugin

Visual Studio

WebStorm

Getting your hands on the workflow

Configuring a TypeScript project

Introduction to tsconfig.json

Compiler options

target

module

declaration

sourceMap

jsx

noEmitOnError

noEmitHelpers

noImplicitAny

experimentalDecorators*

emitDecoratorMetadata*

outDir

outFile

rootDir

preserveConstEnums

strictNullChecks

stripInternal*

isolatedModules

Adding source map support

Downloading declarations using typings

Installing typings

Downloading declaration files

Option save

Testing with Mocha and Istanbul

Mocha and Chai

Writing tests in JavaScript

Writing tests in TypeScript

Getting coverage information with Istanbul

Testing in real browsers with Karma

Creating a browser project

Installing Karma

Configuring and starting Karma

Integrating commands with npm

Why not other fancy build tools?

Summary

2. The Challenge of Increasing Complexity

Implementing the basics

Creating the code base

Defining the initial structure of the data to be synchronized

Getting data by comparing timestamps

Two-way synchronizing

Things that went wrong while implementing the basics

Passing a data store from the server to the client does not make sense

Making the relationships clear

Growing features

Synchronizing multiple items

Simply replacing data type with an array

Server-centered synchronization

Synchronizing from the server to the client

Synchronizing from client to server

Synchronizing multiple types of data

Supporting multiple clients with incremental data

Updating the client side

Updating server side

Supporting more conflict merging

New data structures

Updating client side

Updating the server side

Things that go wrong while implementing everything

Piling up similar yet parallel processes

Data stores that are tremendously simplified

Getting things right

Finding abstraction

Implementing strategies

Wrapping stores

Summary

3. Creational Design Patterns

Factory method

Participants

Pattern scope

Implementation

Consequences

Abstract Factory

Participants

Pattern scope

Implementation

Consequences

Builder

Participants

Pattern scope

Implementation

Consequences

Prototype

Singleton

Basic implementations

Conditional singletons

Summary

4. Structural Design Patterns

Composite Pattern

Participants

Pattern scope

Implementation

Consequences

Decorator Pattern

Participants

Pattern scope

Implementation

Classical decorators

Decorators with ES-next syntax

Consequences

Adapter Pattern

Participants

Pattern scope

Implementation

Consequences

Bridge Pattern

Participants

Pattern scope

Implementation

Consequences

Façade Pattern

Participants

Pattern scope

Implementation

Consequences

Flyweight Pattern

Participants

Pattern scope

Implementation

Consequences

Proxy Pattern

Participants

Pattern scope

Implementation

Consequences

Summary

5. Behavioral Design Patterns

Chain of Responsibility Pattern

Participants

Pattern scope

Implementation

Consequences

Command Pattern

Participants

Pattern scope

Implementation

Consequences

Memento Pattern

Participants

Pattern scope

Implementation

Consequences

Iterator Pattern

Participants

Pattern scope

Implementation

Simple array iterator

ES6 iterator

Consequences

Mediator Pattern

Participants

Pattern scope

Implementation

Consequences

Summary

6. Behavioral Design Patterns: Continuous

Strategy Pattern

Participants

Pattern scope

Implementation

Consequences

State Pattern

Participants

Pattern scope

Implementation

Consequences

Template Method Pattern

Participants

Pattern scope

Implementation

Consequences

Observer Pattern

Participants

Pattern scope

Implementation

Consequences

Visitor Pattern

Participants

Pattern scope

Implementation

Consequences

Summary

7. Patterns and Architectures in JavaScript and TypeScript

Promise-based web architecture

Promisifying existing modules or libraries

Views and controllers in Express

Abstraction of responses

Abstraction of permissions

Expected errors

Defining and throwing expected errors

Transforming errors

Modularizing project

Asynchronous patterns

Writing predictable code

Asynchronous creational patterns

Asynchronous middleware and hooks

Event-based stream parser

Summary

8. SOLID Principles

Single responsibility principle

Example

Choosing an axis

Open-closed principle

Example

Abstraction in JavaScript and TypeScript

Refactor earlier

Liskov substitution principle

Example

The constraints of substitution

Interface segregation principle

Example

Proper granularity

Dependency inversion principle

Example

Separating layers

Summary

9. The Road to Enterprise Application

Creating an application

Decision between SPA and normal web applications

Taking team collaboration into consideration

Building and testing projects

Static assets packaging with webpack

Introduction to webpack

Bundling JavaScript

Loading TypeScript

Splitting code

Loading other static assets

Adding TSLint to projects

Integrating webpack and tslint command with npm scripts

Version control

Git flow

Main branches

Supporting branches

Feature branches

Release branches

Hotfix branches

Summary of Git flow

Pull request based code review

Configuring branch permissions

Comments and modifications before merge

Testing before commits

Git hooks

Adding pre-commit hook automatically

Continuous integration

Connecting GitHub repository with Travis-CI

Deployment automation

Passive deployment based on Git server side hooks

Proactive deployment based on timers or notifications

Summary

3. Module 3

1. TypeScript 2.0 Fundamentals

What is TypeScript?

Quick example

Transpiling

Type checking

Learning modern JavaScript

let and const

Classes

Arrow functions

Function arguments

Array spread

Destructuring

Template strings

New classes

Type checking

Primitive types

Defining types

Undefined and null

Type annotations

Summary

2. A Weather Forecast Widget with Angular 2

Using modules

Setting up the project

Directory structure

Configuring TypeScript

Building the system

The HTML file

Creating the first component

The template

Testing

Interactions

One-way variable binding

Event listeners

Adding conditions to the template

Directives

The template tag

Modifying the about template

Using the component in other components

Showing a forecast

Using the API

Typing the API

Creating the forecast component

Templates

Downloading the forecast

Adding @Output

The main component

Using our other components

Two-way bindings

Listening to our event

Geolocation API