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
- Title Page
- Copyright and Credits
- Dedication
- About Packt
- Foreword
- Contributors
- Preface
-
Introduction to TypeScript
- TypeScript in a few words
- JavaScript
- How can TypeScript help?
- What you'll need to install
- Installing VS Code
- Installing and configuring Git
- Downloading the book samples
- Installing Node.js and npm
- Updating npm
- Installing TypeScript
- Hello world with TypeScript
- Compiling manually using the TypeScript compiler
- Variables declaration
- Summary
- Further reading about ECMAScript
-
Building TodoIt - Your Own Web Application with TypeScript
- What will you build?
- Creating the project using npm
- Introducing npm
- Adding TypeScript to the project
- Configuring the TypeScript compiler
-
Creating the TodoIt application
- Opening the project in VS Code
- Defining the basic application structure
- Leveraging VS Code support for TypeScript
- Building from the Terminal
- Using Browsersync to refresh automatically
- Implementing the user interface
- Loading the TodoIt code and checking the browser console
- Creating the todo list with TypeScript arrays
- Getting hold of inputs and casting using the as operator
- Adding todo items to the list
- Listing existing todo items using lambda expressions
- Listing existing todo items using loops
- Filtering existing todo items using the ES2015 TypeScript support
- Removing a single todo item
- Debugging your code in the web browser
- Debugging your code in VS Code
- Generating source maps for easier debugging
- Summary
-
Improving TodoIt with Classes and Interfaces
- About programming paradigms
- Basic OOP principles and nomenclature
- Bonus: UML
- JavaScript and OOP
- Overview of the TypeScript support for OOP
- TypeScript classes
- Fluent APIs
- Custom types
- TypeScript interfaces
- Starting point
- Designing the domain model of TodoIt v2
- Implementing the new domain model
- Implementing the view
- Implementing the controller layer
- Initializing TodoIt
- Isolating the utility function
- Updating the HTML page
- Job done, congratulations!
- Summary
-
Leveraging Generics and Enums
- What will you build?
- Generics
- Enums
- The never keyword
- String literal types
- Union and intersection types
- Type guards
- Creating the project
- Designing the model
- Implementing the domain model
- Defining the media service interface
- Storing data on the client side
-
Implementing the media service
- Library choice
- Introduction to the Promise API
- TypeScript type definitions (typings)
- Adding localForage to the project
- Service implementation
- Handling serialization/deserialization
- Installing class-transformer and reflect-metadata
- Adding class-transformer decorators to domain classes
- Implementing the saveMediaCollection method
- Implementing the loadMediaCollection method
- Implementing the getMediaCollectionIdentifiersList method
- Implementing the removeMediaCollection method
- Implementing the view
- Defining the view interface
-
Implementing the HTMLMediaManView class
- The base structure
- Implementing basic validation using the HTML Form Validation API
- Why exceptions should not be used in this case
- Implementing the clearBookCollections method
- Implementing the displayErrorMessage method
- Implementing the renderBookCollection method
- Implementing the clearNewBookCollectionForm method
- Implementing the renderBook method
- Implementing the removeBookCollection method
- Implementing the getNewBookDetails method using keyof and typeof
- Bonus – the keyof operator
- Bonus – mapped types
- Implementing the clearNewBookForm method
- Implementing the removeBook method
- Creating the controller layer
- Initializing the application
- Summary
-
Coding WorldExplorer to Explore the Population of the World
- Understanding modules
- Loading and bundling modules
- Exploring TypeScript modules
- Introducing module resolution
- What will you build?
- Bonus: REST, RESTful and web APIs
- World Bank Open Data APIs
- Understanding the Fetch API
- Using the unknown keyword
- Chaining promises
- Understanding async/await and generators
- Adding runtime type checks
- Creating the project
- Designing the model
- Implementing the domain model
- Implementing the population service
- High-level design
-
Implementing the view layer
- HTML template
- Creating the view package
- Implementing the view model using a Data Transfer Object (DTO)
- Defining the view contract
- Installing Chart.js
- Creating the view implementation skeleton
- Implementing the displayCountries method
- Implementing the displayYears method
- Implementing getChartFormDetails and using the property shorthand notation
- Implementing the displayChart method
- Creating the view layer barrel
-
Implementing the controller layer
- Creating the controllers package
- Defining the controller contract
- Creating the controller implementation skeleton
- Implementing the loadCountries method
- Implementing the loadYears method with generators
- Implementing the renderChart method
- Implementing the UnreachableCaseError class
- Creating the controller layer barrel
- Initializing our application
- Leveraging TypeScript path mappings
- Summary
- Further reading
-
Introduction to Testing
- Introducing testing
- Testing the population service of WorldExplorer
- Summary
-
Discovering Angular, Angular Material, and RxJS
- Learning about modern web applications
- Understanding TypeScript decorators
- Exploring Angular
- Learning the Angular application architecture
-
Exploring core Angular concepts
- Modules
- Components
- Component templates and data bindings
- Component bindings, HTML attributes, and DOM properties
- Defining component inputs and outputs
- Smart versus dumb components
- Component life cycle hooks
- Routing
- Directives
- Pipes
- Change detection
- Services
- DI
- Learning about injectors and the singleton design pattern
- A brief note about the root application injector
- Angular's bootstrap process
- Angular workspaces and the angular.json file
- Angular testing support and coverage reports
- Angular testing utilities
- Bonus: Angular Console
- Bonus: Augury
- Introducing RP and RxJS
- Exploring Angular forms
- Introducing Material Design and Angular Material
- Summary
- Further reading
- Rewriting MediaMan Using Angular and Angular Material
-
Introducing Vue.js
- Vue.js
- Hello Vue!
-
Understanding Vue concepts
- Directives
- Components and props
- Component prop types and validation rules
- The internal state of a component
- Listening to events that have been triggered by child components
- Single File Components (SFCs)
- Similarities with Angular
- Computed properties
- Watchers
- Filters
- Lifecycle hooks
- Mixins and pure functions
- Render functions
- Testing support
- Vue developer tools
- The Vue CLI
- Bonus – creating a new project using the Vue CLI
- TypeScript support
- Dependency injection
- User interface component libraries
- Routing
- State management for modern web applications
- Summary
- Further reading
-
Creating LyricsFinder with Vue.js
- What will you build?
- High-level design and technical stack
- Getting started
- Getting a MusixMatch API key
- Configuring InversifyJS
- Creating the home view
- Implementing the basic layout of the application
- Creating the search component and using Vue slots
- Handling search using the MusicService
- Creating and using the songs list component
- Creating and using the lyrics view
- Summary
- Further reading
- Diving into React, NestJS, GraphQL, and Apollo
-
Revisiting LyricsFinder
- What will you build?
- High-level design and technical stack
- Getting started
- Backend – adding the necessary dependencies
- Backend – implementing the GraphQL API with a first resolver
- Backend – importing and configuring the GraphQL NestJS module
- Backend – testing the API using the GraphQL playground
- Backend – adding support for artists and lyrics
- Frontend – installing React Bootstrap
- Frontend – installing React Router
- Frontend – creating the home view skeleton
- Frontend – creating the search component
- Frontend – integrating with the backend API
- Frontend – creating and using the songs list component
- Frontend – loading lyrics and redirecting to the lyrics page
- Frontend – implementing the lyrics page
- Summary
- What's Next?
- Other Books You May Enjoy
Product information
- Title: Learn TypeScript 3 by Building Web Applications
- Author(s):
- Release date: November 2019
- Publisher(s): Packt Publishing
- ISBN: 9781789615869
You might also like
book
Learn React with TypeScript 3
Start developing modern day component based web apps using React 16, Redux and TypeScript 3 with …
book
TypeScript Quickly
TypeScript is JavaScript with an important upgrade! By adding a strong type system to JavaScript, TypeScript …
book
TypeScript Microservices
Build robust microservice-based applications that are distributed, fault tolerant, and always available About This Book Learn …
book
Hands-On Functional Programming with TypeScript
Discover the power of functional programming, lazy evaluation, monads, concurrency, and immutability to create succinct and …