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

Scanning QR codes

NativeScript has support for plugins. A plugin can add extra functionality, such as turning on the flash light of a phone, vibrating the phone, logging in with Facebook, or scanning QR codes. These can be installed using the command line interface of NativeScript.

We will use a NativeScript plugin to scan QR codes. The plugin is called NativeScript BarcodeScanner. It can scan QR codes and other barcode formats. The plugin can be installed using the following command:

tns plugin add nativescript-barcodescanner

Type definitions

We must add a definition file to import the plugin. The plugin does not contain type definitions, and type definitions are not available on DefinitelyTyped and TSD. It is not necessary to write definitions that are fully correct. We only have to type the parts of the library that we are using. We use the scan function, which can take an optional settings object and return a Promise. In src/definitions.d.ts, we write the following definition:

declare module...
Previous Section
End of Section 7
Next Section