How to add properties to function in TypeScript?
Tags: typescript
Published: 2021-12-05 00:00:00

---
  title: How to add properties to function in TypeScript?
  published: true
  tags: TypeScript
  date: Sun Dec 05 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/add-properties-to-functions-typescript
  cover_image: https://melvingeorge.me/_next/static/images/main-665470a035e6e03daf0129e8502582cc.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/add-properties-to-functions-typescript)
  
To add or attach properties to functions in TypeScript, one of the ways to do is to make a `type alias` and write the function signature (aka function call signature) and the property with its type you need to attach to the function inside the `type alias`.

### TL;DR

```ts
// type alias for `verifyAge` function
// with function signature and a property with its type
type VerifyAgeFunc = {
  (age: number): boolean;
  usedBy: string;
};

// the function itself that
// satisfies the above type alias
let verifyAge = <VerifyAgeFunc>((age: number) => (age > 18 ? true : false));

// add a property called `usedBy`
verifyAge.usedBy = "Admin"; // allowed ✅.
```

For example, let's say we need to have a function called `verifyAge` which needs to have a parameter called `age` with type `number`, and the return value of the function should be of type `boolean`. Adding type to a function can be done by defining a `function type expression`.

It may look like this,

```ts
// function type expression for verifyAge function
let verifyAge: (age: number) => boolean;
```

**To know more about adding types to a function in TypeScript See the article on [How to set types or function type expression for a function in TypeScript?](https://melvingeorge.me/blog/set-types-or-function-type-expressions-for-functions-typescript).**

Now that we have defined the `function type expression`, let's try to add a property called `usedBy` and try to set its value to a string of `Admin`.

Adding properties to the function has nothing to do with when we call or invoke the function but is used as extra information in the function.

It can be done like this,

```ts
// function type expression for verifyAge function
let verifyAge: (age: number) => boolean;

// the function itself that satisfies
// the above function type expression
verifyAge = (age: number) => (age > 18 ? true : false);

// try to add a property called `usedBy`
verifyAge.usedBy = "Admin"; // not allowed ❌. Property 'usedBy' does not exist on type '(age: number) => boolean'.
```

As you can see that TypeScript compiler won't allow adding a property to the `verifyAge` function and shows an error saying `Property 'usedBy' does not exist on type '(age: number) => boolean'.`.

This is because we have defined the signature for the function only and nothing else.

To add a property to the function we can use a `type alias` and define the function signature as well as the property with its type we need to use inside the `type alias`.

So first let's make a type alias called `VerifyAgeFunc` like this,

```ts
// type alias for `verifyAge` function
type VerifyAgeFunc = {
  // cool code here
};
```

Now inside the curly brackets, we can write the `function signature` as well as the property with its type separated by the `;` symbol (semi-colon).

It can be done like this,

```ts
// type alias for `verifyAge` function
// with function signature and a property with its type
type VerifyAgeFunc = {
  (age: number): boolean;
  usedBy: string;
};
```

**Note that we are not using the `=>` symbol (assignment with greater than symbol) combination after that parameter list brackets as we do it for `function type expression`.**

After defining the `VerifyAgeFunc` type alias, we can now use it as the type for the `verifyAge` function variable by casting the entire function using the `<>` symbol (angle brackets) and then writing the `VerifyAgeFunc` inside the brackets.

It can be done like this,

```ts
// type alias for `verifyAge` function
// with function signature and a property with its type
type VerifyAgeFunc = {
  (age: number): boolean;
  usedBy: string;
};

// the function itself that
// satisfies the above type alias
let verifyAge = <VerifyAgeFunc>((age: number) => (age > 18 ? true : false));

// add a property called `usedBy`
verifyAge.usedBy = "Admin"; // allowed ✅.
```

As you can see that adding the property of `usedBy` is now allowed by the TypeScript compiler since we have defined it in the `VerifyAgeFunc` type alias. Yay! 🥳.

See the above code live in [codesandbox](https://codesandbox.io/s/add-properties-to-functions-typescript-kiw0u?file=/src/index.ts).

That's all 😃!

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

---