The functions in Typescript

Typescript by default inferred into the function return type. That’s means if return a boolean the return type will be a boolean and if not the signature is void.

function Auth() {
    return true;
}

function Auth() {
    console.log("hello")
}

return types

Typescript allows setting a primitive or typescript into the return Type. Set a type: in the end and the compiler the function can all typescript supported type like boolean.

function authenticateUser(user: User) : boolean {
 return true;
}

void type

The void type is used in function wich don’t return any value and the compiler will fail if our code return a value.

function logMessage(): void{
    console.log("message completed.")
}

Using function as type

The function is a type in typescript and can be use for variable declaration. it is useful to change actions or behaviors in our code.

For example, we create a Class for handle Authentication, it has a property onComplete by default it shows a console log but we want onComplete, execute our code.

export default class Authentication {
    public onComplete: Function = this.greetingUser;
    private referralUrl: string = "/home";
    constructor() {}
    private greetingUser(url: string): void {
        console.log(`Thanks! go to ${this.referralUrl}`);
    }
    loginProcess(user: string, password: string) {
        if (user == "dany" && password == "1234") {
            return this.referralUrl;
        }
    }
}

We can import and from our app asign to onComplete property a function to execute if we dont want the default behavior exposed by Authentication.

import Authentication from "./Authentication";

class App {
    userLogin(name: string, password: string) {
        let auth = new Authentication();
        auth.onComplete = this.googleSignIn;
        auth.onComplete(auth.loginProcess(name, password));
    }

    googleSignIn(url: string): void {
        console.log(`Please go to  ${url}`);
    }

    appleSignIn(user: string, role: string): void {
        console.log(`Hello ${user} , your ${role}`);
    }
}

const app = new App();

app.userLogin("dany", "1234");
[nodemon] starting `node .\app.js`
Please go to  /home

Works like a charm!!! the function googleSign has been executed and get the only parameter return by loginProcess.

.. But the return of Authentication return a single parameter, what happens if we assign a function that expects 2 parameters like appleSignIn?

[nodemon] starting `node .\app.js`
Hello /home , your undefined

Dammm!!
The function type only check if is a function dont check the parameters or the return type.

The arrow function force to asign a function that fit with the signature and return.

Change the type from function to arrow function with the return type (optional) or create your own type for example OnCompleteAction.

type OnCompleteAction = (name: string) => void;
export default class Authentication {
    public onComplete: OnCompleteAction = this.greetingUser;
    private referralUrl: string = "/home";
    constructor() {}
    private greetingUser(): void {
        console.log(`Thanks! go to ${this.referralUrl}`);
    }
    loginProcess(user: string, password: string): string {
        if (user === "dany" && password === "1234") {
            return this.referralUrl;
        }
        return "no access";
    }
}

The compiler will force you to assign a function with one single parameter.

function parameter

Hopefully, that will give you a bit of help with Function as Types and return types in Typescript. If you enjoyed this post, share it.