An Interface
is a way to describe a data type , such as an object. Unlike an Interface
, Type
can name any data type, including primitive data types, unified data types, and intersect data types.
What are interfaces?
An Interface would look like this:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<span class="token keyword">interface</span> <span class="token class-name">Human</span> <span class="token punctuation">{</span> name <span class="token operator">:</span> string <span class="token punctuation">;</span> age <span class="token operator">:</span> number <span class="token punctuation">;</span> <span class="token function-variable function">speak</span> <span class="token operator">:</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">void</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">// Using an interface</span> <span class="token keyword">const</span> james <span class="token operator">:</span> Human <span class="token operator">=</span> <span class="token punctuation">{</span> name <span class="token operator">:</span> <span class="token string">'James'</span> <span class="token punctuation">,</span> age <span class="token operator">:</span> <span class="token number">30</span> <span class="token punctuation">,</span> <span class="token function-variable function">speak</span> <span class="token operator">:</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">'Hello, my name is James.'</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> |
Above we defined an Interface named Human
, and then used it to create a variable james
. Interfaces are useful in the way that we can always be sure that the objects we create have the same properties. And if we happen to create a variable with Interface Human
, with other Properties
, then TypeScript will show an error.
1 2 3 4 5 6 7 8 9 10 11 |
<span class="token comment">// Creating an interface that does not match the "Human" shape</span> <span class="token keyword">const</span> charlie <span class="token operator">:</span> Human <span class="token punctuation">{</span> name <span class="token operator">:</span> <span class="token string">'Charlie'</span> <span class="token punctuation">,</span> <span class="token comment">// This will display an error</span> <span class="token comment">// Type '{ name: string; run: () => void }' is not assignable to type 'Human'.</span> <span class="token function-variable function">run</span> <span class="token operator">:</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">'Running away!'</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
What is Type?
When creating a type
, you’re not actually creating a new Type, you’re creating a new name for a Type, that’s why it’s called type alias .
Before you get too confused, here is a similar example for you:
Ben has a laptop , but instead of calling it a laptop , he calls it Code Maker , because Ben is very fastidious and likes to call it cool.
1 2 3 4 5 6 7 8 9 10 11 12 |
type Laptop <span class="token operator">=</span> <span class="token punctuation">{</span> language <span class="token operator">:</span> string <span class="token punctuation">;</span> model <span class="token operator">:</span> string <span class="token punctuation">;</span> year <span class="token operator">:</span> number <span class="token punctuation">;</span> <span class="token punctuation">}</span> type CodeMaker <span class="token operator">=</span> <span class="token punctuation">{</span> language <span class="token operator">:</span> string <span class="token punctuation">;</span> model <span class="token operator">:</span> string <span class="token punctuation">;</span> year <span class="token operator">:</span> number <span class="token punctuation">;</span> <span class="token punctuation">}</span> |
As we can see above, the Properties of Laptop
and CodeMaker
are exactly the same. Why do we need to create another Type with the same Properties, just because Ben wants to call it “ Code Maker ” instead of laptop like everyone else? That’s not very fair.
John said: “If Ben calls his laptop Code Maker , then I want to call my laptop The Machine.”
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
type Laptop <span class="token operator">=</span> <span class="token punctuation">{</span> language <span class="token operator">:</span> string <span class="token punctuation">;</span> model <span class="token operator">:</span> string <span class="token punctuation">;</span> year <span class="token operator">:</span> number <span class="token punctuation">;</span> <span class="token punctuation">}</span> type CodeMaker <span class="token operator">=</span> <span class="token punctuation">{</span> language <span class="token operator">:</span> string <span class="token punctuation">;</span> model <span class="token operator">:</span> string <span class="token punctuation">;</span> year <span class="token operator">:</span> number <span class="token punctuation">;</span> <span class="token punctuation">}</span> type TheMachine <span class="token operator">=</span> <span class="token punctuation">{</span> language <span class="token operator">:</span> string <span class="token punctuation">;</span> model <span class="token operator">:</span> string <span class="token punctuation">;</span> year <span class="token operator">:</span> number <span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Now we have 3 different names that basically describe the same thing. Let’s simplify it by doing something with type
but interface
can’t do.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
type Laptop <span class="token operator">=</span> <span class="token punctuation">{</span> language <span class="token operator">:</span> string <span class="token punctuation">;</span> model <span class="token operator">:</span> string <span class="token punctuation">;</span> year <span class="token operator">:</span> number <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> type CodeMaker <span class="token operator">=</span> Laptop <span class="token punctuation">;</span> type TheMachine <span class="token operator">=</span> Laptop <span class="token punctuation">;</span> <span class="token keyword">const</span> bensLaptop <span class="token operator">:</span> CodeMaker <span class="token operator">=</span> <span class="token punctuation">{</span> language <span class="token operator">:</span> <span class="token string">'en'</span> <span class="token punctuation">,</span> model <span class="token operator">:</span> <span class="token string">'Macbook Pro'</span> <span class="token punctuation">,</span> year <span class="token operator">:</span> <span class="token number">2016</span> <span class="token punctuation">}</span> <span class="token keyword">const</span> johnsLaptop <span class="token operator">:</span> TheMachine <span class="token operator">=</span> <span class="token punctuation">{</span> language <span class="token operator">:</span> <span class="token string">'en'</span> <span class="token punctuation">,</span> model <span class="token operator">:</span> <span class="token string">'Dell XPS'</span> <span class="token punctuation">,</span> year <span class="token operator">:</span> <span class="token number">2018</span> <span class="token punctuation">}</span> |
Instead of declaring Laptop
3 times, Ben and John just created the type aliases
of Laptop
and called it whatever they wanted. And of course, although people call laptops by many different names, it is still a laptop after all. So the code below is perfectly valid.
1 2 |
<span class="token keyword">const</span> benAndJohnsLaptops <span class="token operator">:</span> Laptop <span class="token punctuation">[</span> <span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span> bensLaptop <span class="token punctuation">,</span> johnsLaptop <span class="token punctuation">]</span> |
Unlike an Interface declaration, which always introduces a named object type, a type aliases can give a name to any Type, including primitive data types, unified data types, and types. intersecting data.
We can also set type aliases for primitive data types , which is something the interface
cannot do. Take the following example:
1 2 3 4 5 |
type Age <span class="token operator">=</span> number <span class="token punctuation">;</span> <span class="token keyword">const</span> bensAge <span class="token operator">:</span> Age <span class="token operator">=</span> <span class="token number">21</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> johnsAge <span class="token operator">:</span> Age <span class="token operator">=</span> <span class="token number">31</span> <span class="token punctuation">;</span> |
Interface vs Type
Here is a quick breakdown of Interface and Type.
1. Both support inheritance, although the syntax is different
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<span class="token comment">// Interface extends interface</span> <span class="token keyword">interface</span> <span class="token class-name">Animal</span> <span class="token punctuation">{</span> age <span class="token operator">:</span> number <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">interface</span> <span class="token class-name">Dog</span> <span class="token keyword">extends</span> <span class="token class-name">Animal</span> <span class="token punctuation">{</span> <span class="token function-variable function">woof</span> <span class="token operator">:</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">void</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">// Type extends type</span> type Animal <span class="token operator">=</span> <span class="token punctuation">{</span> age <span class="token operator">:</span> number <span class="token punctuation">;</span> <span class="token punctuation">}</span> type Dog <span class="token operator">=</span> Animal <span class="token operator">&</span> <span class="token punctuation">{</span> <span class="token function-variable function">woof</span> <span class="token operator">:</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">void</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">// Interface extends type</span> type Animal <span class="token operator">=</span> <span class="token punctuation">{</span> age <span class="token operator">:</span> number <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> <span class="token keyword">interface</span> <span class="token class-name">Dog</span> <span class="token keyword">extends</span> <span class="token class-name">Animal</span> <span class="token punctuation">{</span> <span class="token function-variable function">woof</span> <span class="token operator">:</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">void</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">// Type extends interface</span> <span class="token keyword">interface</span> <span class="token class-name">Animal</span> <span class="token punctuation">{</span> age <span class="token operator">:</span> number <span class="token punctuation">;</span> <span class="token punctuation">}</span> type Dog <span class="token operator">=</span> Animal <span class="token operator">&</span> <span class="token punctuation">{</span> <span class="token function-variable function">woof</span> <span class="token operator">:</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">void</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> |
2. Interface supports merged declarations
, but Type does not
Merged declarations is when you declare two types with the same name it will merge them together.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
type Laptop <span class="token operator">=</span> <span class="token punctuation">{</span> language <span class="token operator">:</span> string <span class="token punctuation">;</span> model <span class="token operator">:</span> string <span class="token punctuation">;</span> year <span class="token operator">:</span> number <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> <span class="token comment">// This will cause error: Duplicate identifier 'Laptop'.ts(2300)</span> type Laptop <span class="token operator">=</span> <span class="token punctuation">{</span> cpu <span class="token operator">:</span> string <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> <span class="token keyword">interface</span> <span class="token class-name">Human</span> <span class="token punctuation">{</span> name <span class="token operator">:</span> string <span class="token punctuation">;</span> age <span class="token operator">:</span> string <span class="token punctuation">;</span> <span class="token function-variable function">speak</span> <span class="token operator">:</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">void</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">// No problems here. The multiple declarations will be "merged",</span> <span class="token comment">// Human interface will have all the properties defined above, as well as "jump".</span> <span class="token keyword">interface</span> <span class="token class-name">Human</span> <span class="token punctuation">{</span> <span class="token function-variable function">jump</span> <span class="token operator">:</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">void</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> |
3. Type supports type aliases for primitive data types and all other types. Interfaces are not
1 2 3 4 5 6 7 8 9 |
<span class="token comment">// primitive</span> type Age <span class="token operator">=</span> number <span class="token punctuation">;</span> <span class="token comment">// union</span> type Length <span class="token operator">=</span> <span class="token string">'short'</span> <span class="token operator">|</span> <span class="token string">'long'</span> <span class="token punctuation">;</span> <span class="token comment">// tuple</span> type Data <span class="token operator">=</span> <span class="token punctuation">[</span> number <span class="token punctuation">,</span> string <span class="token punctuation">]</span> <span class="token punctuation">;</span> |
So… when should I use Interface and when should I use Type ?
You should start by thinking about what you want to achieve first, then decide which one to use. Do you need to inherit Interface or not?. Need to create type aliases
for primitive data types?. Do you need the Merged declarations for the Interface?
Ask questions before you want to do anything. That’s the best way for you to handle any problem.
Roundup
As always, I hope you enjoyed this article and learned something new.
Thank you and see you in the next posts!
If you find this blog interesting, please give me a like and subscribe to support me. Thank you.