You are previewing TypeScript Blueprints.
O'Reilly logo
TypeScript Blueprints

Book Description

Build exciting end-to-end applications with TypeScript

About This Book

  • This book will help you whether you’re a beginner or an expert

  • Complete and complex projects provide codes that are ready and solutions for start-ups and enterprise developers

  • The book will showcase the power and depth of TypeScript when it comes to high performance and scalability

  • Who This Book Is For

    This book was written for web developers who wish to make the most of TypeScript and build fun projects. You should be familiar with the fundamentals of JavaScript

    What You Will Learn

  • Build quirky and fun projects from scratch while exploring widely applicable practices and techniques

  • Use TypeScript with a range of different technologies such as Angular 2 and React and write cross-platform applications

  • Migrate JavaScript codebases to TypeScript to improve your workflow

  • Write maintainable and reusable code that is helpful in the world of programming revolving around features and bugs

  • Using System.JS and Webpack to load scripts and their dependencies.

  • Developing highly performance server-side applications to run within Node Js.

  • Reviewing high performant Node.js patterns and manage garbage collection.

  • In Detail

    TypeScript is the future of JavaScript. Having been designed for the development of large applications, it is being widely incorporated in popular projects such as Angular JS 2.0. Adopting TypeScript results in more robust software, while still being deployable in apps where regular JavaScript would run.

    Scale and performance lie at the heart of the projects built in our book. The lessons learned throughout this book will arm you with everything you need to build amazing projects. During the course of this book, you will learn how to build a complete Single Page Application with Angular 2 and create a popular mobile app using NativeScript.

    Further on, you will build a classic Pac Man game in TypeScript. We will also help you migrate your legacy codebase project from JavaScript to TypeScript.

    By the end of the book, you will have created a number of exciting projects and will be competent using TypeScript for your live projects.

    Style and approach

    The book focuses on building projects from scratch. These end-to-end projects will give you ready-to-implement solutions for your business scenario, showcasing the depth and robustness of TypeScript.

    Downloading the example code for this book. You can download the example code files for all Packt books you have purchased from your account at If you purchased this book elsewhere, you can visit and register to have the code file.

    Table of Contents

    1. TypeScript Blueprints
      1. TypeScript Blueprints
      2. Credits
      3. About the Author
      4. About the Reviewer
        1. Why subscribe?
        2. Free access for Packt account holders
      6. Preface
        1. What this book covers
        2. What you need for this book
        3. Who this book is for
        4. Conventions
        5. Reader feedback
        6. Customer support
          1. Downloading the example code
          2. Downloading the color images of this book 
          3. Errata
          4. Piracy
          5. Questions
      7. 1. TypeScript 2.0 Fundamentals
        1. What is TypeScript?
        2. Quick example
          1. Transpiling
          2. Type checking
        3. Learning modern JavaScript
          1. let and const
          2. Classes
          3. Arrow functions
          4. Function arguments
          5. Array spread
          6. Destructuring
          7. Template strings
          8. New classes
        4. Type checking
          1. Primitive types
          2. Defining types
          3. Undefined and null
          4. Type annotations
        5. Summary
      8. 2. A Weather Forecast Widget with Angular 2
        1. Using modules
        2. Setting up the project
          1. Directory structure
          2. Configuring TypeScript
          3. Building the system
          4. The HTML file
        3. Creating the first component
          1. The template
          2. Testing
          3. Interactions
          4. One-way variable binding
          5. Event listeners
        4. Adding conditions to the template
          1. Directives
          2. The template tag
          3. Modifying the about template
        5. Using the component in other components
        6. Showing a forecast
          1. Using the API
          2. Typing the API
        7. Creating the forecast component
          1. Templates
          2. Downloading the forecast
          3. Adding @Output
        8. The main component
          1. Using our other components
          2. Two-way bindings
          3. Listening to our event
          4. Geolocation API
          5. Component sources
        9. Summary
      9. 3. Note-Taking App with a Server
        1. Setting up the project structure
          1. Directories
          2. Configuring the build tool
          3. Type definitions
        2. Getting started with NodeJS
          1. Asynchronous code
            1. Callback approach for asynchronous code
            2. Disadvantages of callbacks
          2. The database
            1. Wrapping functions in promises
            2. Connecting to the database
            3. Querying the database
        3. Understanding the structural type system
          1. Generics
          2. Typing the API
        4. Adding authentication
          1. Implementing users in the database
          2. Adding users to the database
        5. Testing the API
        6. Adding CRUD operations
          1. Implementing the handlers
          2. Request handling
        7. Writing the client side
          1. Creating the login form
          2. Creating a menu
          3. The note editor
          4. The main component
            1. Error handler
        8. Running the application
        9. Summary
      10. 4. Real-Time Chat
        1. Setting up the project
          1. Configuring gulp
        2. Getting started with React
          1. Creating a component with JSX
          2. Adding props and state to a component
          3. Creating the menu
          4. Testing the application
        3. Writing the server
          1. Connections
          2. Typing the API
          3. Accepting connections
          4. Storing recent messages
          5. Handling a session
          6. Implementing a chat message session
        4. Connecting to the server
          1. Automatic reconnecting
          2. Sending a message to the server
          3. Writing the event handler
        5. Creating the chat room
          1. Two-way bindings
          2. Stateless functional components
          3. Running the application
        6. Comparing React and Angular
          1. Templates and JSX
          2. Libraries or frameworks
        7. Summary
      11. 5. Native QR Scanner App
        1. Getting started with NativeScript
        2. Creating the project structure
          1. Adding TypeScript
        3. Creating a Hello World page
        4. Creating the main view
        5. Adding a details view
        6. Scanning QR codes
          1. Type definitions
          2. Implementation
          3. Testing on a device
        7. Adding persistent storage
        8. Styling the app
        9. Comparing NativeScript to alternatives
        10. Summary
      12. 6. Advanced Programming in TypeScript
        1. Using type guards
          1. Narrowing
          2. Narrowing any
          3. Combining type guards
        2. More accurate type guards
          1. Assignments
        3. Checking null and undefined
          1. Guard against null and undefined
          2. The never type
        4. Creating tagged union types
        5. Comparing performance of algorithms
          1. Big-Oh notation
          2. Optimizing algorithms
          3. Binary search
          4. Built-in functions
        6. Summary
      13. 7. Spreadsheet Applications with Functional Programming
        1. Setting up the project
        2. Functional programming
          1. Calculating a factorial
        3. Using data types for expressions
          1. Creating data types
          2. Traversing data types
          3. Validating an expression
          4. Calculating expressions
        4. Writing unit tests
        5. Parsing an expression
          1. Creating core parsers
          2. Running parsers in a sequence
          3. Parsing a number
          4. Order of operations
        6. Defining the sheet
          1. Calculating all fields
        7. Using the Flux architecture
          1. Defining the state
          2. Creating the store and dispatcher
        8. Creating actions
          1. Adding a column or a row
          2. Changing the title
          3. Showing the input popup
          4. Testing actions
        9. Writing the view
          1. Rendering the grid
          2. Rendering a field
          3. Showing the popup
          4. Adding styles
          5. Gluing everything together
        10. Advantages of Flux
          1. Going cross-platform
        11. Summary
      14. 8. Pac Man in HTML5
        1. Setting up the project
        2. Using the HTML5 canvas
          1. Saving and restoring the state
        3. Designing the framework
          1. Creating pictures
          2. Wrapping other pictures
          3. Creating events
          4. Binding everything together
        4. Drawing on the canvas
        5. Adding utility functions
        6. Creating the models
          1. Using enums
          2. Storing the level
          3. Creating the default level
          4. Creating the state
        7. Drawing the view
        8. Handling events
          1. Working with key codes
        9. Creating the time handler
        10. Running the game
        11. Adding a menu
          1. Changing the model
          2. Rendering the menu
          3. Handling events
          4. Modifying the time handler
        12. Summary
      15. 9. Playing Tic-Tac-Toe against an AI
        1. Creating the project structure
          1. Configure TypeScript
        2. Adding utility functions
        3. Creating the models
          1. Showing the grid
          2. Creating operations on the grid
          3. Creating the grid
          4. Adding tests
          5. Random testing
        4. Implementing the AI using Minimax
          1. Implementing Minimax in TypeScript
          2. Optimizing the algorithm
        5. Creating the interface
          1. Handling interaction
          2. Creating players
        6. Testing the AI
          1. Testing with a random player
        7. Summary
      16. 10. Migrate JavaScript to TypeScript
        1. Gradually migrating to TypeScript
        2. Adding TypeScript
          1. Configuring TypeScript
          2. Configuring the build tool
          3. Acquiring type definitions
          4. Testing the project
        3. Migrating each file
          1. Converting to ES modules
          2. Correcting types
          3. Adding type guards and casts
          4. Using modern syntax
          5. Adding types
        4. Refactoring the project
          1. Enable strict checks
        5. Summary