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

What are correct type annotations for creating an array of dates?

What are correct type annotations for creating an array of dates?

What will TypeScript infer the type of the `people` variable to be in the declaration below?
```typescript
let people = ["Paula", "Bob", "Sam"];
```

What will TypeScript infer the type of the <code>people</code> variable to be in the declaration below?
<pre><code class="language-typescript">let people = [&quot;Paula&quot;, &quot;Bob&quot;, &quot;Sam&quot;];
</code></pre>

We have a function below that takes in a varying number of message parameters and outputs them to the console. How can we strongly-type the `messages` rest parameter so that only `string` types can be passed?

```
function outputMessages(...messages) {
    messages.forEach(message => console.log(message));
}
```

We have a function below that takes in a varying number of message parameters and outputs them to the console. How can we strongly-type the <code>messages</code> rest parameter so that only <code>string</code> types can be passed?
<pre><code>function outputMessages(...messages) {
 messages.forEach(message =&gt; console.log(message));
}
</code></pre>

All 3 assigments will generate type errors because `point` is a constant.

Only the last assignment will generate a type error.

We have declared a `point` variable as follows:

```
const point = { x: 32, y: 77 };
```

Will the following assignment generate any type errors?

```
point.x = 40;
point.y = 80;
point.z = 10;
```

We have declared a <code>point</code> variable as follows:
<pre><code>const point = { x: 32, y: 77 };
</code></pre>
Will the following assignment generate any type errors?
<pre><code>point.x = 40;
point.y = 80;
point.z = 10;
</code></pre>

Create the following type alias:

```
type Person = { 
  firstName: string, 
  level: "high" | "Medium" | "low" 
};
```

We can then use `Person` in type annotations for variables that require this type.

Continue to use the following as the type annotation:

```
{ firstName: string, level: "high" | "Medium" | "low" };
```

Create the following interface:

```
interface Person { 
  firstName: string;
  level: string;
};
```

We can then use `Person` in type annotations for variables that require this type.

We have declared a `person` variable as an object with `firstName` and `level` properties as follows: 

```
let person: { firstName: string, level: "high" | "Medium" | "low" };
```

We want to use this type in several places in our codebase. What's the best way to do this? 

We have declared a <code>person</code> variable as an object with <code>firstName</code> and <code>level</code> properties as follows:
<pre><code>let person: { firstName: string, level: &quot;high&quot; | &quot;Medium&quot; | &quot;low&quot; };
</code></pre>
We want to use this type in several places in our codebase. What’s the best way to do this?

Are the `Dog` and `Apple` types structurally equivalent?

```
type Animal = {
    name: string;
}
type Dog = Animal & { size: "small" | "large" }

interface Fruit {
    name: string;
}
interface Apple extends Fruit {
    size: "small" | "large"
}
```

Are the <code>Dog</code> and <code>Apple</code> types structurally equivalent?
<pre><code>type Animal = {
 name: string;
}
type Dog = Animal &amp; { size: &quot;small&quot; | &quot;large&quot; }

interface Fruit {
 name: string;
}
interface Apple extends Fruit {
 size: &quot;small&quot; | &quot;large&quot;
}
</code></pre>

The `action` variable has been declared as a constant object, which means you can't change its members.

The `type` property within the `Action` type has been declared as `readonly`, which it can't be changed after initially assigned.

You can't have readonly type properties in a type alias.

A type error is generated on the last line of the code below:

```
type Action = {
    readonly type: string;
}

const action: Action = { type: "loading" };
action.type = "loaded";
```

Why is this?

A type error is generated on the last line of the code below:
<pre><code>type Action = {
 readonly type: string;
}

const action: Action = { type: &quot;loading&quot; };
action.type = &quot;loaded&quot;;
</code></pre>
Why is this?

Look at the code below:

```
type Loaded = {
  readonly type: "loaded",
  readonly data: string[]
}
const loadedAction: Loaded = {
  type: "loaded",
  data: ["Fred", "Bob"]
};
loadedAction.data.push("Jane");
```

Will the line `loadedAction.data.push("Jane");` generate a type error?

Look at the code below:
<pre><code>type Loaded = {
 readonly type: &quot;loaded&quot;,
 readonly data: string[]
}
const loadedAction: Loaded = {
 type: &quot;loaded&quot;,
 data: [&quot;Fred&quot;, &quot;Bob&quot;]
};
loadedAction.data.push(&quot;Jane&quot;);
</code></pre>
Will the line <code>loadedAction.data.push(&quot;Jane&quot;);</code> generate a type error?

No, you can only have optional properties in interfaces.

Are the following two types both valid and structurally equivalent?

```
type Person = {
    name: string;
    dob?: Date;
}
```
```
interface Person {
    name: string;
    dob?: Date;
}
```

Are the following two types both valid and structurally equivalent?
<pre><code>type Person = {
 name: string;
 dob?: Date;
}
</code></pre>
<pre><code>interface Person {
 name: string;
 dob?: Date;
}
</code></pre>

`interface Coords {
    x: number;
    y: number;
}`

We need to create a tuple type to hold x and y coordinates. What is the correct type definition for this?

We need to create a tuple type to hold x and y coordinates. What is the correct type definition for this?

Creating types

Creating types

Well done, we are really getting to grips with TypeScript now!

In the next chapter, we will learn how to make our TypeScript types more reusable.

This quiz will test what you have learned about creating types in TypeScript.

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