TypeScript for React developers
The open-source React library from Facebook is very popular. It's a great library for building large complex browser-based line of business applications. However, building large line of business applications with pure JavaScript is hard. Refactoring existing code or adding functionality can be difficult and requires a lot of testing.
TypeScript is a great open-source language from Microsoft. TypeScript is a strongly typed superset of JavaScript so relatively easy to get started with for JavaScript developers. The same is true for C#, Java or other developers used to strongly types languages who are switching to web technologies.
Combining React and TypeScript gives us a really powerful combination to build large browser-based applications. TypeScript has supported the React JSX syntax since version 1.6 and is fully supported by Create-React-App.
On the first day of this course you will learn how to get started with TypeScript, the typical tooling used and more advanced TypeScript features. During the second day you will use this knowledge and apply it to React development. We will not just look at pure React itself but also focus on popular 3rd party libraries like React Router.
Want to know more?
Would you like more information or a customized course for your company? Please contact me.
Target Audience
This course is intended for experienced React developers who want to use TypeScript and strong typing when building applications.
Modules and topics
This two-day course consists of 6 modules, each focusing on a specific topic. Each module consists of a lecture explaining the subject as well as a hands-on lab where each participant uses the technology to build an application.
TypeScript introduction
In this module we will cover the basics of the TypeScript language. We will take a look at what problem TypeScript tries to solve and why. You will learn how to install, configure and use the TypeScript compiler to start type checking and compiling your source code. We will cover how type inferencing works and how you can add type annotations. We will use classes, inheritance and interfaces to create our own custom types. We will explore how the type system works with structural typing. Finally, we will take a look at how generics are leveraged to make types more reusable.
Tooling for TypeScript developers
In this module we will explore the TypeScript tooling ecosystem. We will take a look at how Webpack is used to bundle TypeScript modules into a single bundle the browser can load. We take a look at using either Babel and the TS-Loader to configure Webpack. You will learn how to configure ESLint and TSLint to perform static analysis on your source code and warn you about bad coding practices. You will also learn how to use Prettier to ensure a consistent coding style. Finally, we will take a look at some more Visual Studio Code tooling that will make TypeScript developers more productive.
Advanced TypeScript
In this module you will learn more advanced TypeScript options. We will start with type aliases, union and intersection types. We will explore how to use mapped types to create a type based on another existing type or object. Next you will learn how to use tagged unions to enhance type checking and code correctness. We will also explore runtime type checking using custom type guards. You will also learn how to simplify asynchronous code using the async/await syntax and explore how this behaves at runtime. Finally, we will take a look at what the various strict options TypeScript has to offer and why you should use them.
Developing React applications using TypeScript
Developing React applications with TypeScript is a good way to add type safety to React components. In this module you will learn how to start writing React components in TypeScript. We will look at how to create both functional components with hooks as well as class-based components using TypeScript. You will also learn to use union types to make prop definitions more flexible.
Popular 3rd party React Libraries and TypeScript
While React is a very capable UI component library every application needs more. In this module we will take a look at some of the more popular libraries for React developers and how you might use them using TypeScript. We will explore libraries written in TypeScript containing type information. We will also look at libraries that don’t provide type information out of the box.
Unit testing React components with TypeScript and Jest
In this module we will explore how to create unit tests for React components. You will do this using TypeScript, Jest and React-Testing-Library. We will explore some best practices on how to write tests in TypeScript and make sure there are no type errors.
Prerequisite experience
- At least 6 months experience developing web applications with React and JavaScript
- Knowledge of using NPM packages
- Knowledge of Webpack with Babel