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

Mastering TypeScript - Second Edition

Book Description

Build enterprise-ready, industrial-strength web applications using TypeScript and leading JavaScript frameworks

About This Book

  • Start with the basics, then enhance your knowledge with in-depth discussions on language features, third-party libraries, design patterns and more
  • Practical examples that show how to use TypeScript with popular frameworks, including Backbone, Angular 2, React, Aurelia, Node and others
  • Focus on test-driven development to build high quality applications that are modular, scalable and adaptable

Who This Book Is For

Whether you are a JavaScript developer aiming to learn TypeScript, or an experienced TypeScript developer, this book will take your skills to the next level. From basic to advanced language constructs, test-driven development, object-oriented techniques and industry standard design patterns, you will learn how to get the most out of the TypeScript language.

What You Will Learn

  • Gain an insight into core and advanced TypeScript language features
  • Integrate your existing JavaScript libraries and third-party frameworks by writing and using declaration files
  • Target popular JavaScript frameworks such as jQuery, Backbone, Angular, Aurelia, React, Node, and Express
  • Create extensive test suites for your application with Jasmine, Protactor, and Selenium
  • Organize your application code using modules, AMD loaders, Require and SystemJs
  • Explore advanced object-oriented design principles, including Dependency Injection
  • Understand and compare the various MVC implementations in Aurelia, Angular, React and Backbone
  • Build a complete single-page web application that incorporates CSS animations to enhance your customers' browsing experience

In Detail

The TypeScript language, compiler, and opensource development toolset brings JavaScript development up to the enterprise level. It allows us 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.

Packed with practical, real-world examples, this book is a guide to bringing the benefits of strongly typed, object-oriented programming and design principles into the JavaScript development space. Starting with core language features, and working through more advanced topics such as generics and asynchronous programming techniques, you will learn how to gain maximum benefit from your JavaScript development with TypeScript. With a strong focus on test-driven development, and coverage of many popular and in-demand JavaScript frameworks, you can fast-track your TypeScript knowledge to a professional level. By the end of this book, you will be able to confidently build TypeScript applications, whether you are targeting Angular, Aurelia, React, Backbone, Node, or any other JavaScript framework.

Style and approach

