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

Setting up the project structure

First, we have to setup the project. The difference with the previous chapter is that we now have to build two applications—the client side and the server side. This causes some differences with the previous setup.

Directories

We will again place our TypeScript sources in the lib directory. In that directory, we will create four subdirectories: client, server, shared, and typings. The lib/client directory will contain the client-side application and the lib/server directory will contain the server code. Codes that can be used by both the server and the client will go in lib/shared. Last but not least, lib/typings will contain type definitions for some dependencies, including NodeJS.

Configuring the build tool

In lib, we create a tsconfig.json file that will contain some configuration for TypeScript. We want to compile the server-side code to es2015, so we can use some new features of TypeScript and JavaScript. The client side, however, must be compiled to es5...

Previous Section
End of Section 2
Next Section