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

Showing a forecast

We still have not shown a forecast yet. We will use data from open weather map (http://www.openweathermap.org). You can create an account on their website. With your account, you can request an API token. You need the token to request the forecast. A free account is limited to 60 requests per second and 50,000 requests per day.

We save the API token in a separate file, lib/config.ts:

export const openWeatherMapKey = "your-token-here"; 
export const apiURL = "http://api.openweathermap.org/data/2.5/";

Tip

Add constants to a separate file

When you add constants in separate configuration files, you can easily change them and your code is more readable. This gives you better maintainable code.

Using the API

We will create a new file, lib/api.ts, that will simplify downloading data from open weather map. The API uses URLs such as http://api.openweathermap.org/data/2.5/forecast?mode=json&q=Utrecht,NL&appid=your-token-here. We will create a function that will build...

Previous Section
End of Section 7
Next Section