TypeScript 2.x By Example

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