TypeScript 2.x By Example电子书

Copyright

TypeScript 2.x By Example

Credits

About the Author

Acknowledgments

About the Reviewer

www.PacktPub.com

Why subscribe?

Customer Feedback

Dedication

Title Page

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Downloading the example code

Errata

Piracy

Questions

Our First Application – Sports News Combinator

Sports News Combinator (SNC)

Downloading the code

The feature set of SNC

Type System

Variables

The var keyword

Let and const keywords

Types in TypeScript

Type annotation

Primitive types

Number

String

Boolean

Arrays

Tuples

Any

Void

Null and undefined

Union types

Type inference

Type checking

Classes in TypeScript

Object-oriented programming in TypeScript

Understanding classes

Access modifiers

Public

Private

Protected

Readonly

Transpiled JavaScript from classes

ES6 JavaScript

ES5 JavaScript

SNC – 101

Angular – the superhero framework

SPAs

Angular – the concepts

Angular – the architecture

SNC – the architecture

SNC – code setup

Angular CLI setup

Application setup

SNC – folder structure

Creating our model

First component – NewsComponent

Template

Component class

Metadata of the component

Import

newsComponent

newsComponent business logic

newsComponent template logic

SNC – running the code

Summary

Sports News Combinator – Adding Features

Functions

Types in functions

Arrow functions

The this keyword in arrow functions

Optional and default parameters

Rest parameters

Function overloads

Classes in TypeScript

Class definition

Constructors

Constructor parameters

Properties and methods

Properties

Accessors

Methods

Static properties

Inheritance

Super

Abstract class

Interfaces

Definition

Duck typing

Extending interfaces

Implementing interfaces

Adding features to SNC

Restructuring the models

Adding interface to the Article class

Modifying the news model

Core components

The header component

The component file

The HTML file

The footer component

The app component

Templates and interpolation

Templates

Directives

The Angular loading process for directives

Angular built-in directives

The *ngIf directive

The *ngFor directive

Bindings

Interpolation

Property binding

Two-way binding

Summary

Sports News Combinator – the Final Version

Decorators

Decorator design pattern

Decorators in TypeScript

Definition of decorators in TypeScript

Decorator factory

Class decorator

Passing parameters to the decorator

Overriding constructors in decorators

Method decorator

Property decorator

Parameter decorator

Decorators in SNC

Additional features in SNC

Adding services in SNC

Creating a service

Registering our service

Injecting the service

Implementing HTTP calls in SNC

Observables in HTTP

HTTP request flow with observables

Implementing the HTTP request

Subscribing to HTTP response

Routing in SNC

Defining routes

Application routes

Adding to the router module

Importing in the app module

Implementing a router link

Accessing routes in NewsComponent

Final product

Summary

Application 2 – Trello

An introduction to the sample Trello application

Application overview

Technical overview

TypeScript namespace and modules

The universal namespace

The TypeScript namespace

The export keyword

Nested namespace

Namespaces transpired to JavaScript

TypeScript modules

Definition

Exporting a module

Importing a module

TypeScript Generics

Definition

Functions

Classes

Generic constraints

Sample Trello application

Application Architecture

Code setup

The Trello homepage

Models

The homepage component

Board service

Homepage – initialize the data

OnInit

OnDestroy

OnChange

Homepage – template

Homepage – add a new board

Running the application

Trello – the board component

Routing

Routing in the Board component

Board component – populating the data

Board component – passing data to child components

Passing data to child components with @Input

Passing data from a child component to the parent component

Summary

Trello - Adding Features

Iterators

Iterators in JavaScript

Iterators in TypeScript

Custom iterators in TypeScript

For...of and for...in loops in TypeScript

Asynchronous programming using TypeScript

Callback functions

Callback in TypeScript

CleanUp the function

Promises

Promise API

Handling the response

Chaining the promises

Async-await

Error handling in async-await

Adding features to Sample Trello app

Using promises in sample Trello

Board JSON

Implement promises

Add HTTP dependency

Logic for HTTP call

Call from the Homepage component

Functional implementation

Implement – adding a new task

Board component

The enableAddTask function

The addtaskonEnter function

The addTask method

The clearTask method

The addtaskonBlur method

Implement – adding a new subTask

Task template

Change title of board, task, and subTask

Modify the title of a board

Reflecting the changes on the Homepage

Data formatting in Angular

Built-in pipes

Custom pipes

Sorting pipe for Trello

Adding pipe dependency

Using the custom pipe

Understanding dependency injection in Angular

Managing the dependencies

Summary

Testing the Trello Application

