Learn TypeScript 3 by Building Web Applications

Book description

Learn TypeScript and many of its features by building state of art web applications from scratch with the help of modern tooling, frameworks, and libraries

Key Features

  • Create modern Web applications to help businesses around the world benefit from better quality applications
  • Learn the latest features of TypeScript 3 and use them wisely
  • Explore TDD practices, OOP techniques, and industry best practices to create high-quality and modular apps

Book Description

TypeScript is a superset of the JavaScript programming language, giving developers a tool to help them write faster, cleaner JavaScript. With the help of its powerful static type system and other powerful tools and techniques it allows developers to write modern JavaScript applications.

This book is a practical guide to learn the TypeScript programming language. It covers from the very basics to the more advanced concepts, while explaining many design patterns, techniques, frameworks, libraries and tools along the way. You will also learn a ton about modern web frameworks like Angular, Vue.js and React, and you will build cool web applications using those. This book also covers modern front-end development tooling such as Node.js, npm, yarn, Webpack, Parcel, Jest, and many others. Throughout the book, you will also discover and make use of the most recent additions of the language introduced by TypeScript 3 such as new types enforcing explicit checks, flexible and scalable ways of project structuring, and many more breaking changes.

By the end of this book, you will be ready to use TypeScript in your own projects and will also have a concrete view of the current frontend software development landscape.

What you will learn

  • Understand and take advantage of TypeScript's powerful Type System
  • Grasp the key concepts and features of Angular, React, Vue.js, and NestJS
  • Handle asynchronous processes using Promises, async/await, Fetch, RxJS, and more
  • Delve into REST, GraphQL and create APIs using Apollo
  • Discover testing concepts, techniques, and tools like TDD, BDD, E2E, Jest
  • Learn Object-Oriented and Functional Programming concepts and leverage those with TypeScript
  • Explore design practices and patterns such as SOLID, MVC, DI and IoC, LoD, AOP, and more

Who this book is for

This book is for software developers who are willing to discover what TypeScript is and how to leverage it to write great quality software. Developers that are already familiar with TypeScript will find this book useful by learning the languages featured introduced by most recent releases. Basic knowledge of the JavaScript programming is expected.

