Generics basics

Generics basics

Click here to play with codes

Click her to play with interface codes

If you use one of the programming languages like Java, Typescript, Swift or similar OOP languages then you know having generics capability is very helpful in a large project.

I’ll play with Typescript example that it is used in Angular framework, consider the following function, license ().

No alt text provided for this image

The license function is responsible to return the argument passed in. It is obvious that string type is assigned to both argument and return type, but this function is not expandable or generic! I can replace the string to typescript ‘any’, however, the ability to define which type should I expect to return then it is lost. Good news, using generics will resolve the issue and look at the function license again.

No alt text provided for this image

I added ‘<T>’ after the name of the function license, the angled brackets ‘< >’ with type variable ‘T’ are turning the typescript license function to a generic function. The ‘type variable’ is known as a ‘type parameter’ and generic parameter. I can use any name but I am following the typescript convention by using ‘T’.

I’ll add another type to license function and it works fine and it is still arg0 is the return parameter.

No alt text provided for this image

Oh, how about if I wanted to return an object with the two types? Yes of course, here I’ll use ‘tuple’ to do the job. The tuple should be familiar to typescript and swift programming languages and it is very useful. This is the change on my generic function license for returning two objects. Cool

No alt text provided for this image

The license function is now capable to return a ‘tuple’ containing a ‘T’ and ’V’ arguments. Well, there is another way to return more than one object with generics. That is using the ‘interface’ to return the types. OK, I’ll create a generic license interface, like this:

No alt text provided for this image

The above interface can be used as the return type of license() and fulfill the requirement. This way it is more readable for larger scale programs.

No alt text provided for this image

The license() function is passing types ‘T’ and ‘V’ into the function and License interface which provides the return types in reference to the argument types. That is cool.

 There is also generic class. The typescript generic class ensures the data types are used consistently within the class objects. The class generic syntax is similar to what I have shown here, so here is a quick sample:

No alt text provided for this image

The generic classes works on instance side and static members are not using the class generic type parameter.

That is it for a quick introduction to typescript generics. for more info: typescript

To view or add a comment, sign in

More articles by 🅽🅰🆂🅴🆁 ‘

  • A quick look at Widgets

    If you own an iPhone then installing iOS 14 opens the door for Widgets. This version now includes adding Widgets into…

  • Angular framework for your next enterprise project

    Some benefits of Angular framework for your next enterprise project 1- Using RxJS library, the reactive programming…

  • Little on Flux and Redux

    Five (5) minutes reading. I have been using JavaScript (JS) for many years in building applications.

  • Reactive Extensions for JavaScript

    I am sure you have heard of Reactive Extensions for JavaScript ( RxJS ) if you are familiar with Angular, EmberJS…

  • Angular 7 CLI

    The Angular framework is constantly evolving and improving fantastically. It has to do with the quick changes in…

    2 Comments
  • Parent listens for child event

    Angular @Output provides a way for a child component to emit events to its parent component with the help of…

  • Components interactions

    Angular components are the basic block codes for client web applications. They are the User Interface (UI) elements…

  • Working with CORS request header

    JavaScript web programming is growing fast and it is getting better over the years. However the Cross-Origin Resource…

    2 Comments
  • Angular and threeJS

    Note: The raw dragon COLLADA file is more than 8 MB and Github may not have the bandwidth to show it. Please try…

  • VR view with threejs JavaScript API

    Demo: VR view of Waneka lake Codes:github JavaScript is a powerful tool for developing and implementing web apps…

Explore content categories