Fundamentals

Challenges in testing

Test-driven development

Unit testing versus end-to-end testing

Unit testing

End-to-end testing

Structure of a test

Mocking

Tools for testing

Jasmine

Karma

Installing and configuring Jasmine and Karma

Installation

Karma-CLI

Other dev dependencies

Jasmine typing

Configuration

Folder and file structure for the test project

Writing test for pipes

Creating a new file

Writing the test case

Describe function

The beforeEach function

The it function

Executing the test cases

Writing test cases for the services class

Creating a new file

Writing the test case

The describe function

The beforeEach function

The it function

Writing test cases for isolated component

Creating a new file

Writing the test case

Implementing the test cases

Writing the test cases for integrated components

Setting up the integrated test

Implementing the test cases

The describe function

First beforeEach function

Second beforeEach function

The it functions

Check boards on the user interface

Test new board creation

Test cases for other components

Summary

Trello - Using Angular CLI

Introducing Angular CLI

Setting up Angular CLI

Angular CLI help command

Generating an application with Angular CLI

File overview

ng new – flags and customization

Customizing the app

App routing file

Angular CLI file

Generating files for the application

Generating a component

Component options in Angular CLI

The flat option

The inline-template option

The inline style option

The spec option

Generating a service

Service options in Angular CLI

The flat option

The spec option

The module option

Generating a pipe

Generating a module

Providing the login module in the app module

Adding components, services, and more in the login module

Adding routing to the modules

Generating TypeScript files

Generating a class

Generating an interface

Generating an enum

Building an Angular app

The build process

The build command

Building the application in dev mode

Dist folder details

The API folder

Favicon

The index.html file

The inline bundle file

The main bundle file

The polyfill bundle file

The style bundle file

The vendor bundle file

The map files

Building the application in production mode

Dist folder details

The bundle files

Serving an Angular app

The ng serve options

Linting an Angular application

Linting rules

Linting options

Linting the Trello application

Code coverage using Angular CLI

Code coverage for the Trello application

Summary

Trello Mobile – Using NativeScript

What is NativeScript?

NativeScript design

NativeScript architecture

NativeScript modules

NativeScript versus web applications

Setting up your NativeScript environment

NativeScript CLI

Installing mobile platform dependencies

Installing an Android Virtual Device

Developing the Sample Trello application using NativeScript

Creating the application skeleton

Running the default NativeScript application

Default folder structure for a NativeScript application

Folder structure in Visual Studio Code

The app folder

The node_modules folder

The platforms folder

The hooks folder

Developing the Homepage component

Cleaning up the existing content

Trello Board models

Implementing the Trello service

Updating the app.module file with the Trello service

Implementing the Homepage component

The Homepage component file

The Homepage style sheet file

The Homepage HTML file

UI elements in the Homepage template

StackLayout

Label

ListView

Binding in a NativeScript Angular template

Event binding

Stitching the Homepage component

The application so far

Executing the run command

Debugging the application

The debug command

Developing the Board component

Board component template

Changes in routing for BoardComponent

Executing the code

NativeScript UI elements

Summary

Deploying Sample Trello on the Cloud Using Microsoft Azure

Azure Cloud as a deployment platform

Benefits of a cloud platform

Efficient hosting and deployment

Scaling

Maintenance

Monitoring

Economy

Deployment options in Microsoft Azure

Platform as a Service (PaaS)

Software as a Service (SaaS)

Deploying Sample Trello using a web app service – FTP

Managing the web app service

Creating a web app

Resource group

App service plan

Deploying the Sample Trello application

Creating deployment credentials

Deploying the code on the web app

web.config file for URL redirection

The result

Deploying Sample Trello using a web app service – GitHub

Integration with GitHub

Configuring GitHub

Running the application

Adding the dist folder to GitHub

Adding application settings

Continuous deployment and monitoring

Web application monitoring

Summary

Getting Started with TypeScript

The current state of JavaScript

The not-so-good parts of JavaScript

Features

Type inference

Arrays

Equality comparison

Null or undefined

TypeScript to the rescue

Benefits of TypeScript

TypeScript comparison with JavaScript

Alternatives to TypeScript

TypeScript features

Features

Data types

Control flow analysis

Encapsulation

Inheritance

Interface

Shapes

Decorators

TypeScript syntax and keywords

Installation and setup

Installation of TypeScript

TypeScript editors

Visual Studio

VS Code

TypeScript compiler

TypeScript to-do list application

todo.ts

Classes in TypeScript

Functions in TypeScript

Debugging TypeScript code

Playground

Summary