Table of contents

  1. Title Page
  2. Copyright and Credits
    1. Learn TypeScript 3 by Building Web Applications
  3. Dedication
  4. About Packt
    1. Why subscribe?
  5. Foreword
  6. Contributors
    1. About the authors
    2. About the reviewers
    3. Packt is searching for authors like you
  7. Preface
    1. Who this book is for
    2. What this book covers
    3. To get the most out of this book
      1. Download the example code files
      2. Download the color images
      3. Conventions used
    4. Get in touch
      1. Reviews
  8. Introduction to TypeScript
    1. TypeScript in a few words
    2. JavaScript
      1. JavaScript's history in a nutshell
      2. ECMAScript
      3. ECMAScript evolution and support
      4. JavaScript gotchas
    3. How can TypeScript help?
      1. Enhanced JavaScript
      2. Future JavaScript today
      3. Static typing
      4. Structural typing
      5. Types for JavaScript libraries
      6. .NET and Java developers will feel at home
    4. What you'll need to install
      1. Text editor
      2. Version control system
      3. Shell
      4. JavaScript runtime
      5. Package manager
      6. TypeScript
    5. Installing VS Code
      1. Windows
      2. Windows (shell)
      3. Linux (GUI)
      4. Linux (shell)
      5. Extensions
    6. Installing and configuring Git
      1. Windows
      2. Linux (shell)
      3. Configuring git
    7. Downloading the book samples
    8. Installing Node.js and npm
      1. Windows
      2. Git BASH
      3. Linux (shell)
    9. Updating npm
      1. Linux
      2. Windows
    10. Installing TypeScript
    11. Hello world with TypeScript
      1. Creating the project
      2. Hello (Type/Java)Script!
    12. Compiling manually using the TypeScript compiler
    13. Variables declaration
      1. Basic TypeScript types
      2. A tiny bit of type safety can't hurt
    14. Summary
    15. Further reading about ECMAScript
  9. Building TodoIt - Your Own Web Application with TypeScript
    1. What will you build?
    2. Creating the project using npm
    3. Introducing npm
      1. package.json
      2. Installing dependencies with npm
      3. Installing dependencies with npm and package.json
      4. The node_modules folder content
      5. Updating dependencies with npm
      6. package-lock.json
      7. Defining and executing npm scripts
      8. When not to install packages globally
    4. Adding TypeScript to the project
    5. Configuring the TypeScript compiler
    6. Creating the TodoIt application
      1. Opening the project in VS Code
      2. Defining the basic application structure
      3. Leveraging VS Code support for TypeScript
      4. Building from the Terminal
      5. Using Browsersync to refresh automatically
      6. Implementing the user interface
      7. Loading the TodoIt code and checking the browser console
      8. Creating the todo list with TypeScript arrays
      9. Getting hold of inputs and casting using the as operator
      10. Adding todo items to the list
      11. Listing existing todo items using lambda expressions
      12. Listing existing todo items using loops
      13. Filtering existing todo items using the ES2015 TypeScript support
      14. Removing a single todo item
    7. Debugging your code in the web browser
    8. Debugging your code in VS Code
    9. Generating source maps for easier debugging
    10. Summary
  10. Improving TodoIt with Classes and Interfaces
    1. About programming paradigms
    2. Basic OOP principles and nomenclature
      1. Encapsulation and classes
      2. Abstraction
      3. Inheritance and abstract classes
      4. Interfaces
      5. Polymorphism
      6. Composition
      7. Composition over inheritance
    3. Bonus: UML
      1. Class diagrams
    4. JavaScript and OOP
    5. Overview of the TypeScript support for OOP
    6. TypeScript classes
      1. Basics
      2. Bonus: How TypeScript converts classes to JavaScript
      3. Fields, methods, visibility, and constructors
      4. Inheritance
    7. Fluent APIs
    8. Custom types
      1. Inline types
      2. Type aliases
    9. TypeScript interfaces
      1. Defining contracts
      2. Naming custom types using interfaces
      3. Extending interfaces
      4. Interfaces only exist at compile time
      5. Interfaces versus type aliases and inline types
      6. Interfaces versus classes
    10. Starting point
    11. Designing the domain model of TodoIt v2
      1. First proposal
      2. Single responsibility principle (SRP)
      3. Law of Demeter (LoD)
      4. Open/closed principle
      5. Using the Model View Controller (MVC) design pattern
    12. Implementing the new domain model
      1. Creating the TodoItem class
      2. Creating the TodoList class
      3. A note about TypeScript's ReadonlyArray
    13. Implementing the view
      1. Creating the TodoListView interface
      2. Implementing the TodoListView interface
    14. Implementing the controller layer
      1. Creating the TodoListController interface
      2. Implementing the TodoIt controller class
    15. Initializing TodoIt
    16. Isolating the utility function
    17. Updating the HTML page
    18. Job done, congratulations!
    19. Summary
  11. Leveraging Generics and Enums
    1. What will you build?
    2. Generics
      1. The benefits of using generics
      2. An example without generics
      3. An example with generics
      4. An example with generic functions and interfaces
      5. An example with classes
      6. Generic constraints
    3. Enums
      1. Numerical enums
      2. String enums
      3. const enums
    4. The never keyword
    5. String literal types
    6. Union and intersection types
    7. Type guards
      1. The typeof keyword
      2. The instanceof keyword and the Visitor pattern
      3. User-defined type guards and the is operator
      4. And more on type guards
    8. Creating the project
    9. Designing the model
      1. The core domain model
      2. High-level design – first proposal
      3. The service layer design pattern
      4. High-level design – second proposal
    10. Implementing the domain model
    11. Defining the media service interface
    12. Storing data on the client side
      1. LocalStorage and SessionStorage
      2. IndexedDB
    13. Implementing the media service
      1. Library choice
      2. Introduction to the Promise API
      3. TypeScript type definitions (typings)
      4. Adding localForage to the project
      5. Service implementation
      6. Handling serialization/deserialization
      7. Installing class-transformer and reflect-metadata
      8. Adding class-transformer decorators to domain classes
      9. Implementing the saveMediaCollection method
      10. Implementing the loadMediaCollection method
      11. Implementing the getMediaCollectionIdentifiersList method
      12. Implementing the removeMediaCollection method
    14. Implementing the view
      1. CSS
      2. HTML page
    15. Defining the view interface
    16. Implementing the HTMLMediaManView class
      1. The base structure
      2. Implementing basic validation using the HTML Form Validation API
      3. Why exceptions should not be used in this case
      4. Implementing the clearBookCollections method
      5. Implementing the displayErrorMessage method
      6. Implementing the renderBookCollection method
      7. Implementing the clearNewBookCollectionForm method
      8. Implementing the renderBook method
      9. Implementing the removeBookCollection method
      10. Implementing the getNewBookDetails method using keyof and typeof
      11. Bonus – the keyof operator
      12. Bonus – mapped types
      13. Implementing the clearNewBookForm method
      14. Implementing the removeBook method
    17. Creating the controller layer
      1. Defining the interface
      2. Implementing the MediaManController class
      3. Implementing the reloadBookCollections method
      4. Implementing the createBookCollection method
      5. Implementing the removeBookCollection method
      6. Implementing the createBook method
      7. Implementing the removeBook method
    18. Initializing the application
    19. Summary
  12. Coding WorldExplorer to Explore the Population of the World
    1. Understanding modules
      1. Why do we need modules?
      2. A bit of history about JavaScript modules
      3. The Revealing Module pattern
      4. The AMD and CommonJS modules
      5. UMD modules
      6. ES modules
    2. Loading and bundling modules
      1. Module loaders
      2. Bundlers
    3. Exploring TypeScript modules
      1. Export and import syntax
      2. Export statements
      3. Re-exports and barrels
      4. Barrels
      5. Bonus: Leveraging modules in MediaMan
      6. Ambient modules
      7. Configuring module transpilation
      8. Advanced concepts
      9. Namespaces
    4. Introducing module resolution
      1. Resolution strategies
      2. Resolving relative imports
      3. Resolving non-relative imports
      4. Configuring module resolution
    5. What will you build?
    6. Bonus: REST, RESTful and web APIs
    7. World Bank Open Data APIs
      1. Country information
      2. Indicators
      3. Population information
    8. Understanding the Fetch API
    9. Using the unknown keyword
    10. Chaining promises
    11. Understanding async/await and generators
      1. Asynchronous code that looks synchronous
      2. Compatibility
    12. Adding runtime type checks
      1. TypeScript non-goals
      2. Use cases
      3. io-ts
      4. io-ts examples
    13. Creating the project
      1. What's inside of the project skeleton?
    14. Designing the model
      1. Core domain
    15. Implementing the domain model
    16. Implementing the population service
      1. Defining the contract
      2. Creating the service implementation skeleton
      3. Implementing the getAllCountries method
      4. Implementing the getCountry method
      5. Implementing the getTotalPopulation method
      6. Implementing the other methods
      7. Creating the service layer barrel
    17. High-level design
      1. The controller package
      2. The view package
    18. Implementing the view layer
      1. HTML template
      2. Creating the view package
      3. Implementing the view model using a Data Transfer Object (DTO)
      4. Defining the view contract
      5. Installing Chart.js
      6. Creating the view implementation skeleton
      7. Implementing the displayCountries method
      8. Implementing the displayYears method
      9. Implementing getChartFormDetails and using the property shorthand notation
      10. Implementing the displayChart method
      11. Creating the view layer barrel
    19. Implementing the controller layer
      1. Creating the controllers package
      2. Defining the controller contract
      3. Creating the controller implementation skeleton
      4. Implementing the loadCountries method
      5. Implementing the loadYears method with generators
      6. Implementing the renderChart method
      7. Implementing the UnreachableCaseError class
      8. Creating the controller layer barrel
    20. Initializing our application
    21. Leveraging TypeScript path mappings
    22. Summary
    23. Further reading
      1. Modules
      2. Namespaces
      3. RESTful APIs
      4. The Fetch API
      5. Async and await
      6. io-ts and fp-ts
      7. Generators
  13. Introduction to Testing
    1. Introducing testing
      1. Code quality and testing
      2. Test types
        1. Functional tests
        2. Non-functional tests
      3. Testing approach and mindset
      4. Mocks and stubs
      5. The test pyramid
      6. Test automation and the Definition of Done (DoD)
      7. Test Driven Development
      8. Behavior Driven Development
      9. JavaScript testing libraries and tools
        1. Unit testing
        2. E2E testing and other tools
    2. Testing the population service of WorldExplorer
      1. Installing and configuring Jest
      2. Using npm script hooks
      3. Writing basic tests
      4. Testing asynchronous code
      5. Implementing positive and negative tests for getAllCountries
      6. Spying on methods with Jest
    3. Summary
  14. Discovering Angular, Angular Material, and RxJS
    1. Learning about modern web applications
      1. Server-side rendering
      2. SPAs
      3. Mobile-first and responsive web design (RWD)
      4. PWAs
      5. Modern web frameworks
    2. Understanding TypeScript decorators
      1. What are decorators?
      2. When are decorators useful?
      3. Aspect-Oriented Programming
    3. Exploring Angular
      1. What is Angular?
      2. Model View Whatever (MV*)
      3. Angular CLI
      4. Bonus: Schematics
      5. Bonus: Hello world with the Angular CLI
    4. Learning the Angular application architecture
    5. Exploring core Angular concepts
      1. Modules
      2. Components
      3. Component templates and data bindings
      4. Component bindings, HTML attributes, and DOM properties
      5. Defining component inputs and outputs
      6. Smart versus dumb components
      7. Component life cycle hooks
      8. Routing
      9. Directives
      10. Pipes
      11. Change detection
      12. Services
      13. DI
      14. Learning about injectors and the singleton design pattern
      15. A brief note about the root application injector
      16. Angular's bootstrap process
      17. Angular workspaces and the angular.json file
      18. Angular testing support and coverage reports
      19. Angular testing utilities
    6. Bonus: Angular Console
    7. Bonus: Augury
    8. Introducing RP and RxJS
      1. RP libraries
      2. RxJS basics − observables
      3. RxJS basics − observers
      4. RxJS basics − subscriptions
      5. RxJS basics − subjects
      6. RxJS basics − hot and cold observables
      7. RxJS basics − operators and marble diagrams
    9. Exploring Angular forms
      1. Template-based forms
      2. Reactive forms
    10. Introducing Material Design and Angular Material
    11. Summary
    12. Further reading
      1. PWAs
      2. TypeScript decorators
      3. RP and RxJS
      4. Angular
        1. CLI
        2. Router
        3. Modules
        4. Life cycle hooks
        5. Directives
        6. Components
        7. Pipes
        8. Services
        9. DI
        10. Change detection
        11. Forms
        12. Miscellaneous
  15. Rewriting MediaMan Using Angular and Angular Material
    1. What will you build?
    2. Creating the project
      1. Creating the project using the CLI
      2. Reviewing the application structure
        1. Extending another TypeScript configuration
        2. Folder structure and the LIFT principle
      3. Adding required dependencies
      4. Starting the development server
      5. Defining the application title
    3. Integrating the shared logic
    4. Implementing the book module
      1. Creating the module
      2. Implementing the bookCollection methods
      3. Implementing the book method
      4. Creating the book page component
      5. Adapting the book module
      6. Importing the book module
      7. Migrating the styles
      8. Implementing book creation
      9. Displaying book collections
      10. Adding the components to the page
    5. Revisiting the user interface with Angular Material
      1. Installing Angular Material
      2. Adding a toolbar
      3. Making the application responsive
      4. Revisiting the book page
      5. Improving the book creation component
      6. Improving the book list component
      7. Cleaning things up
    6. Summary
  16. Introducing Vue.js
    1. Vue.js
    2. Hello Vue!
    3. Understanding Vue concepts
      1. Directives
      2. Components and props
      3. Component prop types and validation rules
      4. The internal state of a component
      5. Listening to events that have been triggered by child components
      6. Single File Components (SFCs)
      7. Similarities with Angular
      8. Computed properties
      9. Watchers
      10. Filters
      11. Lifecycle hooks
      12. Mixins and pure functions
      13. Render functions
      14. Testing support
    4. Vue developer tools
    5. The Vue CLI
    6. Bonus – creating a new project using the Vue CLI
    7. TypeScript support
      1. Compiler configuration
      2. SFC with vue-class-component
      3. Splitting components into multiple files
    8. Dependency injection
      1. Built-in support
      2. TypeScript support
      3. Limitations
      4. Improving our code with ES2015 symbols
      5. Late binding and TypeScript definite assignment assertions
      6. The SL design pattern and InversifyJS
      7. SL using InversifyJS and reflect-metadata
      8. Better InversifyJS integration
    9. User interface component libraries
      1. Vuetify
      2. Buefy
      3. Quasar
      4. Element
      5. And many others
    10. Routing
    11. State management for modern web applications
      1. Naive approach – propagating state changes using custom events and props
      2. Broadcasting state changes
      3. Simple store pattern
      4. Redux and the unidirectional data flow
      5. A note about pure functions
      6. VueX
    12. Summary
    13. Further reading
      1. Vue
        1. General
        2. Components
        3. Computed properties
        4. Filters
        5. Mixins
        6. Render functions
        7. Testing support
        8. Router
        9. VueX
      2. TypeScript
        1. Symbols
  17. Creating LyricsFinder with Vue.js
    1. What will you build?
    2. High-level design and technical stack
      1. Schema
      2. Music service
      3. User interface
      4. TypeScript
    3. Getting started
      1. Creating the project
      2. Starting the development server
      3. Project structure and conventions
    4. Getting a MusixMatch API key
    5. Configuring InversifyJS
    6. Creating the home view
      1. Creating the skeleton
      2. Installing and configuring Vue Router
      3. Installing and configuring Element
    7. Implementing the basic layout of the application
    8. Creating the search component and using Vue slots
    9. Handling search using the MusicService
    10. Creating and using the songs list component
    11. Creating and using the lyrics view
    12. Summary
    13. Further reading
  18. Diving into React, NestJS, GraphQL, and Apollo
    1. Introducing React
      1. History
      2. Application architecture
      3. Numbers, numbers, numbers
      4. Evolution and support
    2. Understanding JSX
      1. Introduction
      2. JSX is not HTML
      3. Expressions
      4. Attributes
      5. Element trees
    3. React elements
    4. Components and props
      1. Class components
      2. Function components
      3. Object destructuring
      4. Component state
      5. Bonus: Improving rendering performance
      6. Lifecycle hooks
      7. Emitting and handling events
      8. Communication between distant components
      9. Controlling rendering
    5. Rendering lists
      1. Content projection/templating
    6. Exploring React hooks
      1. Defining state with the useState hook
      2. Array destructuring
      3. Handling side-effects with the useEffect hook
    7. The React developer tools
    8. Taking advantage of the Create React App (CRA) tool
      1. Creating a project using create-react-app
      2. File and folder structure
      3. Generating a TypeScript project
    9. Leveraging TypeScript with React
      1. JSX support through TSX files
      2. Class components with TypeScript
      3. Class components with internal state
      4. Types provided by React typings
      5. Class components accepting props
      6. Functional Components with TypeScript
      7. Introducing the prop-types library
      8. Going further with Functional Components
    10. Discovering NestJS in a jiffy
      1. Architecture
      2. CLI
      3. Modules
      4. Dependency injection
      5. Controllers and routing
      6. And everything else
    11. Introducing GraphQL
      1. Introduction
      2. Queries
      3. Schema, validation, and resolvers
      4. Apollo
      5. The NestJS GraphQL plugin
    12. Summary
    13. Further reading
      1. React
        1. General
        2. JSX
        3. CreateElement
        4. Components
        5. Function components
        6. State management
        7. Component lifecycle
        8. Context
        9. Hooks
        10. Create React App
        11. TypeScript and React
      2. NestJS
      3. GraphQL
      4. Apollo
      5. NestJS support for GraphQL
      6. TypeScript
        1. Object destructuring
        2. Array destructuring
  19. Revisiting LyricsFinder
    1. What will you build?
    2. High-level design and technical stack
      1. Schema
      2. Frontend – user interface with React Bootstrap
      3. Frontend – API calls
      4. Backend
      5. TypeScript
    3. Getting started
      1. Creating the project
      2. Project structure and conventions
      3. Backend – creating and configuring the application
      4. Starting the development servers
    4. Backend – adding the necessary dependencies
    5. Backend – implementing the GraphQL API with a first resolver
      1. Adding your MusixMatch API key
      2. Creating the song module
      3. Creating the song GraphQL resolver
      4. Creating the song DTO and decorating it for GraphQL
      5. Implementing the song resolver and leverage NestJS features
    6. Backend – importing and configuring the GraphQL NestJS module
    7. Backend – testing the API using the GraphQL playground
    8. Backend – adding support for artists and lyrics
    9. Frontend – installing React Bootstrap
    10. Frontend – installing React Router
    11. Frontend – creating the home view skeleton
      1. Creating the lyrics view skeleton
    12. Frontend – creating the search component
      1. Creating the search component skeleton
      2. Defining the component hierarchy
      3. Adding state and binding our input to it
      4. Clearing the input
      5. Adding the search handler
      6. Adding props to communicate with the outside world
    13. Frontend – integrating with the backend API
      1. Adding the required dependencies
      2. Defining GraphQL queries and generating code using Apollo
      3. Bonus: Tagged template literals
      4. Creating, configuring, and using an Apollo GraphQL client
    14. Frontend – creating and using the songs list component
      1. Creating the skeleton
      2. Defining the props
      3. Rendering the list of songs
    15. Frontend – loading lyrics and redirecting to the lyrics page
    16. Frontend – implementing the lyrics page
      1. Adding icons
      2. Creating an ArtistsList component
      3. Showing a message when there are no songs or no artists
      4. Adding loading indicators
    17. Summary
  20. What's Next?
    1. Retrospective – first half
    2. Retrospective – second half
    3. Where to go next and what to learn
    4. Summary
  21. Other Books You May Enjoy
    1. Leave a review - let other readers know what you think

Product information

  • Title: Learn TypeScript 3 by Building Web Applications
  • Author(s): Sebastien Dubois, Alexis Georges
  • Release date: November 2019
  • Publisher(s): Packt Publishing
  • ISBN: 9781789615869