Skip to content

Interfaces in TypeScript



Once I already write about how to create and work with classes, next step is interfaces, a concept imported from C# and Java, and very useful for #TypeScript.

What are interfaces?

For those that haven’t studied computer science, interfaces can be a very abstract concept with “almost” no utility. That’s my case, but with a little of practice, you can notice how important interfaces are, and it’s one of the main features of TypeScript, becuase as you already know, Javascript has no classes, so neither interfaces.

Interfaces provide the ability to name and parameterize object types and to compose existing named object types into new ones. Class declarations may reference interfaces in their implements clause to validate that they provide an implementation of the interfaces.

It is a code contract that allow you:

  • Drive consistency across classes
  • Clarify function parameter and return types
  • Create custom function and array types
  • Define type definition files for libraries and frameworks

Consistency across classes

Consistency across classes is a desirable feature, specially when you are working in a team. This way, all classes that implements this interfaces must be igual (at least, thay must accomplish the code contract). This is very good.

Also, with interfaces you can define types requiered to functions, so errors reduce (not only in returned values but also the parameters assigned to the funciones). This job is done perfectly by interfaces, and it’s a good idea to use them if you are dealing with large apps.

Type definition files for libraries and frameworks

Related to type definition files for libraries and frameworks, the best you can do is navigate through , a very important website if you are using TypeScript and you are using libraries and frameworks. Why? Because in this web you can obtain these definitions (some one has done for you, BUT you need to reference them on your project). And this web is the place where these definitions are stored, updated and manteined!

If you open the definitions files, this libraries are only interfaces referencing the libraries and framework in Javascript, but for using it under TypeScript it is neccesary to join this definitions to your project. They are files with .d.ts. extensions, and the sooner or later that you end up using this files (in my case, there will be a entrance using jQuery with TypeScript).

Another important aspect of interfaces is Intellisense in your IDE, and for example, in CATS you can have help when using interfaces (also in other IDEs).

Interfaces are useful in TypeScript

Although I am starting with TypeScript for a few months now, I am using interfaces (when coding with C#, I never use them!), because the code contract allow me to write the right code, especting the types of data defined, and that is very good when writting large apps.

The same way as classes can be extended, interfaces can do it as well, and make them even more interesting. Also, you can use your defined types with returned values and with parameters.

So, if you are writting large apps, I recommend you to invest tome in learing interfaces (although for the compiler interfaces are iirelevant).

Writting interfaces

Although the interfaces are widely used in C #, I must admit that I have not used much. I don’t know if I will use them now using TypeScript, but I bet I do because interfaces can greatly facilitate the life of the developer: knowing the types required and returned by functions makes your life much easy, especially because Javascript is not typed.

The reality is that the interfaces serve only in typescript at the code level, since they have no action in implementation because the compiler ignores the interfaces relative to the transcription of Javascript code. The truth us that the compiler ignores interfaces when compiling to Javascript code.

<pre>interface IInterfaz{
	name: string;
	desc: string;

class test implements IInterfaz{
	name: string;
	desc: string;

Another feature that can be applied to the interfaces is the heritage, so that we can include also extends:

<pre>interface IInterfaz2 extends IInterfaz{
	category: string;

class test_2 implements IInterfaz2{</pre>
<pre>        name: string;
	desc: string;</pre>
<pre>        category: string; }</pre>

Let’s keep on learning TypeScript!

Manejando Datos Newsletter

Noticias, entradas, eventos, cursos, … News, entrances, events, courses, …

Gracias por unirte a la newsletter. Thanks for joining the newsletter.