3. Note-Taking App with a Server | 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

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

Visually different images

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