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 By Example

Book Description

Leverage the power of Typescript 2.0 using real-world examples

About This Book

  • Begin with the fundamentals of TypeScript and learn how to write better JavaScript code
  • Build three amazing applications throughout the book
  • Leverage the power of tools such as Angular 2 and NativeScript to build for the web as well as for mobile

Who This Book Is For

Web developers who would like to learn how to use TypeScript to build amazing applications will benefit from this book.

What You Will Learn

  • Design your first project in Visual Studio
  • Learn about the different data types in TypeScript
  • Create web applications in an object-oriented fashion using TypeScript
  • Build a Trello application using TypeScript's complex features.
  • Explore the tools available in a web application ecosystem to write unit test cases
  • Deploy web applications to cloud and assign resources to the application

In Detail

The TypeScript language, compiler, and open source development toolset brings JavaScript development up to the enterprise level. It allows you to use ES5, ES6, and ES7 JavaScript language features today, including classes, interfaces, generics, modules, and more. Its simple typing syntax enables building large, robust applications using object-oriented techniques and industry-standard design principles.

This book aims at teaching you how to get up and running with TypeScript development in the most practical way possible. Taking you through two exciting projects built from scratch, you will learn the basics of TypeScript, before progressing to functions, generics, promises, and callbacks. Then, you'll get to implement object-oriented programming as well as optimize your applications with effective memory management. You'll also learn to test and secure your applications, before deploying them. Starting with a basic SPA built using Angular, you will progress on to building, maybe, a Chat application or a cool application. You'll also learn how to use NativeScript to build a cool mobile application. Each of these applications with be explained in detail, allowing you to grasp the concepts fast.

By the end of this book, you will have not only built two amazing projects but you will also have the skills necessary to take your development to the next level.

Style and approach

