O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

TypeScript 2.x for Angular Developers

Book Description

Write better, reusable, and predictable Angular apps with typed logic

About This Book

  • Leverage the power of TypeScript for developing large-scale Angular apps
  • Take advantage of the cutting-edge features of TypeScript 2.x to build high-performing, maintainable applications
  • Explore the TypeScript implementation of modules, classes, and annotations with Angular components

Who This Book Is For

This book is for developers who would like to learn to use TypeScript to develop Angular applications. A basic JavaScript knowledge would be beneficial.

What You Will Learn

  • Move from loose types to predictable strict types
  • Write self-documented API methods and data structures
  • Understand custom generic types for complex data structures
  • Implement Contract with Interfaces
  • Enhance Dependency Injection in Angular via class constructors
  • Explore TypeScript advanced types
  • Build Interactive web apps with Angular and TypeScript

In Detail

TypeScript, a superset of JavaScript, is the default language for building Angular applications from Google. TypeScript 2.0 adds optional static types, classes, and modules to JavaScript, to enable great tooling and better structuring of large JavaScript applications.

This book will teach you how to leverage the exciting features of TypeScript while working on Angular projects to build scalable, data-intensive web applications. You will begin by setting up and installing TypeScript and then compile it with JavaScript. You will then learn to write simple JavaScript expressions with TypeScript. You will then go through some built in TypeScript types and accessors. Further you will build web components using TypeScript Interfaces and Decorators. You will go through the Angular form module, which will enable you to write predictable typed forms with TypeScript and learn to use typed DOM events. You will also build a single-page application using the Router module. Lastly, you will consume API data with Angular's HTTP Module and handle responses with RxJS observables. At the end of the book, you will go through different testing and debugging techniques.

Style and approach

A step-by-step, tutorial-based guide

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 http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the code file.

Table of Contents

  1. 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
  2. From Loose Types to Strict Types
    1. Term definitions
    2. Implications of loose types
      1. The problem
      2. Mitigating loose-type problems
        1. The typeof operator
        2. The toString method
    3. Final Note
    4. Summary
  3. Getting Started with TypeScript
    1. Setting up TypeScript
    2. Hello World
    3. Type annotation in TypeScript
    4. ES6 and beyond
      1. User story
    5. Final notes
    6. Summary
  4. Typescript Native Types and Features
    1. Basic types
      1. Strings
      2. Numbers
      3. Boolean
      4. Arrays
      5. Void
      6. Any
      7. Tuple
      8. Enums
    2. Functions and function types
      1. Function parameters
      2. Function return value
      3. Optional parameters
    3. Interfaces
      1. Interfaces for JavaScript object types
        1. Optional properties
        2. Read-only properties
      2. Interfaces as contracts
    4. Decorators
      1. Decorating methods
      2. Decorating classes
      3. Decorator factories
    5. Summary
  5. Up and Running with Angular and TypeScript
    1. Setting up Angular and TypeScript
      1. Creating a new Angular project
      2. Project structure
      3. Generating files
    2. Basics concepts
      1. Components
      2. Templates
      3. Component styles
    3. Modules
    4. Unit testing
    5. Summary
  6. Advanced Custom Components with TypeScript
    1. Lifecycle hooks
    2. DOM manipulation
      1. ElementRef
      2. Hooking into content initialization
      3. Handling DOM events
    3. View encapsulation
      1. Emulated
      2. Native
      3. None
    4. Summary
  7. Component Composition with TypeScript
    1. Component composability
    2. Hierarchical composition
    3. Component communication
      1. Parent-child flow
        1. Intercepting property changes
      2. Child–parent flow
      3. Accessing properties and methods of a child via a parent component
      4. Accessing child members with ViewChild
    4. Summary
  8. Separating Concerns with Typed Services
    1. Dependency injection
    2. Data in components
    3. Data class services
    4. Component interaction with services
    5. Services as utilities
    6. Summary
  9. Better Forms and Event Handling with TypeScript
    1. Creating types for forms
    2. The form module
    3. Two-way binding
    4. More form fields
    5. Validating the form and form fields
    6. Submitting forms
    7. Handling events
      1. Mouse events
      2. Keyboard events
    8. Summary
  10. Writing Modules, Directives, and Pipes with TypeScript
    1. Directives
      1. Attribute directives
        1. Handling events in directives
        2. Dynamic attribute directives
      2. Structural directives
        1. Why the difference?
        2. The deal with asterisks
        3. Creating structural directives
    2. Pipes
      1. Creating pipes
        1. Passing arguments to pipes
    3. Modules
    4. Summary
  11. Client-Side Routing for SPA
    1. RouterModule
    2. Router directives
    3. Master-details view with routes
      1. Data source
      2. Blog service
      3. Creating routes
      4. Listing posts in the home component
      5. Reading an article with the post component
    4. Summary
  12. Working with Real Hosted Data
    1. Observables
    2. The HTTP module
    3. Building a simple todo demo app
      1. Project setup
      2. Building the API
        1. Installing diskdb
        2. Updating API endpoints
      3. Creating an Angular component
      4. Creating application routes
      5. Creating a todos service
      6. Connecting the service with our todos component
      7. Implementing the view
    4. Build a user directory with Angular
      1. Create a new Angular app
      2. Create a Node server
      3. Install diskDB
      4. Create a new component
      5. Create a service
      6. Updating user.component.ts
      7. Updating user.component.html
      8. Running the app
    5. Summary
  13. Testing and Debugging
    1. Angular 2 testing tools
      1. Jasmine
        1. Main concepts of Jasmine
      2. Karma
      3. Protractor
      4. Angular testing platform
    2. Using Karma (with Jasmine)
      1. Creating a new project
      2. Installing the Karma CLI
      3. Configuring Karma
    3. Testing the components
    4. Testing services
      1. Testing using HTTP
      2. Testing using MockBackend
      3. Testing a directive
      4. Testing a pipe
    5. Debugging
      1. Augury
      2. Augury features
        1. Component tree
      3. Router tree
      4. Source map
    6. Summary