Khi làm việc với Typescript,chúng ta rất hay bị “Bối rối” về việc sử dụng Type và interface.Trong bài viết này mình sẽ phân tích 1 vài điểm khác
nhau giữa Type và Interface.
Typescript nâng cao của javascript,tất nhiên rồi ngoài nhưng tính năng đã có của javascript thì typescript cung cấp cho chúng ta thêm rất nhiều
tính năng khác,điển hình là Static Type.
Về cơ bản typescript có 3 loại types chính đó là
- Any type
- Built in type
- User defined type
Interface và Type thuộc loại thứ 3 – User defined type.
1.Khai báo
Type
1 2 3 4 5 | <span class="token keyword">type</span> Shape <span class="token operator">=</span> <span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span> color<span class="token punctuation">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> |
Interface
1 2 3 4 5 | <span class="token keyword">interface</span> <span class="token class-name">Shape</span> <span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span> color<span class="token punctuation">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> |
2.Interface có thể merge còn Type thì không
Trong cùng 1 file chúng ta khai báo như sau
1 2 3 4 5 6 7 8 9 10 11 12 13 | <span class="token keyword">interface</span> <span class="token class-name">Shape</span> <span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">interface</span> <span class="token class-name">Shape</span> <span class="token punctuation">{</span> color<span class="token punctuation">:</span><span class="token builtin">string</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">const</span> Circle<span class="token punctuation">:</span>Shape <span class="token operator">=</span> <span class="token punctuation">{</span> name<span class="token punctuation">:</span><span class="token string">'circle'</span><span class="token punctuation">,</span> color<span class="token punctuation">:</span><span class="token string">'blue'</span> <span class="token punctuation">}</span> |
Mọi thì đều ổn,còn với Type thì sao
1 2 3 4 5 6 7 8 9 10 11 12 13 | <span class="token keyword">type</span> Shape <span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">type</span> Shape <span class="token punctuation">{</span> color<span class="token punctuation">:</span><span class="token builtin">string</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">const</span> Circle<span class="token punctuation">:</span>Shape <span class="token operator">=</span> <span class="token punctuation">{</span> name<span class="token punctuation">:</span><span class="token string">'circle'</span><span class="token punctuation">,</span> color<span class="token punctuation">:</span><span class="token string">'blue'</span> <span class="token punctuation">}</span> |
Ở đây chúng ta sẽ nhận được lỗi : “Duplicate identifier ‘Shape.”
3.Type có thể sử dụng được với “Computed Properties” còn interface thì không
Type
1 2 3 4 5 6 7 8 9 | <span class="token keyword">type</span> keys <span class="token operator">=</span> <span class="token string">'color'</span> <span class="token operator">|</span> <span class="token string">'name'</span><span class="token punctuation">;</span> <span class="token keyword">type</span> Shape <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token punctuation">[</span>key <span class="token keyword">in</span> keys<span class="token punctuation">]</span><span class="token punctuation">:</span><span class="token builtin">string</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">const</span> Circle<span class="token punctuation">:</span>Shape <span class="token operator">=</span> <span class="token punctuation">{</span> name<span class="token punctuation">:</span><span class="token string">'circle'</span><span class="token punctuation">,</span> color<span class="token punctuation">:</span><span class="token string">'res'</span> <span class="token punctuation">}</span> |
Interface
1 2 3 4 5 6 7 8 9 | <span class="token keyword">type</span> keys <span class="token operator">=</span> <span class="token string">'color'</span> <span class="token operator">|</span> <span class="token string">'name'</span><span class="token punctuation">;</span> <span class="token keyword">interface</span> <span class="token class-name">Shape</span> <span class="token punctuation">{</span> <span class="token punctuation">[</span>key <span class="token keyword">in</span> keys<span class="token punctuation">]</span><span class="token punctuation">:</span><span class="token builtin">string</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">const</span> Circle<span class="token punctuation">:</span>Shape <span class="token operator">=</span> <span class="token punctuation">{</span> name<span class="token punctuation">:</span><span class="token string">'circle'</span><span class="token punctuation">,</span> color<span class="token punctuation">:</span><span class="token string">'res'</span> <span class="token punctuation">}</span> |
Chúng ta sẽ nhận được lỗi A computed property name in an interface must refer to an expression whose type is a literal type or a ‘unique symbol’ type.
4.Tuples Type
1 2 3 4 5 6 7 8 9 10 11 | <span class="token keyword">type</span> Tuple <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token builtin">number</span><span class="token punctuation">,</span> <span class="token builtin">number</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token keyword">interface</span> <span class="token class-name">ITuple</span> <span class="token punctuation">{</span> <span class="token number">0</span><span class="token punctuation">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span> <span class="token number">1</span><span class="token punctuation">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span> <span class="token keyword">as</span> Tuple<span class="token punctuation">;</span> <span class="token comment">// Conversion of type '[number, number, number]' to type '[number, number]' may be a mistake</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span> <span class="token keyword">as</span> ITuple<span class="token punctuation">;</span> <span class="token comment">// Ok</span> |
5.Type có Unions type còn interface thì không
Type
1 2 3 4 5 6 7 | <span class="token keyword">type</span> colors <span class="token operator">=</span> <span class="token string">'blue'</span> <span class="token operator">|</span> <span class="token string">'green'</span> <span class="token punctuation">;</span> <span class="token keyword">function</span> <span class="token function">setColor</span><span class="token punctuation">(</span>color<span class="token punctuation">:</span>colors<span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token punctuation">}</span> |
Ngoài việc tự định nghĩa ra các type ,thì Typescript cũng cấp cho chúng ta Utility Types rất hữu dụng khi làm việv với Legacy code.
Tổng Kết
Vậy khi nào sử dụng Type và khi nào sử dụng Interface,cái này thì cá nhân mình cũng chưa phân biệt được rõ ràng 
).Theo kinh nghiệm
làm việc của mình,dùng Inferface khi :
-Bạn viết library – và cung cấp public Api cho nguười khác dùng
Dùng type khi :
Bạn muốn một điều gì đó rõ ràng hơn interface