Code Quality With TypeScript

a. Introduction to TypeScript and type safety

Introduce the idea of static type checking and show how it improves code quality. Write an example code covered with the typings, list all primitives and explain when TypeScript infers the types.

b. Setup with Babel & TSlint

The goal here is to show participants how to add a TypeScript and TSlint to the new project or an existing codebase. We present different ways of using TypeScript in the project, first as a global CLI with tsc and finally as a local dependency with types stripped from the bundle by Babel.

c. Configuring TypeScript

Explain basic TypeScript configuration. Discover tsconfig.json file syntax and dive deeper into each of its sections. We’ll teach you how to ignore specific directories and what the cons of that are. At the end we’ll show how to add typings for some libraries using `@types`.

d. Incremental adoption

Adding a TypeScript to an existing codebase. We’ll introduce the concept of incremental adoption and show how to gradually develop a well-typed codebase.

e. Basic type annotations

In this section we’ll cover all basic types, we’ll go through arrays, tuples and enums. We’ll teach participants the difference between any and unknown or undefined and null. After that, we’ll focus on strict types and show the different ways of typing Objects and Functions.

f. Advanced types and utilities

The advanced ways of using TypeScript that includes using generic, union and intersection types will be presented to the audience.

g. React specific typings

Typing Components and Higher-Order Components with TypeScript. We’ll show how to support event handlers and reference functions. At the end, we’ll show how to type React’s children and explain the type difference between Element and Component.