How to set types or function type expression for a function in TypeScript?
Tags: typescript
Published: 2022-08-19 23:43:25

---
  title: How to set types or function type expression for a  function in TypeScript?
  published: true
  tags: TypeScript
  date: Sat Aug 20 2022 05:13:25 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/set-types-or-function-type-expressions-for-functions-typescript
  cover_image: https://melvingeorge.me/_next/static/images/main-90b918e4d761e006ac2c3e08ac7bd0c4.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/set-types-or-function-type-expressions-for-functions-typescript)
  
If you want to set the types or function type expressions for a function, you can write the variable name followed by the `:` symbol (colon symbol). After that, you can write an opening and closing bracket `()`. Within the brackets, you can write the parameter name followed by the `:` (colon) symbol and then the type of the parameter. Following the braces, you should write an assignment operator followed by a greater than symbol (`=>`) followed by the type of the value you want to be returned from the function call.

### Syntax for function type expression

```ts
(parameterName: parameterType) => returnType;
```

### TL;DR

```ts
// a variable that accepts a function
// where it needs to have a parameter called name of type string
// and should return a value of type string
let sayGreeting: (name: string) => string;

// make a function which satisfies the
// `sayGreeting` function type expression
// Thus the below assignment of a function
// is allowed ✅.
sayGreeting = (name: string) => {
  return `Hello ${name}`;
};

// call the function
const greeting = sayGreeting("John Doe");

// log the output
console.log(greeting); // Hello John Doe
```

For example, let's say we need to make a `function type expression` (aka type declaration for the entire function) where we need to have a parameter called `name` with a type of `string` and the function's return value should also be of `string` type.

So if we write a `function type expression` according to the above definition.

It may look like this,

```ts
// A simple function type expression
// where the function first parameter is name of type string
// and the return value should be of string type
(name: string) => string;
```

**Note that this is just a structure and not a function.**

The purpose of the above `function type expression` is to enforce the parameter types and the return types and not the logic of the function.

Now let's use the above function type expression use it as a type for a variable.

It can be done like this,

```ts
// a variable that accepts a function
// where it needs to have a parameter called name of type string
// and should return a value of type string
let sayGreeting: (name: string) => string;
```

Now that we have defined the function type expression for our `sayGreeting` variable let's now make a function that accepts the structure of the function type expression we defined above.

It can be done like this,

```ts
// a variable that accepts a function
// where it needs to have a parameter called name of type string
// and should return a value of type string
let sayGreeting: (name: string) => string;

// make a function which satisfies the
// `sayGreeting` function type expression
// Thus the below assignment of a function
// is allowed ✅.
sayGreeting = (name: string) => {
  return `Hello ${name}`;
};
```

We have made the function and satisfied the function type expression too.

Now let's call the `sayGreeting` function and pass the value of `John Doe` as an argument to the function and see the output.

It can be done like this,

```ts
// a variable that accepts a function
// where it needs to have a parameter called name of type string
// and should return a value of type string
let sayGreeting: (name: string) => string;

// make a function which satisfies the
// `sayGreeting` function type expression
// Thus the below assignment of a function
// is allowed ✅.
sayGreeting = (name: string) => {
  return `Hello ${name}`;
};

// call the function
const greeting = sayGreeting("John Doe");

// log the output
console.log(greeting); // Hello John Doe
```

Yay 🥳!. We have successfully made a function type expression for our function.

See the above code live in [codesandbox](https://codesandbox.io/s/set-types-or-function-type-expressions-for-functions-typescript-6txzb?file=/src/index.ts).

That's all 😃!

### Feel free to share if you found this useful 😃.

---