How to set types or function type expression for a function in TypeScript?

Originally posted here!

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

(parameterName: parameterType) => returnType;

TL;DR

// 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,

// 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,

// 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,

// 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,

// 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.

That's all 😃!

Feel free to share if you found this useful 😃.

---