Now we'll move on to typing functions.

We have an `addListener` function here:

```typescript
const addListener = (onFocusChange: unknown) => {
  window.addEventListener("focus", () => {
    onFocusChange(true);
  });

  window.addEventListener("blur", () => {
    onFocusChange(false);
  });
};
```

The type of `onFocusChange` that is passed in is currently `unknown`.

What we want it to be is a function that will take in a single boolean argument.

## Challenge

Your challenge is to visit <a href="https://www.typescriptlang.org/docs/handbook/2/functions.html" target="_blank" rel="noopener">the TypeScript Docs</a> and work out how to appropriately type the `onFocusChange` function.

TypeScript supports typing functions that are passed in as arguments, including the arguments that they take.

The answer here is pretty interesting.

You can declare a function type using this syntax:

```typescript
(isFocused: boolean) => void
```

The `isFocused` argument is a boolean, and we're returning `void`.

This syntax can be used inline like this:

```typescript
const addListener = (onFocusChange: (isFocused: boolean) => void) => {
```

Or it can be extracted to its own type like this:

```typescript
type FocusListener = (isFocused: boolean) => void;

const addListener = (onFocusChange: FocusListener) => {
```

## The Structure of a Function Type

The basic structure starts with the arguments and the return type, both of which can be whatever you want.

You can use `undefined` for the return type, but then your function has to actually return `undefined`.

For times when your function has no return value, you should use `void`.

## Using Function types

Here's an example of adding an `isGreat` boolean as an additional argument:

```typescript
type FocusListener = (isFocused: boolean, isGreat: boolean) => void;
```

Then whenever we called the `FocusListener` we would have to include parameters for both:

```typescript
const addListener = (onFocusChange: FocusListener) => {
  onFocusChange(true, true)
}
```

We can also use function types in the same way we're used to using other types. Just be aware that your return types match appropriately.

```typescript
const myFocusListener = (isFocused: boolean): void => {
  // TypeScript error that `{}` is unassignable to void
  return {}
}
```

Most of the time you're not going to need these types unless you're passing functions to other functions, or declaring the type of the function.

Specify the Type of a Function

0:00 The answer is pretty interesting. You can declare a function type using this syntax. Actually, if I go to the second solution, this second solution has extracted out to a type so it's a bit easier to read. We've got an isFocused argument to this function, which is a Boolean, and then we're returning void.

0:23 When you type a function here, if we just go from the top here, then the basic structure of this looks like this, where you have your arguments here and then you have the return type. If we wanted to, we can return, let's say, a string from here or an array of strings.

0:42 Then inside here, we would say const arrayOfStrings equals this. Then this will be typed as an array of strings. We change this to an array of numbers. There's our onFocusChange that we're passing into this other function. Then we get numbers here.

0:57 If your function returns nothing, you can either return undefined, or more likely, you should use void, because void is a special TypeScript type for expressing "This function returns absolutely nothing." If I just clear out some of this to just get that distinction a bit clearer.

1:16 If we wanted to return undefined here, and if I just add my isFocused Boolean back in, then we would have to actually return undefined from our function. Return undefined, and now it's happy with us. Whereas type void is not assignable to type undefined. If we use void, then it means we don't need to return anything from our function. That's why void is there.

1:39 Inside here, we can use all sorts of types that we've seen before. We can add multiple things if we want to. We can say isFocused, isGreat, which is a Boolean. Then every time we called onFocusChange here, we would also have to pass, "Is it great or not?" We can also use optional parameters here and do all of that fun stuff.

2:01 This is the basic syntax for how you declare a function type. This means, too, that we can just use this in the normal way that we used to with types by saying const myFocusListener is a FocusListener, and then you can just implement the type here.

2:18 If you return something which is not assignable to avoid, it's actually not going to yell at you because it treats that function as though it's returning void. What that means is you can pass anything to it and it's not going to care about it.

2:36 Most of the time, you're not going to need these types except when you're passing functions to other functions or trying to declare the type of a function. You can also do it here, too. It's usually a bit nicer just to say isFocused Boolean and then say void inside here, because if we return it now, then it's going to say type blur is not assignable to type void.

3:00 This syntax is really useful when you want to pass functions into other functions. Less useful when you want to declare a function from outside because it's a little bit less precise.

Typing Functions

0:00 Now, we come onto typing functions. We've got an addListener function here that we've created. What we're saying is we want to say onFocusChange. OnFocusChange is currently unknown. What we want it to be is a function which takes in a single argument, which is going to be a Boolean.

0:22 Now, what we really need to do is to be able to somehow work out how to type this to express our function for us. That's your challenge. It's to go into the TypeScript docs, work out how you type functions, and what this unknown should actually be typed as.

Get hands-on interactive practice with this free TypeScript tutorial and learn the foundational knowledge and skills you need to become a TypeScript Wizard.