Example-based approach to get you quickly started with Typescript

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. Errata
      3. Piracy
      4. Questions
  2. Our First Application – Sports News Combinator
    1. Sports News Combinator (SNC)
      1. Downloading the code
      2. The feature set of SNC
    2. Type System
      1. Variables
        1. The var keyword
        2. Let and const keywords
      2. Types in TypeScript
        1. Type annotation
        2. Primitive types
          1. Number
          2. String
          3. Boolean
        3. Arrays
        4. Tuples
        5. Any
        6. Void
        7. Null and undefined
        8. Union types
      3. Type inference
      4. Type checking
    3. Classes in TypeScript
      1. Object-oriented programming in TypeScript
      2. Understanding classes
        1. Access modifiers
          1. Public
          2. Private
          3. Protected
          4. Readonly
        2. Transpiled JavaScript from classes
          1. ES6 JavaScript
          2. ES5 JavaScript
    4. SNC – 101
      1. Angular – the superhero framework
        1. SPAs
        2. Angular – the concepts
        3. Angular – the architecture
      2. SNC – the architecture
      3. SNC – code setup
        1. Angular CLI  setup
        2. Application setup
      4. SNC – folder structure
    5. Creating our model
    6. First component – NewsComponent
      1. Template
      2. Component class
      3. Metadata of the component
      4. Import
      5. newsComponent
        1. newsComponent business logic
        2. newsComponent template logic
      6. SNC – running the code
    7. Summary
  3. Sports News Combinator – Adding Features
    1. Functions
      1. Types in functions
        1. Arrow functions
          1. The this keyword in arrow functions
      2. Optional and default parameters
      3. Rest parameters
      4. Function overloads
    2. Classes in TypeScript
      1. Class definition
      2. Constructors
        1. Constructor parameters
      3. Properties and methods
        1. Properties
          1. Accessors
          2. Methods
        2. Static properties
      4. Inheritance
        1. Super
      5. Abstract class
    3. Interfaces
      1. Definition
      2. Duck typing
      3. Extending interfaces
      4. Implementing interfaces
    4. Adding features to SNC
      1. Restructuring the models
        1. Adding interface to the Article class
        2. Modifying the news model
      2. Core components
        1. The header component
          1. The component file
          2. The HTML file
        2. The footer component
        3. The app component
      3. Templates and interpolation
        1. Templates
        2. Directives
          1. The Angular loading process for directives
        3. Angular built-in directives
          1. The *ngIf directive
          2. The *ngFor directive
        4. Bindings
          1. Interpolation
          2. Property binding
          3. Two-way binding
    5. Summary
  4. Sports News Combinator – the Final Version
    1. Decorators
      1. Decorator design pattern
      2. Decorators in TypeScript
        1. Definition of decorators in TypeScript 
        2. Decorator factory
        3. Class decorator
          1. Passing parameters to the decorator
          2. Overriding constructors in decorators
        4. Method decorator
        5. Property decorator
        6. Parameter decorator
      3. Decorators in SNC
    2. Additional features in SNC
      1. Adding services in SNC
        1. Creating a service
        2. Registering our service
        3. Injecting the service
      2. Implementing HTTP calls in SNC
        1. Observables in HTTP
        2. HTTP request flow with observables
          1. Implementing the HTTP request
          2. Subscribing to HTTP response
      3. Routing in SNC
        1. Defining routes
          1. Application routes
          2. Adding to the router module
          3. Importing in the app module
        2. Implementing a router link
        3. Accessing routes in NewsComponent
    3. Final product
    4. Summary
  5. Application 2 – Trello
    1. An introduction to the sample Trello application
      1. Application overview
      2. Technical overview
    2. TypeScript namespace and modules
      1. The universal namespace
      2. The TypeScript namespace
        1. The export keyword
        2. Nested namespace
        3. Namespaces transpired to JavaScript
      3. TypeScript modules
        1. Definition
        2. Exporting a module
        3. Importing a module
    3. TypeScript Generics
      1. Definition
      2. Functions
      3. Classes
      4. Generic constraints
    4. Sample Trello application 
      1. Application Architecture
      2. Code setup
    5. The Trello homepage
      1. Models
      2. The homepage component
        1. Board service
      3. Homepage – initialize the data
        1. OnInit
        2. OnDestroy
        3. OnChange
      4. Homepage – template
      5. Homepage – add a new board
      6. Running the application
    6. Trello – the board component
      1. Routing
        1. Routing in the Board component
      2. Board component – populating the data
      3. Board component – passing data to child components
        1. Passing data to child components with @Input
        2. Passing data from a child component to the parent component
    7. Summary
  6. Trello - Adding Features
    1. Iterators
      1. Iterators in JavaScript
      2. Iterators in TypeScript
        1. Custom iterators in TypeScript
      3. For...of and for...in loops in TypeScript
    2. Asynchronous programming using TypeScript
      1. Callback functions
        1. Callback in TypeScript
          1. CleanUp the function
      2. Promises
        1. Promise API
        2. Handling the response
        3. Chaining the promises
      3. Async-await
        1. Error handling in async-await
    3. Adding features to Sample Trello app
      1. Using promises in sample Trello
        1. Board JSON
        2. Implement promises
          1. Add HTTP dependency
          2. Logic for HTTP call
        3. Call from the Homepage component
    4. Functional implementation
      1. Implement – adding a new task
        1. Board component
          1. The enableAddTask function
          2. The addtaskonEnter function
          3. The addTask method
          4. The clearTask method
          5. The addtaskonBlur method
      2. Implement – adding a new subTask
        1. Task template
      3. Change title of board, task, and subTask
        1. Modify the title of a board
        2. Reflecting the changes on the Homepage
    5. Data formatting in Angular
      1. Built-in pipes
      2. Custom pipes
        1. Sorting pipe for Trello
        2. Adding pipe dependency
        3. Using the custom pipe
    6. Understanding dependency injection in Angular
      1. Managing the dependencies
    7. Summary
  7. Testing the Trello Application
    1. Fundamentals
      1. Challenges in testing
      2. Test-driven development 
      3. Unit testing versus end-to-end testing
        1. Unit testing
        2. End-to-end testing
      4. Structure of a test
        1. Mocking
    2. Tools for testing
      1. Jasmine
      2. Karma
      3. Installing and configuring Jasmine and Karma
        1. Installation
          1. Karma-CLI
          2. Other dev dependencies
          3. Jasmine typing
        2. Configuration
    3. Folder and file structure for the test project
    4. Writing test for pipes
      1. Creating a new file
      2. Writing the test case
        1. Describe function
        2. The beforeEach function
        3. The it function
    5. Executing the test cases
    6. Writing test cases for the services class
      1. Creating a new file
      2. Writing the test case
        1. The describe function
        2. The beforeEach function
        3. The it function
    7. Writing test cases for isolated component
      1. Creating a new file
      2. Writing the test case
      3. Implementing the test cases
    8. Writing the test cases for integrated components
      1. Setting up the integrated test
      2. Implementing the test cases
        1. The describe function
        2. First beforeEach function
        3. Second beforeEach function
        4. The it functions
          1. Check boards on the user interface
          2. Test new board creation
      3. Test cases for other components
    9. Summary
  8. Trello - Using Angular CLI
    1. Introducing Angular CLI
      1. Setting up Angular CLI
      2. Angular CLI help command
    2. Generating an application with Angular CLI
      1. File overview
      2. ng new – flags and customization
        1. Customizing the app
          1. App routing file
      3. Angular CLI file
    3. Generating files for the application
      1. Generating a component
        1. Component options in Angular CLI
          1. The flat option
          2. The inline-template option
          3. The inline style option
          4. The spec option
      2. Generating a service
        1. Service options in Angular CLI
          1. The flat option
          2. The spec option
          3. The module option
      3. Generating a pipe
      4. Generating a module
        1. Providing the login module in the app module
        2. Adding components, services, and more in the login module
        3. Adding routing to the modules
      5. Generating TypeScript files
        1. Generating a class
        2. Generating an interface
        3. Generating an enum
    4. Building an Angular app
      1. The build process
        1. The build command
      2. Building the application in dev mode
        1. Dist folder details
          1. The API folder
          2. Favicon
          3. The index.html file
          4. The inline bundle file
          5. The main bundle file
          6. The polyfill bundle file
          7. The style bundle file
          8. The vendor bundle file
          9. The map files
      3. Building the application in production mode
        1. Dist folder details
          1. The bundle files
    5. Serving an Angular app
      1. The ng serve options
    6. Linting an Angular application
      1. Linting rules
      2. Linting options
      3. Linting the Trello application
    7. Code coverage using Angular CLI
      1. Code coverage for the Trello application
    8. Summary
  9. Trello Mobile – Using NativeScript
    1. What is NativeScript?
      1. NativeScript design
        1. NativeScript architecture
        2. NativeScript modules
      2. NativeScript versus web applications
    2. Setting up your NativeScript environment
      1. NativeScript CLI
      2. Installing mobile platform dependencies
        1. Installing an Android Virtual Device
    3. Developing the Sample Trello application using NativeScript
      1. Creating the application skeleton
        1. Running the default NativeScript application
      2. Default folder structure for a NativeScript application
        1. Folder structure in Visual Studio Code
          1. The app folder
          2. The node_modules folder
          3. The platforms folder
          4. The hooks folder
    4. Developing the Homepage component
      1. Cleaning up the existing content
      2. Trello Board models
      3. Implementing the Trello service 
        1. Updating the app.module file with the Trello service
      4. Implementing the Homepage component
        1. The Homepage component file
        2. The Homepage style sheet file
        3. The Homepage HTML file
        4. UI elements in the Homepage template
          1. StackLayout
          2. Label
          3. ListView
        5. Binding in a NativeScript Angular template
          1. Event binding
      5. Stitching the Homepage component
    5. The application so far
      1. Executing the run command
      2. Debugging the application
        1. The debug command
    6. Developing the Board component
      1. Board component template
      2. Changes in routing for BoardComponent
      3. Executing the code
    7. NativeScript UI elements
    8. Summary
  10. Deploying Sample Trello on the Cloud Using Microsoft Azure
    1. Azure Cloud as a deployment platform
      1. Benefits of a cloud platform
        1. Efficient hosting and deployment
        2. Scaling
        3. Maintenance
        4. Monitoring
        5. Economy
      2. Deployment options in Microsoft Azure
        1. Platform as a Service (PaaS)
        2. Software as a Service (SaaS)
    2. Deploying Sample Trello using a web app service – FTP
      1. Managing the web app service 
        1. Creating a web app
          1. Resource group
          2. App service plan
      2. Deploying the Sample Trello application
        1. Creating deployment credentials
        2. Deploying the code on the web app
        3. web.config file for URL redirection
        4. The result
    3. Deploying Sample Trello using a web app service – GitHub
      1. Integration with GitHub
        1. Configuring GitHub
      2. Running the application
        1. Adding the dist folder to GitHub
        2. Adding application settings
      3. Continuous deployment and monitoring
        1. Web application monitoring
    4. Summary
  11. Getting Started with TypeScript
    1. The current state of JavaScript
    2. The not-so-good parts of JavaScript
      1. Features
        1. Type inference
        2. Arrays
        3. Equality comparison
        4. Null or undefined
    3. TypeScript to the rescue
      1. Benefits of TypeScript
      2. TypeScript comparison with JavaScript
    4. Alternatives to TypeScript
    5. TypeScript features
      1. Features
        1. Data types
        2. Control flow analysis
        3. Encapsulation
        4. Inheritance
        5. Interface
        6. Shapes
        7. Decorators
      2. TypeScript syntax and keywords
    6. Installation and setup
      1. Installation of TypeScript
      2. TypeScript editors
        1. Visual Studio
        2. VS Code
    7. TypeScript compiler
    8. TypeScript to-do list application
      1. todo.ts
        1. Classes in TypeScript
        2. Functions in TypeScript
      2. Debugging TypeScript code
    9. Playground
    10. Summary