Back To Module Home

Using TypeScript with React

0% completed

Why Typescript?

Understanding TypeScript

Understanding the benefits of TypeScript with React

Using Basic Types

Understanding the types in JavaScript Using type annotations Understanding type inference Understanding the any type Understanding and using the void type Using the never type Using the unknown type Using type assertions Quiz

Creating Types

Creating a strongly-typed array Creating a strongly-typed tuple Creating a strongly-typed object Creating type aliases Creating interfaces Creating union types Creating intersection types Understanding type compatibility Quiz

Working with Generic Types

Using some standard generic types Creating generic functions Creating generic interfaces Creating generic type aliases Creating generic classes Quiz

Creating Strongly-typed Function Component Props

Specifying a type for function component props Specifying a prop as optional Specifying a default for a function component prop Specifying a type for an object prop Specifying a type for a function prop Quiz

Creating Strongly-typed Function Component State

Creating strongly-typed function component states with useState Creating strongly-typed function component state with useReducer Quiz

Creating Strongly-typed Class Components

Creating strongly-typed class props Creating strongly-typed class state Using access modifiers Quiz

Creating Strongly-typed Component Events and Event Handlers

Creating strongly-typed event handlers Creating strongly-typed events Quiz

Creating Strongly-typed Context

Creating a simple strongly-typed context for function components Creating a complex strongly-typed context for function components Consuming a context in a strongly-typed class component Quiz

Creating Strongly-typed Refs

Creating strongly-typed refs in function components Creating strongly-typed refs in class components Quiz

Creating React Projects with TypeScript using Create React App

Creating a basic project Configuring linting and adding autoformatting Running tests and producing a production-ready build Quiz

Creating a React and TypeScript Project Manually

Creating a basic project Adding React and TypeScript Adding Babel Adding code linting and autoformatting Adding Webpack Adding npm scripts Quiz

...

/

Quiz

Quiz

This quiz will test what you have learned about TypeScript and its benefits.

Why TypeScript?

1.

Is the following code valid TypeScript?

const firstName = "Bob";
const surname = "Peters";
const fullName = `${firstName} ${surname}`;

A.

Yes

B.

No

1 / 5

Congratulations! That’s ...