TypeScript 接口：拥抱灵活性 - 挑战

拥抱 TypeScript 接口的灵活性

TypeScript 中的接口就像魔法一样，为我们的代码带来秩序和结构。它们允许我们定义契约，确保对象遵守特定的形状和行为。在这篇博文中，我们将揭开 TypeScript 接口的迷人世界，并发现它们如何增强我们代码的灵活性和可维护性。让我们开始我们的旅程吧！

定义接口

接口是描述对象结构的蓝图。它定义了一个对象必须被视为该接口类型的属性和方法。这是一个简单界面的示例：

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">interface</span> <span style="color:var(--syntax-name-color)">Person</span> <span style="color:var(--syntax-text-color)">{</span>
  <span style="color:var(--syntax-text-color)">name</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-declaration-color)">string</span><span style="color:var(--syntax-text-color)">;</span>
  <span style="color:var(--syntax-text-color)">age</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-declaration-color)">number</span><span style="color:var(--syntax-text-color)">;</span>
  <span style="color:var(--syntax-name-color)">greet</span><span style="color:var(--syntax-text-color)">():</span> <span style="color:var(--syntax-declaration-color)">void</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-text-color)">}</span>
</code></span></span>

在这个接口中，我们定义任何 type 的对象都Person必须有一个nametype 的属性string，一个agetype 的属性number，以及一个greet不返回任何东西的方法 ( void)。

挑战

挑战 1：创建Book界面

Book创建一个使用以下属性调用的接口： title(string)、author(string) 和year(number)。添加一个名为的方法，用于displayInfo记录有关该书的信息。

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">interface</span> <span style="color:var(--syntax-name-color)">Book</span> <span style="color:var(--syntax-text-color)">{</span>
  <span style="color:var(--syntax-comment-color)">// Properties</span>
  <span style="color:var(--syntax-comment-color)">// Your code goes here</span>

  <span style="color:var(--syntax-comment-color)">// Method</span>
  <span style="color:var(--syntax-comment-color)">// Your code goes here</span>
<span style="color:var(--syntax-text-color)">}</span>
</code></span></span>

提示：在方法内部displayInfo，使用函数记录一条消息console.log。

挑战 2：创建Shape界面

创建一个名为type 的Shape属性调用的接口。添加一个名为的方法，用于计算并返回形状的面积。areanumbercalculateArea

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">interface</span> <span style="color:var(--syntax-name-color)">Shape</span> <span style="color:var(--syntax-text-color)">{</span>
  <span style="color:var(--syntax-comment-color)">// Property</span>
  <span style="color:var(--syntax-comment-color)">// Your code goes here</span>

  <span style="color:var(--syntax-comment-color)">// Method</span>
  <span style="color:var(--syntax-comment-color)">// Your code goes here</span>
<span style="color:var(--syntax-text-color)">}</span>
</code></span></span>

提示：calculateArea使用计算形状面积的适当逻辑在接口内实现该方法。

实现接口

一旦定义了接口，我们就可以使用它来确保对象满足接口定义的契约。下面是一个实现接口的例子：

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">class</span> <span style="color:var(--syntax-name-color)">Person</span> <span style="color:var(--syntax-declaration-color)">implements</span> <span style="color:var(--syntax-name-color)">Greeting</span> <span style="color:var(--syntax-text-color)">{</span>
  <span style="color:var(--syntax-text-color)">name</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-declaration-color)">string</span><span style="color:var(--syntax-text-color)">;</span>
  <span style="color:var(--syntax-text-color)">age</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-declaration-color)">number</span><span style="color:var(--syntax-text-color)">;</span>

  <span style="color:var(--syntax-declaration-color)">constructor</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">name</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-declaration-color)">string</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">age</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-declaration-color)">number</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-text-color)">{</span>
    <span style="color:var(--syntax-declaration-color)">this</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">name</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">name</span><span style="color:var(--syntax-text-color)">;</span>
    <span style="color:var(--syntax-declaration-color)">this</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">age</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">age</span><span style="color:var(--syntax-text-color)">;</span>
  <span style="color:var(--syntax-text-color)">}</span>

  <span style="color:var(--syntax-name-color)">greet</span><span style="color:var(--syntax-text-color)">()</span> <span style="color:var(--syntax-text-color)">{</span>
    <span style="color:var(--syntax-name-color)">console</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">log</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">`Hello, I'm </span><span style="color:var(--syntax-text-color)">${</span><span style="color:var(--syntax-declaration-color)">this</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">name</span><span style="color:var(--syntax-text-color)">}</span><span style="color:var(--syntax-string-color)">!`</span><span style="color:var(--syntax-text-color)">);</span>
  <span style="color:var(--syntax-text-color)">}</span>
