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.
Table of Contents (16 chapters)
TypeScript Blueprints
Credits
About the Author
About the Reviewer
www.PacktPub.com
Preface

Creating the main view


The main view will show a list of recent scans. Clicking on one of the recent scans opens a details page that shows more details on the scan. When a user clicks on the Scan button, the user can scan a QR code using the camera:

First, we create the model of a scan in src/model.ts. We need to store the content (a string) and the date of the scan:

export interface Scan { 
  content: string; 
  date: Date; 
} 

In src/view/main.ts, we will create the view. The view should export a function that creates the page, so we can use it as the mainEntry. It also needs to export a function that can update the content. The view has two callbacks or events: one is called when an item is clicked and the other is called when the user clicks on the Scan button. This can be implemented by adding the two callbacks as arguments of the createPage function and returning setItems, which updates the content of the list, and createView, which creates the Page, as an object...