Learn to integrate TypeScript with React, boost your productivity, and create apps that are easier to maintain.

React for Front-End Developers

Using TypeScript with React

## Assigning types to variables

TypeScript's **type annotations** allow us to assign types to variables. The syntax for a type annotation is as follows: put a colon followed by the variable name and type before any assignment. For example, the `score` variable is declared as a `number` in the code below:

```
let score: number;
```

Let's assign a couple of different values to `score`:

let score: number;
score = 10;
score = "ten";

TypeScript

If you run the code above, a type error is raised on line 3. Why is this?

This is because the TypeScript compiler has detected a type error. `score` is defined as a `number` but is being set to a `string`.

## Assigning types to functions

We can add type annotations to function parameters and to its return value.

The syntax for a type annotation on a parameter is just like type annotations on variables, a colon followed by the type is added after the parameter name. For example:

```
function add(a: number, b: number) {
  return a + b
}
```

In the above `add` function, both the `a` and `b` parameters are of type `number`.

We can also add a type annotation for the return value by adding a colon followed by the type after the parentheses of the function. For example:

```
function add(a: number, b: number): number {
  return a + b
}
```

We have defined that the return value in the above `add` function is of type `number`.

Types can also be added to function expressions in the same way. Update the following function to make it strongly-typed.

# Assigning types to variables

TypeScript's **type annotations** allow us to assign types to variables. The syntax for a type annotation is as follows: put a colon followed by the variable name and type before any assignment. For example, the `score` variable is declared as a `number` in the code below:

```
let score: number;
```

Let's assign a couple of different values to `score`:

# Assigning types to functions

We can add type annotations to function parameters and to its return value.

The syntax for a type annotation on a parameter is just like type annotations on variables, a colon followed by the type is added after the parameter name. For example:

```
function add(a: number, b: number) {
  return a + b
}
```

In the above `add` function, both the `a` and `b` parameters are of type `number`.

We can also add a type annotation for the return value by adding a colon followed by the type after the parentheses of the function. For example:

```
function add(a: number, b: number): number {
  return a + b
}
```

We have defined that the return value in the above `add` function is of type `number`.

Types can also be added to function expressions in the same way. Update the following function to make it strongly-typed.

In this lesson, we'll learn how to assign types to variables and functions using type annotations.

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

Using type annotations

Assigning types to variables #