In this TypeScript tutorial you will:

* Learn to type variables, functions, and errors
* Become familiar with the TypeScript documentation
* Gain experience with modern TypeScript tooling

[Start now](https://totaltypescript.com/tutorials/beginners-typescript/implicit-any-type-error), and see why TypeScript’s an essential tool for modern web developers!

<Testimonial author={{name: "David Stinemetze", image: "https://cdn.sanity.io/images/z9io1e0u/production/6b24aef92c60f25c88fd8da44e97a1a47cb64e7b-150x150.png"}}>The Beginner’s course is fantastic. Very well explained, and easy to navigate through. I went through it in preparation for the <a href="https://totaltypescript.com/workshops" target="_blank" rel="noopener">extra paid workshops</a>, just to ensure I had a solid foundation and even then I learned some new things. Thanks Matt!</Testimonial>

## Instructions

This Beginner’s TypeScript tutorial is split into several exercises. Each features a `problem` that encourages you to take an active, exploratory learning approach to finding a `solution`.

To attempt a solution, you’ll need to:

1. Watch and read the `problem` introduction.
2. Check out [the TypeScript docs](https://www.typescriptlang.org/docs/).
3. Search for relevant keywords.
4. Give it a go to see if it solves the problem (there may be more than one solution!)

Whether you succeed or get stuck, watch & read the `solution` and check out the included code.

### Prerequisites

You’ll need a working understanding of JavaScript.

### Running the Exercises Locally

Clone [the Beginner’s TypeScript Tutorial repo](https://github.com/total-typescript/beginners-typescript-tutorial), and use npm or yarn to install dependencies.

If you [follow this link to use gitpod](https://gitpod.io/#https://github.com/total-typescript/beginners-typescript-tutorial), you can work in a full VS Code coding environment running in your browser.

Follow the [instructions in the README](https://github.com/total-typescript/beginners-typescript-tutorial) for more.

Free interactive video tutorial that will help you get started with TypeScript.

Beginner's TypeScript Tutorial Repo

First thing’s first: dealing with the implicit ‘any’ type error.

Fix the Implicit 'Any' Error

The Implicit ‘Any’ Type Error

Not all of the functions you write will take primitive types. When you need to pass objects as parameters, there are a few different ways to type them properly.

Add Types to Object Params

Working with Object Params

TypeScript can’t tell by itself if your code will still work when object properties are missing. For these situations, you need to specify which are optional.

Denote an Optional Property

Set Properties as Optional

Just as we saw with object properties, function parameters can be set as optional as well.

Mark a Function Parameter as Optional

Optional Parameters

Assigning types to variables allows TypeScript to provide more useful error messages on the lines where they occur.

Make a Variable Conform to an Interface

Assigning Types to Variables

TypeScript allows us to constrain a property’s value to one of a set number of things. For example, a medal that could only be gold, silver, or bronze.

Delineate Types a Value Can Be

Constraining Value Types

Arrays are one of the most common data structures in development. In this lesson, find out how they are represented in TypeScript.

Two Ways to Represent Arrays

Working with Arrays

Being strict about what is returned from your functions ensures that your code is safe on the inside as well as the outside.

Annotate a Function to Specify its Return Type

Function Return Type Annotations

Almost every web application involves making API calls. But how can we tell TypeScript what to expect when we’re expecting data?

Update Return Type Annotations for Async Functions

Typing Promises and Async Requests

One of the most crucial TypeScript concepts to understand is how type arguments work with certain functions and constructors.

Pass a Type Argument to Restrict Potential Types

Passing Type Arguments

Seeing “index” in a type error message usually refers to the key of an object. In this lesson are a few techniques for properly typing dynamic object keys.

Techniques for Typing Dynamic Object Keys

Assigning Dynamic Keys to an Object

TypeScript offers powerful features for narrowing down branches when working with third party APIs or functions that support data in different forms.

Change Function Returns Based on Type

Narrowing Down Union Types

When using a try-catch in TypeScript, it’s important that you type the error appropriately. There are a few different techniques to accomplish this.

Techniques for Coercing an Unknown Type

Typing Errors in a Try-Catch

Interfaces can inherit properties from other interfaces. This allows us to DRY out our code and have a neater way to work with complex data models.

Extend Interfaces From Other Interfaces

Inheriting Interface Properties

TypeScript allows for composing types together to create new types. This is useful when returning data that is a combination of multiple different types.

Combine Inline or at the Type Level

Combining Types to Create New Types

TypeScript provides us with tools for being more selective when creating new types based on others.

Two Techniques for Creating New Types Based on Others

Selectively Construct Types from Other Types

TypeScript supports typing the returns from asynchronous functions– great for real world processes like fetching from databases or other third-party APIs.

Transcript

Typing Functions

Transcript