Book Image

TypeScript Blueprints

By : Ivo Gabe de Wolff
Book Image

TypeScript Blueprints

By: Ivo Gabe de Wolff

Overview of this book

TypeScript is the future of JavaScript. Having been designed for the development of large applications, it is now being widely incorporated in cutting-edge projects such as Angular 2. Adopting TypeScript results in more robust software - software that is more scalable and performant. It's scale and performance that lies at the heart of every project that features in this book. The lessons learned throughout this book will arm you with everything you need to build some truly amazing projects. You'll build a complete single page app with Angular 2, create a neat mobile app using NativeScript, and even build a Pac Man game with TypeScript. As if fun wasn't enough, you'll also find out how to migrate your legacy codebase from JavaScript to TypeScript. This book isn't just for developers who want to learn - it's for developers who want to develop. So dive in and get started on these TypeScript projects.

Related Content you might be interested in

Current Title:

Small book image
TypeScript Blueprints
Ivo Gabe de Wolff
Jul, 2016 | 288 pages
No titles found
Table of Contents (16 chapters)
TypeScript Blueprints
TypeScript Blueprints
Credits
Credits
About the Author
About the Author
About the Reviewer
About the Reviewer
www.PacktPub.com
www.PacktPub.com
Preface
Preface
Free Chapter
1
TypeScript 2.0 Fundamentals
TypeScript 2.0 Fundamentals
What is TypeScript?
Quick example
Learning modern JavaScript
Type checking
Summary
2
A Weather Forecast Widget with Angular 2
A Weather Forecast Widget with Angular 2
Using modules
Setting up the project
Creating the first component
Adding conditions to the template
Using the component in other components
Showing a forecast
Creating the forecast component
The main component
Summary
3
Note-Taking App with a Server
Note-Taking App with a Server
Setting up the project structure
Getting started with NodeJS
Understanding the structural type system
Adding authentication
Testing the API
Adding CRUD operations
Writing the client side
Running the application
Summary
4
Real-Time Chat
Real-Time Chat
Setting up the project
Getting started with React
Writing the server
Connecting to the server
Creating the chat room
Comparing React and Angular
Summary
5
Native QR Scanner App
Native QR Scanner App
Getting started with NativeScript
Creating the project structure
Creating a Hello World page
Creating the main view
Adding a details view
Scanning QR codes
Adding persistent storage
Styling the app
Comparing NativeScript to alternatives
Summary
6
Advanced Programming in TypeScript
Advanced Programming in TypeScript
Using type guards
More accurate type guards
Checking null and undefined
Creating tagged union types
Comparing performance of algorithms
Summary
7
Spreadsheet Applications with Functional Programming
Spreadsheet Applications with Functional Programming
Setting up the project
Functional programming
Using data types for expressions
Writing unit tests
Parsing an expression
Defining the sheet
Using the Flux architecture
Creating actions
Writing the view
Advantages of Flux
Summary
8
Pac Man in HTML5
Pac Man in HTML5
Setting up the project
Using the HTML5 canvas
Designing the framework
Drawing on the canvas
Adding utility functions
Creating the models
Drawing the view
Handling events
Creating the time handler
Running the game
Adding a menu
Summary
9
Playing Tic-Tac-Toe against an AI
Playing Tic-Tac-Toe against an AI
Creating the project structure
Adding utility functions
Creating the models
Implementing the AI using Minimax
Creating the interface
Testing the AI
Summary
10
Migrate JavaScript to TypeScript
Migrate JavaScript to TypeScript
Gradually migrating to TypeScript
Adding TypeScript
Migrating each file
Refactoring the project
Summary

Chapter 4. Real-Time Chat

After having written two applications with Angular 2, we will now create one with React. The server part will also be different. Instead of a connectionless server, we will now create a server with a persistent connection. In the previous chapters, the client sent requests to the server and the server responded to them. Now we will write a server that can send information at any time to the client. This is needed to send new chat messages immediately to the client, as shown in the following:

In the chat application, a user can first choose a username and join a chat room. In the room, he/she can send messages and receive messages from other users. In this chapter, we will cover the following topics:

  • Setting up the project

  • Getting started with React

  • Writing the server

  • Connecting to the server

  • Creating the chat room

  • Comparing React and Angular

Previous Section
End of Section 1
Next Section