<span style="color:var(--syntax-text-color)">}</span>
</code></span></span>

在此示例中，Person类实现了Greeting接口，这意味着它必须具有在接口中定义的所需属性和方法。

挑战（续）

挑战 3：实现Book接口

Book在名为 的类中实现该接口MyBook。为属性提供值并实施displayInfo方法来记录有关图书的信息。

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">class</span> <span style="color:var(--syntax-name-color)">MyBook</span> <span style="color:var(--syntax-declaration-color)">implements</span> <span style="color:var(--syntax-name-color)">Book</span> <span style="color:var(--syntax-text-color)">{</span>
  <span style="color:var(--syntax-comment-color)">// Implement the properties</span>
  <span style="color:var(--syntax-comment-color)">// Your code goes here</span>

  <span style="color:var(--syntax-comment-color)">// Implement the method</span>
  <span style="color:var(--syntax-comment-color)">// Your code goes here</span>
<span style="color:var(--syntax-text-color)">}</span>
</code></span></span>

提示：使用该console.log函数来记录包含书籍信息的消息。

挑战 4：实现Shape接口

Shape在名为 的类中实现该接口Circle。为属性提供一个值area并实现calculateArea计算和返回圆面积的方法。

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">class</span> <span style="color:var(--syntax-name-color)">Circle</span> <span style="color:var(--syntax-declaration-color)">implements</span> <span style="color:var(--syntax-name-color)">Shape</span> <span style="color:var(--syntax-text-color)">{</span>
  <span style="color:var(--syntax-comment-color)">// Implement the property</span>
  <span style="color:var(--syntax-comment-color)">// Your code goes here</span>

  <span style="color:var(--syntax-comment-color)">// Implement the method</span>
  <span style="color:var(--syntax-comment-color)">// Your code goes here</span>
<span style="color:var(--syntax-text-color)">}</span>
</code></span></span>

提示：使用适当的公式计算圆的面积。

挑战答案

挑战 1：创建Book界面

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">interface</span> <span style="color:var(--syntax-name-color)">Book</span> <span style="color:var(--syntax-text-color)">{</span>
  <span style="color:var(--syntax-text-color)">title</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-declaration-color)">string</span><span style="color:var(--syntax-text-color)">;</span>
  <span style="color:var(--syntax-text-color)">author</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-declaration-color)">string</span><span style="color:var(--syntax-text-color)">;</span>
  <span style="color:var(--syntax-text-color)">year</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-declaration-color)">number</span><span style="color:var(--syntax-text-color)">;</span>
  <span style="color:var(--syntax-name-color)">displayInfo</span><span style="color:var(--syntax-text-color)">():</span> <span style="color:var(--syntax-declaration-color)">void</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-text-color)">}</span>
</code></span></span>

挑战 2：创建Shape界面

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">interface</span> <span style="color:var(--syntax-name-color)">Shape</span> <span style="color:var(--syntax-text-color)">{</span>
  <span style="color:var(--syntax-text-color)">area</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-declaration-color)">number</span><span style="color:var(--syntax-text-color)">;</span>
  <span style="color:var(--syntax-name-color)">calculateArea</span><span style="color:var(--syntax-text-color)">():</span> <span style="color:var(--syntax-declaration-color)">number</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-text-color)">}</span>
</code></span></span>

