18
loading...
How to add properties to function in 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.// 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,
// 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?.
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,
// 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,// 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,
// 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,
// 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.
That's all 😃!
18