4. Real-Time Chat | 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

Creating the chat room

We divide the chat room into two subcomponents: a message and the input box. When the user sends a new message, it is sent to the main component. Message of the user will be shown on the right and other messages on the left, as shown in the following screenshot:

Two-way bindings

React does not have two-way bindings. Instead, we can store the value in the state and modify it when the onChange event is fired. For the input box, we will use this technique. The textbox should be emptied when the user has sent his/her message. With this binding, we can easily do that by modifying the value in the state to an empty string:

class InputBox extends React.Component<{ onSubmit(value: string): void; }, { value: string }> { 
  state = { 
    value: "" 
  }; 
  render() { 
    return ( 
      <form onSubmit={e => this.submit(e)}> 
      <input onChange={e => this.changeValue((e.target as          HTMLInputElement).value)} value...

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