挑战 3：实现Book接口

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">class</span> <span style="color:var(--syntax-name-color)">MyBook</span> <span style="color:var(--syntax-declaration-color)">implements</span> <span style="color:var(--syntax-name-color)">Book</span> <span style="color:var(--syntax-text-color)">{</span>
  <span style="color:var(--syntax-text-color)">title</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-declaration-color)">string</span><span style="color:var(--syntax-text-color)">;</span>
  <span style="color:var(--syntax-text-color)">author</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-declaration-color)">string</span><span style="color:var(--syntax-text-color)">;</span>
  <span style="color:var(--syntax-text-color)">year</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-declaration-color)">number</span><span style="color:var(--syntax-text-color)">;</span>

  <span style="color:var(--syntax-declaration-color)">constructor</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">title</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-declaration-color)">string</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">author</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-declaration-color)">string</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">year</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-declaration-color)">number</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-text-color)">{</span>
    <span style="color:var(--syntax-declaration-color)">this</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">title</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">title</span><span style="color:var(--syntax-text-color)">;</span>
    <span style="color:var(--syntax-declaration-color)">this</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">author</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">author</span><span style="color:var(--syntax-text-color)">;</span>
    <span style="color:var(--syntax-declaration-color)">this</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">year</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">year</span><span style="color:var(--syntax-text-color)">;</span>
  <span style="color:var(--syntax-text-color)">}</span>

  <span style="color:var(--syntax-name-color)">displayInfo</span><span style="color:var(--syntax-text-color)">()</span> <span style="color:var(--syntax-text-color)">{</span>
    <span style="color:var(--syntax-name-color)">console</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">log</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">`Title: </span><span style="color:var(--syntax-text-color)">${</span><span style="color:var(--syntax-declaration-color)">this</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">title</span><span style="color:var(--syntax-text-color)">}</span><span style="color:var(--syntax-string-color)">`</span><span style="color:var(--syntax-text-color)">);</span>
    <span style="color:var(--syntax-name-color)">console</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">log</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">`Author: </span><span style="color:var(--syntax-text-color)">${</span><span style="color:var(--syntax-declaration-color)">this</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">author</span><span style="color:var(--syntax-text-color)">}</span><span style="color:var(--syntax-string-color)">`</span><span style="color:var(--syntax-text-color)">);</span>
    <span style="color:var(--syntax-name-color)">console</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">log</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">`Year: </span><span style="color:var(--syntax-text-color)">${</span><span style="color:var(--syntax-declaration-color)">this</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">year</span><span style="color:var(--syntax-text-color)">}</span><span style="color:var(--syntax-string-color)">`</span><span style="color:var(--syntax-text-color)">);</span>
  <span style="color:var(--syntax-text-color)">}</span>
<span style="color:var(--syntax-text-color)">}</span>
</code></span></span>

挑战 4：实现Shape接口

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">class</span> <span style="color:var(--syntax-name-color)">Circle</span> <span style="color:var(--syntax-declaration-color)">implements</span> <span style="color:var(--syntax-name-color)">Shape</span> <span style="color:var(--syntax-text-color)">{</span>
  <span style="color:var(--syntax-text-color)">radius</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-declaration-color)">number</span><span style="color:var(--syntax-text-color)">;</span>
  <span style="color:var(--syntax-text-color)">area</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-declaration-color)">number</span><span style="color:var(--syntax-text-color)">;</span>

  <span style="color:var(--syntax-declaration-color)">constructor</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">radius</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-declaration-color)">number</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-text-color)">{</span>
    <span style="color:var(--syntax-declaration-color)">this</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">radius</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">radius</span><span style="color:var(--syntax-text-color)">;</span>
    <span style="color:var(--syntax-declaration-color)">this</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">area</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-declaration-color)">this</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">calculateArea</span><span style="color:var(--syntax-text-color)">();</span>
  <span style="color:var(--syntax-text-color)">}</span>

  <span style="color:var(--syntax-name-color)">calculateArea</span><span style="color:var(--syntax-text-color)">()</span> <span style="color:var(--syntax-text-color)">{</span>
    <span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-text-color)">Math</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">PI</span> <span style="color:var(--syntax-error-color)">*</span> <span style="color:var(--syntax-declaration-color)">this</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">radius</span> <span style="color:var(--syntax-error-color)">**</span> <span style="color:var(--syntax-literal-color)">2</span><span style="color:var(--syntax-text-color)">;</span>
  <span style="color:var(--syntax-text-color)">}</span>
<span style="color:var(--syntax-text-color)">}</span>
</code></span></span>

恭喜你完成挑战！接口提供了一种强大的方式来定义契约并确保对象的一致性和兼容性。通过实现接口，您可以设计更灵活和可维护的代码。继续探索迷人的 TypeScript 界面世界，开启编程之旅的新可能！🪄