TypeScript – Generics and Modules

By | 21/04/2021

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


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

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

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('Damiano', 'Abballe'));

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


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.


// 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}`;


// 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();


        <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>

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

Leave a Reply

Your email address will not be published. Required fields are marked *