Interface là một cách để mô tả cho một kiểu dữ liệu, chẳng hạn như một đối tượng. Không giống như một Interface, Type có thể đặt tên cho bất kỳ kiểu dữ liệu nào, bao gồm các kiểu dữ liệu nguyên thủy, kiểu dữ liệu hợp nhất và kiểu dữ liệu giao nhau.
Interface là gì?
Một Interface sẽ trông như thế này:
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> |
Ở trên chúng ta đã định nghĩa một Interface có tên là Human, và sau đó sử dụng nó để tạo một biến james. Các Interface hữu ích theo cách mà chúng ta luôn có thể chắc chắn rằng các đối tượng mà chúng ta tạo có cùng các thuộc tính (Properties). Và nếu chúng ta tình cờ tạo một biến có Interface Human, với các Properties khác, thì TypeScript sẽ hiển thị lỗi.
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> |
Type là gì?
Khi tạo một type, bạn không thực sự tạo một Type mới mà bạn đang tạo một tên mới cho một Type, đó là lý do tại sao nó được gọi là type alias .
Trước khi bạn quá bối rối, đây là một ví dụ tương tự dành cho bạn:
Ben có một chiếc laptop, nhưng thay vì gọi nó là laptop, anh ấy lại gọi nó là Code Maker, bởi vì Ben rất khó tính và thích gọi như vậy sẽ rất ngầu đời.
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> |
Như chúng ta có thể thấy ở trên, các Properties của kiểu Laptop và CodeMaker hoàn toàn giống nhau. Tại sao chúng ta cần tạo một Type khác có cùng Properties, chỉ vì Ben muốn gọi nó là “Code Maker” thay vì laptop như mọi người khác? Điều đó không công bằng lắm.
John nói: “Nếu Ben gọi laptop của anh ấy là Code Maker , thì mình muốn gọi chiếc laptop của mình là 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> |
Bây giờ chúng ta có 3 tên khác nhau, về cơ bản mô tả cùng một thứ. Hãy đơn giản hóa nó bằng cách làm điều gì đó với type nhưng interface không thể làm.
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> |
Thay vì khai báo Laptop 3 lần, Ben và John chỉ cần tạo type aliases của Laptop và gọi nó là bất cứ thứ gì họ muốn. Và tất nhiên, dù người ta gọi laptop bằng nhiều tên khác nhau thì suy cho cùng nó vẫn là laptop. Vì vậy, code dưới đây là hoàn toàn hợp lệ.
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> |
Không giống như một khai báo Interface, luôn giới thiệu một kiểu đối tượng được đặt tên, một type aliases có thể đưa ra một tên cho bất kỳ Type nào, bao gồm các kiểu dữ liệu nguyên thủy, kiểu dữ liệu hợp nhất và kiểu dữ liệu giao nhau.
Chúng ta cũng có thể đặt type aliases cho các kiểu dữ liệu nguyên thủy, đây là điều interface không thể làm được. Lấy ví dụ sau:
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
Đây là bảng phân tích nhanh về Interface và Type.
1. Cả hai đều hỗ trợ kế thừa, mặc dù cú pháp khác nhau
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 hỗ trợ merged declarations, còn Type thì không
Merged declarations là khi bạn khai báo 2 kiểu cùng tên nó sẽ merge chúng lại với nhau.
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 hỗ trợ tạo bí danh (type aliases) cho các kiểu dữ liệu nguyên thủy và toàn bộ kiểu khác. Interface thì không
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> |
Vậy… khi nào thì nên sử dụng Interface và khi nào mình nên sử dụng Type?
Bạn nên bắt đầu bằng cách suy nghĩ về những gì mà bạn muốn đạt được trước, sau đó quyết định sử dụng cái nào cho hợp lý.
Bạn có cần kế thừa Interface hay không?. Cần tạo type aliases cho các kiểu dữ liệu nguyên thủy hay không?.
Bạn có cần việc Merged declarations (khai báo hợp nhất) Interface hay không?
Hãy tạo ra những câu hỏi trước khi bạn muốn làm bất cứ việc gì. Đó là cách tốt nhất để bạn xử lý mọi vấn đề.
Roundup
Như mọi khi, mình hy vọng bạn thích bài viết này và học thêm được điều gì đó mới.
Cảm ơn và hẹn gặp lại các bạn trong những bài viết tiếp theo!
Nếu bạn thấy Blog này hay xin hãy cho mình một like và đăng ký để ủng hộ mình nhé. Thank you.