2. A Weather Forecast Widget with Angular 2 | TypeScript Blueprints

Sign In Start Free Trial

Book Overview & Buying
Table Of Contents

TypeScript Blueprints

By : de Wolff

TypeScript Blueprints

By: 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.

Preface

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Free Chapter

1. TypeScript 2.0 Fundamentals

1. TypeScript 2.0 Fundamentals

What is TypeScript?

Quick example

Learning modern JavaScript

Type checking

Summary

2. A Weather Forecast Widget with Angular 2

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

3. 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

4. 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

5. 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

6. 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

7. 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

8. 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

9. 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

10. Migrate JavaScript to TypeScript

Gradually migrating to TypeScript

Adding TypeScript

Migrating each file

Refactoring the project

Summary

Adding conditions to the template

The event handler in the previous section sets the property collapsed to false but that does not modify the template. In normal code, we would have written if (this.collapsed) { ... }. In templates, we cannot use that, but we can use ngIf.

Directives

A directive is an extension to normal HTML tags and attributes. It can define custom behavior. A custom component, such as the About page, can be seen as a directive too. The ngIf condition is a built-in directive in Angular. It is a custom attribute that displays the content if the specified value is true.

The template tag

If a piece of a component needs to be shown a variable an amount of times, you can wrap it in a template tag. Using the ngIf (or ngFor) directive, you can control how often it is shown (in case of ngIf, once or zero times). The template tag will look like this:

<template [ngIf]="collapsed"> 
  <div>Content</div> 
</template>

You can abbreviate this as follows...

CONTINUE READING

83

Tech Concepts

36

Programming languages

73

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

TypeScript Blueprints

Search

Your notes and bookmarks