Gain insights into integrating TypeScript with React to improve productivity. Learn about strongly-typed props, state, and events, and set up projects using Create React App, Webpack, and Babel.

If you are a React developer and want to build your React apps faster and more robustly, this course is for you. Learn to integrate TypeScript with React, boost your productivity, and create apps that are easier to maintain.

In this course, you will learn how to utilize TypeScript’s sophisticated type system to make React development faster and your code more readable. You will learn how to create component props, state, and events that are strongly-typed, allowing you to quickly understand what you can pass and helping you avoid mistakes.

Lastly, you will set up React projects with TypeScript. First, you will learn how to do this with the Create React App tool, then how to create a React and TypeScript project with Webpack and Babel.

Using TypeScript with React

We have a type within our codebase for a comment:

```
type Comment = {
  comment: string;
  email: string;
}
```

What generic type can we use with `Comment` that would create a type equivalent to the type below:

```
type ReadonlyComment = {
  readonly comment: string;
  readonly email: string;
}
```

We have a type within our codebase for a comment:
<pre><code>type Comment = {
 comment: string;
 email: string;
}
</code></pre>
What generic type can we use with <code>Comment</code> that would create a type equivalent to the type below:
<pre><code>type ReadonlyComment = {
 readonly comment: string;
 readonly email: string;
}
</code></pre>

It is already strongly-typed because TypeScript can infer the types of the function parameters and return value.

```
function countDistinct<ItemType>(itemToCount: ItemType, array: ItemType[]) {
 return array.filter(item => item === itemToCount).length
}
```

```
function countDistinct(itemToCount: ItemType, array: ItemType[])<ItemType> {
 return array.filter(item => item === itemToCount).length
}
```

The function below counts the occurrences of an item in an array:

```
function countDistinct(itemToCount, array) {
  return array.filter(item => item === itemToCount).length
}
```

How can we make this strongly-typed?

The function below counts the occurrences of an item in an array:
<pre><code>function countDistinct(itemToCount, array) {
 return array.filter(item =&gt; item === itemToCount).length
}
</code></pre>
How can we make this strongly-typed?

We should use `ItemType[]` rather than using the generic array type, `Array<ItemType>` for the second parameter.

The generic parameters should come after the functions round brackets:

```
function remove(itemToRemove: ItemType, array: Array<ItemType>)<ItemType>: ItemType {
 return array.filter(item => item !== itemToRemove);
}
```

The return type has been specified incorrectly. It should be `ItemType[]` or `Array<ItemType>`. Alternatively, the return type could be removed to let TypeScript infer this.

We need to create a function to remove occurrences of an item from an array. It needs to be strongly-typed and work with arrays containing any primitive type. Here's our attempt:

```
function remove<ItemType>(itemToRemove: ItemType, array: Array<ItemType>): ItemType {
 return array.filter(item => item !== itemToRemove);
}
```

Can you identify the error in the above code?

We need to create a function to remove occurrences of an item from an array. It needs to be strongly-typed and work with arrays containing any primitive type. Here’s our attempt:
<pre><code>function remove&lt;ItemType&gt;(itemToRemove: ItemType, array: Array&lt;ItemType&gt;): ItemType {
 return array.filter(item =&gt; item !== itemToRemove);
}
</code></pre>
Can you identify the error in the above code?

```
interface User {
  id: string | number;
  name: string;
  email: string
}
```

```
interface <UserIdType>User {
 id: UserIdType;
 name: string;
 email: string
}
```

```
interface User<UserIdType> {
 id: UserIdType;
 name: string;
 email: string
}
```

We have the following interface which represents a user:

```
interface User {
  id: any;
  name: string;
  email: string
}
```

How can we improve this by removing the \`any\` type on the \`id\` property and letting the consumer of the interface supply its type?

We have the following interface which represents a user:
<pre><code>interface User {
 id: any;
 name: string;
 email: string
}
</code></pre>
How can we improve this by removing the `any` type on the `id` property and letting the consumer of the interface supply its type?

```
getNth(n: number) {
  return this.items[n];
}
```

```
getNth(n: number): ItemType[] {
  return this.items[n];
}
```

```
getNth(n: ItemType) {
  return this.items[n];
}
```

We need to extend the generic list class we created in the last lesson. As a reminder, here's the class:

```
class List<ItemType> {
 private items: ItemType[] = []; 

 add(item: ItemType) {
 this.items.push(item);
 }
}
```

We need to add a method called `getNth` which returns the array item at the *nth* position in the list. How could we implement this?

We need to extend the generic list class we created in the last lesson. As a reminder, here’s the class:
<pre><code>class List&lt;ItemType&gt; {
 private items: ItemType[] = []; 

 add(item: ItemType) {
 this.items.push(item);
 }
}
</code></pre>
We need to add a method called <code>getNth</code> which returns the array item at the nth position in the list. How could we implement this?

Working with generic types

Working with generic types

Test your knowledge on generic types with this quiz.

Why TypeScript?

Using basic types

Creating types

Working with generic types

Creating strongly-typed function component props

Creating strongly-typed function component state

Creating strongly-typed class components

Creating strongly-typed component events and event handlers

Creating strongly-typed context

Creating strongly-typed refs

Creating React projects with TypeScript using Create React App

Creating a React and TypeScript project manually

Putting everything together

Quiz