Home > Web Front-end > JS Tutorial > Annotating Functions in Typescript

Annotating Functions in Typescript

Barbara Streisand
Release: 2024-12-23 12:27:35
Original
542 people have browsed it

Annotating Functions in Typescript

The most basic way of annotating a function in typescript is like this

function add(a: number, b: number): number{
 // logic
}

// or

const add = (a: number, b: number): number => {
    //logic
}
Copy after login
Copy after login

optional parameters are annotated with question marks param? like this

function optional(a: number, b?: number){
    console.log(a)
}
Copy after login
Copy after login

But what about callback functions, or functions where the type of the arguments and the return types are related (in that case, generic).


Function Values

Observe this JavaScript function

function multiplier(factor){
    return value => factor * value
}
Copy after login
Copy after login

so that we can use the function like this;

const n  = multiplier(6)
n(8) // 48
Copy after login
Copy after login

Function values are annotated in typescript like this

(param1: type, param2: type)=> type

// or

const add: (a: number, b: number)=> number = function (a, b){
    return a + b
}
Copy after login

So to annotate the multiplier function, we have

function multiplier(factor: number): (value: number) => number{
    return value => factor * value
}
Copy after login

Your IDE (preferably) VSCode, will automatically infer the type of value (to be number) in the function logic


Generic functions

This function annotation is wrong

function pickFirst(array: Array<T>): T{
    return array[0]
}
Copy after login

Naturally this throws an error that
Cannot find name T

therefore, the format of annotating generic functions is

function fnName <T,U>(param: T): U{
    //logic
}
Copy after login

Observe where the generic names were declared. so, to correctly annotate the function above;

function pickFirst<T>(array: Array<T>): T{
    return array[0]
}
Copy after login

Now that works.

But what about Generic functions that have function parameters.

For instance, we want to annotate a custom map function named myMap which was written like this in Javascript

function myMap(arr, fn){
    rreturn arr.map(fn)
}
Copy after login

We can annotate it like this

function myMap<Input, Output>(arr: Input[], fn: (item: Input, index?: number) => Output): Output[]{
    return arr.map(fn)
}
Copy after login

What we should note in the snippet above is that the fn function takes an item of the same type of the Input array and returns an Output type.

What about the static Array.from() method?

function myFrom<Type>(iterable: Iterable<Type>): Array<Type>{
    // logic
}
Copy after login

or the array.filter() method?

function myFilter<Input>(arr: Input[], fn: (item: Input) => boolean): Input[]{
    return arr.filter(fn)
}
Copy after login

Generic constraints

You can also constrain generic variables to types that have a particular property. For instance,

function pickInnerFirst<T extends {length: number}>(array: Array<T>): T{
    return array[0][0]
}
Copy after login

This function picks the very first element in a 2 dimensional array

This ensures that it only works for arrays and strings (mostly) in such a way that

pickOne([12, 20, 30]) // wont work.
Copy after login

We can also use interfaces

interface Lengthly{
    length: number;
}

function pickInnerFirst<T extends Lengthly>(array: Array<T>): T{
    return array[0][0]
}
Copy after login

Function Interfaces

In case you don't know, Functions are objects and they have properties

const add = (a, b) => a + b

console.log(add.toString()) //(a, b) => a + b

// also
console.log(Object.getPrototypeOf(add) == Function.prototype) //true
console.log(Object.getPrototypeOf(Function.prototype) == Object.prototype) //true
Copy after login

The second example indicated that the add function is a child of Object.prototype (even though its not a direct child) and therefore is an object.

Funny enough, you can attach properties to a function in JavaScript

function add(a: number, b: number): number{
 // logic
}

// or

const add = (a: number, b: number): number => {
    //logic
}
Copy after login
Copy after login

This snippet will return

function optional(a: number, b?: number){
    console.log(a)
}
Copy after login
Copy after login

Observe that at A we attached a property called description to the function which can only be possible with objects.

That is to conclude that;

Objects can be described with interfaces (normally). For functions, this is also possible. however, it is only something you should consider when you are adding special properties to your functions.

function multiplier(factor){
    return value => factor * value
}
Copy after login
Copy after login

At comment A is where we describe the arguments and return types of the function.

So, to annotate the earlier code in typescript,

const n  = multiplier(6)
n(8) // 48
Copy after login
Copy after login

Observe the way we used the interface in the shout function at A.


Why should I understand how to annotate functions in Typescript?

Well, it helps in building a much smarter type system which in turn reduces your chances of bugs. If you are building a library or a framework, you might have to use some or most of the concepts mentioned here.
If you are just using libraries, these concepts are not really necessary, even though they can give you a much deeper understanding of the libraries you are working with.

If you have any questions or there are mistakes in this writing, feel free to share them in the comments below ⭐

The above is the detailed content of Annotating Functions in Typescript. For more information, please follow other related articles on the PHP Chinese website!

source:dev.to
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template