With generous doses of small, easy to follow code samples, this hands-on guide builds up your TypeScript knowledge incrementally. Starting with entry-level concepts, and moving towards intermediate and then advanced techniques, this book provides practical examples of real-world techniques to build robust, testable, adaptable and enterprise-ready JavaScript applications.

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. Mastering TypeScript - Second Edition
    1. Mastering TypeScript - Second Edition
    2. Credits
    3. About the Author
    4. About the Reviewers
    5. www.PacktPub.com
      1. Why subscribe?
    6. Customer Feedback
    7. 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
    8. 1. TypeScript - Tools and Framework Options
      1. Introducing TypeScript
        1. The ECMAScript standard
        2. The benefits of TypeScript
          1. Compiling
          2. Strong typing
            1. TypeScript's syntactic sugar
          3. JavaScript and TypeScript definitions
            1. DefinitelyTyped
          4. Encapsulation
            1. TypeScript classes generate closures
          5. Public and private accessors
      2. TypeScript IDEs
        1. Node-based compilation
          1. Creating a tsconfig.json file
        2. Microsoft Visual Studio
          1. Creating a Visual Studio project
          2. Default project settings
          3. Debugging in Visual Studio
        3. WebStorm
          1. Creating a WebStorm project
          2. Default files
          3. Building a simple HTML application
          4. Running a web page in Chrome
          5. Debugging in Chrome
        4. Visual Studio Code
          1. Installing VSCode
          2. Exploring VSCode
            1. Creating a tasks.json file
            2. Building the project
            3. Creating a launch.json file
            4. Setting breakpoints
            5. Debugging web pages
        5. Other editors
          1. Using Grunt
      3. Summary
    9. 2. Types, Variables, and Function Techniques
      1. Basic types
        1. JavaScript typing
        2. TypeScript typing
        3. Type syntax
        4. Inferred typing
        5. Duck typing
        6. Template strings
        7. Arrays
        8. for...in and for...of
        9. The any type
        10. Explicit casting
        11. Enums
        12. Const enums
        13. Const values
        14. The let keyword
      2. Functions
        1. Function return types
        2. Anonymous functions
        3. Optional parameters
        4. Default parameters
        5. Rest parameters
        6. Function callbacks
        7. Function signatures
        8. Function overloads
      3. Advanced types
        1. Union types
        2. Type guards
        3. Type aliases
        4. Null and undefined
        5. Object rest and spread
      4. Summary
    10. 3. Interfaces, Classes, and Inheritance
      1. Interfaces
        1. Optional properties
        2. Interface compilation
      2. Classes
        1. Class properties
        2. Implementing interfaces
        3. Class constructors
        4. Class functions
        5. Interface function definitions
        6. Class modifiers
        7. Constructor access modifiers
        8. Readonly properties
        9. Class property accessors
        10. Static functions
        11. Static properties
        12. Namespaces
      3. Inheritance
        1. Interface inheritance
        2. Class inheritance
        3. The super keyword
        4. Function overloading
        5. Protected class members
        6. Abstract classes
        7. JavaScript closures
      4. Using interfaces, classes, and inheritance - the Factory Design Pattern
        1. Business requirements
        2. What the Factory Design Pattern does
          1. The IPerson interface
          2. The Person class
          3. Specialist classes
          4. The Factory class
          5. Using the Factory class
      5. Summary
    11. 4. Decorators, Generics, and Asynchronous Features
      1. Decorators
        1. Decorator syntax
        2. Multiple decorators
        3. Decorator factories
        4. Class decorator parameters
        5. Property decorators
        6. Static property decorators
        7. Method decorators
        8. Using method decorators
        9. Parameter decorators
        10. Decorator metadata
        11. Using decorator metadata
      2. Generics
        1. Generic syntax
        2. Instantiating generic classes
        3. Using the type T
        4. Constraining the type of T
        5. Generic interfaces
        6. Creating new objects within generics
      3. Asynchronous language features
        1. Promises
        2. Promise syntax
        3. Using promises
        4. Callback versus promise syntax
        5. Returning values from promises
        6. Async and await
        7. Await errors
        8. Promise versus await syntax
        9. Await messages
      4. Summary
    12. 5. Writing and Using Declaration Files
      1. Global variables
      2. Using JavaScript code blocks in HTML
        1. Structured data
      3. Writing your own declaration file
        1. The module keyword
        2. Interfaces
        3. Union types
      4. Module merging
      5. Declaration syntax reference
        1. Function overrides
        2. Nested namespaces
        3. Classes
        4. Class namespaces
        5. Class constructor overloads
        6. Class properties
        7. Class functions
        8. Static properties and functions
        9. Global functions
        10. Function signatures
        11. Optional properties
        12. Merging functions and modules
      6. Summary
    13. 6. Third-Party Libraries
      1. Downloading definition files
      2. Using NuGet
        1. Using the Extension Manager
        2. Installing declaration files
        3. Using the Package Manager Console
          1. Installing packages
          2. Searching for package names
          3. Installing a specific version
      3. Using Typings
        1. Searching for packages
        2. Typings initialize
        3. Installing definition files
        4. Installing a specific version
        5. Re-installing definition files
      4. Using Bower
      5. Using npm and @types
      6. Using third-party libraries
        1. Choosing a JavaScript framework
      7. Backbone
        1. Using inheritance with Backbone
        2. Using interfaces
        3. Using generic syntax
        4. Using ECMAScript 5
        5. Backbone TypeScript compatibility
      8. Angular
        1. Angular classes and $scope
        2. Angular TypeScript compatibility
      9. Inheritance - Angular versus Backbone
      10. ExtJS
        1. Creating classes in ExtJS
        2. Using type casting
        3. ExtJS-specific TypeScript compiler
      11. Summary
    14. 7. TypeScript Compatible Frameworks
      1. What is MVC?
        1. The Model
        2. The View
        3. The Controller
        4. MVC summary
        5. The benefits of using MVC
        6. Sample application outline
      2. Using Backbone
        1. Rendering performance
        2. Backbone setup
        3. Backbone models
        4. Backbone ItemView
        5. Backbone CollectionView
        6. Backbone application
      3. Using Aurelia
        1. Aurelia setup
        2. Development considerations
        3. Aurelia performance
        4. Aurelia models
        5. Aurelia views
        6. Aurelia bootstrap
        7. Aurelia events
      4. Angular 2
        1. Angular 2 setup
        2. Angular 2 models
        3. Angular 2 views
        4. Angular performance
        5. Angular events
      5. Using React
        1. React setup
        2. React views
        3. React bootstrapping
        4. React events
      6. Summary
    15. 8. Test Driven Development
      1. Test driven development
      2. Unit, integration, and acceptance tests
        1. Unit tests
        2. Integration tests
        3. Acceptance tests
      3. Unit testing frameworks
      4. Jasmine
        1. A simple Jasmine test
        2. Jasmine SpecRunner
        3. Matchers
        4. Test startup and teardown
        5. Data driven tests
        6. Using spies
        7. Spying on callback functions
        8. Using spies as fakes
        9. Asynchronous tests
        10. Using done()
        11. Jasmine fixtures
        12. DOM events
      5. Jasmine runners
        1. Testem
        2. Karma
        3. Protractor
          1. Using Selenium
      6. Using continuous integration
        1. Benefits of CI
        2. Selecting a build server
          1. Team Foundation Server
          2. Jenkins
          3. TeamCity
        3. Integration test reporting
      7. Summary
    16. 9. Testing Typescript Compatible Frameworks
      1. Testing our sample application
      2. Modifying our sample for testability
      3. Backbone testing
        1. Complex models
        2. View updates
        3. DOM event updates
        4. Model tests
        5. Complex model tests
        6. Rendering tests
        7. DOM event tests
        8. Backbone testing summary
      4. Aurelia testing
        1. Aurelia components
        2. Aurelia component view-model
        3. Aurelia component view
        4. Rendering a component
        5. Aurelia naming conventions
        6. Aurelia test setup
        7. Aurelia unit tests
        8. Rendering tests
        9. Aurelia end-to-end tests
        10. Aurelia test summary
      5. Angular 2 testing
        1. Application updates
        2. Angular 2 test setup
        3. Angular 2 model tests
        4. Angular 2 rendering tests
        5. Angular 2 DOM testing
        6. Angular 2 testing summary
      6. React testing
        1. Multiple entry points
        2. React modifications
        3. Unit testing React components
        4. React model and view tests
        5. React DOM event tests
      7. Summary
    17. 10. Modularization
      1. Module basics
        1. Exporting modules
        2. Importing modules
        3. Module renaming
        4. Default exports
        5. Exporting variables
      2. AMD module loading
        1. AMD compilation
        2. AMD module setup
        3. Require configuration
        4. AMD browser configuration
        5. AMD module dependencies
        6. Bootstrapping Require
        7. Fixing Require config errors
          1. Incorrect dependencies
          2. 404 errors
      3. SystemJs module loading
        1. SystemJs installation
        2. SystemJs browser configuration
        3. SystemJs module dependencies
        4. Bootstrapping Jasmine
      4. Using Express with Node
        1. Express setup
        2. Using modules with Express
        3. Express routing
        4. Express templating
        5. Using Handlebars
        6. Express POST events
        7. HTTP request redirection
        8. Node and Express summary
      5. Summary
    18. 11. Object-Oriented Programming
      1. Object-oriented principles
        1. Program to an interface
        2. SOLID principles
          1. Single responsibility
          2. Open closed
          3. Liskov substitution
          4. Interface segregation
          5. Dependency inversion
      2. User interface design
        1. Conceptual design
        2. Angular 2 setup
        3. Using Bootstrap
        4. Creating a side panel
        5. Creating an overlay
        6. Coordinating transitions
      3. The State pattern
        1. State interface
        2. Concrete states
      4. The Mediator pattern
      5. Modular code
        1. Navbar component
        2. SideNav component
        3. RightScreen component
        4. Child components
        5. Mediator interface implementation
        6. The Mediator class
        7. Using the Mediator
        8. Reacting to DOM events
      6. Summary
    19. 12. Dependency Injection
      1. Sending mail
        1. Using nodemailer
        2. Configuration settings
        3. Using a local SMTP server
        4. Object dependency
        5. Service Location
        6. Service Location anti-pattern
        7. Dependency injection
      2. Building a dependency injector
        1. Interface resolution
        2. Enum resolution
        3. Class resolution
        4. Constructor injection
      3. Decorator injection
        1. Using a class definition
        2. Parsing constructor parameters
        3. Finding parameter types
        4. Injecting properties
        5. Using dependency injection
        6. Recursive injection
      4. Summary
    20. 13. Building Applications
      1. The UI experience
        1. Using Brackets
        2. Using Emmet
        3. Creating a login panel
      2. An Aurelia website
        1. Node and Aurelia compilation
        2. Serving the Aurelia application
        3. Aurelia pages in Node
        4. Aurelia components
        5. Processing JSON
        6. Aurelia forms
        7. Posting data
        8. Aurelia messaging
      3. An Angular 2 website
        1. Angular setup
        2. Serving Angular 2 pages
        3. Angular 2 components
        4. Processing JSON
        5. Posting data
      4. An Express React website
        1. Express and React
        2. Serving the React application
        3. Multiple package.json files
        4. React components
        5. Consuming REST endpoints
        6. Login panel component
        7. React data binding
        8. Posting JSON data
      5. Summary
    21. 14. Let's Get Our Hands Dirty
      1. Board Sales application
      2. Angular 2 base application
        1. Unit testing
        2. State Mediator tests
        3. Login screen state
        4. Panel integration
        5. JSON data structure
        6. The BoardList component
        7. Unit testing HTTP requests
          1. Mocking Angular's Http module
          2. Using the mock Http module
        8. Rendering the board list
        9. Testing UI events
        10. Board detail view
        11. Applying a filter
        12. The login panel
        13. Application architecture
      3. Summary