TypeScript – Generics and Modules

In this post, we will see how to use Generics and Modules in TypeScript.


GENERICS

function AddNumber(val1: number, val2:number): string{
    return `${val1}+${val2}`;
}

function AddString(val1: string, val2:string): string{
    return `${val1}+${val2}`;
}


console.log(AddNumber(5,5));
console.log(AddString('Hello', 'world'));


If we run the script, this will be the result:


Now, using Generics, we will optimise the code:

function AddGeneric<T>(val1:T, val2:T): string{
    let result = `${val1}+${val2}`;
    return result;
}


console.log(AddGeneric(25,5));
console.log(AddGeneric('Damiano', 'Abballe'));


If we run the script, this will be the result:



MODULES

In TypeScript, a module is a file containing values, functions, or classes that we can make public in order to use them in other files.

[user.ts]

// using the key "export", we will be able to 
// use this class in another file
export class User{
    _username: string;
    _password: string;

    constructor(username: string, password: string)
    {
        this._username = username;
        this._password = password;
    }

    DisplayInfo(): string{
        return `Hello ${this._username}! Your password is ${this._password}`;
    }
}


[core.ts]

// using the key "import" we will be able to use the external file user.js
import { User } from './user.js';

const objUser = new User('UserName', 'Password');


// we get the HTML input element with the Id = txtInput
const inputEle = document.querySelector('#txtInput') as HTMLInputElement;

// we will show the user's info in the input element
inputEle.value= objUser.DisplayInfo();


[index.html]

<html>
    <head></head>
    <body>
        <input type="text" id="txtInput" value="pippo" style="width: 300px;">
        <!-- we have to insert 'module', because in core.js we use an external module --> 
        <script type="module" src='core.js'></script>
    </body>
</html>


Now, if we compile the file and we open the index.html with a browser, this will be the result: