目录
作为数据的接口
变量声明
回到我们的接口
这是100部分系列的第4部分，向您介绍TypeScript，如果您以前没有使用过它；如果您使用过它，这将使您重新了解您已经知道的东西，并可能向您介绍一些您以前可能没有遇到过的新事物。在这一部分中，您将了解一些关于TypeScript中的接口的知识。
哇。第4天，我们已经在使用TypeScript的过程中涵盖了很多内容，这不是陈词滥调。在上几篇文章中，我们深入研究了在TypeScript中使用类，所以在这篇文章中，我想花点时间向您介绍接口。现在，如果您来自C#或Java等语言，您可能会认为您不会在这里学到任何有关接口的新知识，但TypeScript中的接口真的很酷。
作为数据的接口当我们查看类时，您可能注意到的一件事是它们可以有行为。换句话说，它们不仅仅与数据有关，它们还使您能够添加功能来操作数据。这非常有用，但有时我们希望能够创建一些只代表数据本身的东西。我们希望能够为一些有用的数据创建类型安全的表示。您可能已经跃跃欲试并认为“我敢打赌皮特会说接口可以为我解决这个问题”，您是对的。
对于这篇文章，我们将创建一个代表电子邮件的东西。我们将能够添加收件人、主题和邮件本身。我将从编写一个代表单个收件人的接口开始。为了创建一个接口，我更改了class关键字为interface，以便我的收件人看起来像这样。
interface Recipient {
email: string;
}如果我想创建一个收件人的实例，我可以做这样的事情。
const recipient: Recipient = { email: 'peter@peter.com' };附带说明一下，您会看到我一直在使用const关键字声明变量，但实际上我并没有解释它的来源或含义。当我开始谈论TypeScript时，我简要介绍了它是为编译为JavaScript而开发的。JavaScript有三种声明变量的方式var，let和const。最初，JavaScript只有一种方式，使用var，但这存在很大问题。不久前，let和const被介绍为一种更好、更简单的声明形式。
让我们看看为什么var会出现这样的问题。问题归结为所谓的块作用域。块作用域是指可以看到变量的地方——它应该只在声明它的块中可见，所以下面的代码让我看到它不应该看到的数据可能会让人感到惊讶。
for (var i = 0; i < 10; i++) {
console.log(i);
}
console.log(i); // Wait, why can I see i here?我们在这段代码中看到的是var关键字没有被块范围覆盖。这可能会在更复杂的代码中导致不幸的副作用，因为值变得不可预测。
进入我们的英雄，let和const。
引入这些是为了帮助我们声明尊重块范围的变量。我们有两个关键字，因为let允许我们声明一个变量然后稍后更改值，而const允许我们声明变量但不能更改它。
回到我们的接口我已经创建了一个简单的收件人接口，现在我准备添加一个涵盖电子邮件本身的接口。电子邮件接口将包括收件人、抄送和密件抄送人列表，以及主题和消息。如果我们在开始编写代码之前考虑一下，我们的生活会轻松很多，所以我将确保使用电子邮件接口的人可以选择他们想要添加的收件人。由于我们的接收者有一个强类型，我将使用一点TypeScript技巧，并说接收者可以接收一个接收者数组，或者接收者使用|null可以是null。
interface Email {
To: Recipient[] | null;
CC: Recipient[] | null;
BCC: Recipient[] | null;
Subject: string;
Message: string;
}Recipient[] | null的语法读取，我想要一个Recipient数组项或我想要它为null。
现在我有了我的接口，我将创建一个接受电子邮件并将其写入控制台的简单函数。
function sendMessage(message: Email) {
console.log(message);
}
sendMessage(email);通过上面讨论的所有点点滴滴，您可能会猜到接口将使用const关键字填充，就像这样（这必须放在sendMessage(email);行之前）。
const email: Email = {
To: [{
email: 'bob@bob.com'
}],
CC: [{
email: 'terry@terry.com'
}, {
email: 'chris@chris.com'
}],
BCC: null,
Subject: 'This is my email',
Message: 'This is the message inside my email'
};请注意，我仍然必须添加密件抄送。如果没有这部分，对象的“形状”将与接口不匹配，TypeScript真的很擅长捕捉这样的东西。
关于将单个项目添加到数组的快速说明。在收件人条目中，每个收件人都被{ }包围。这就是我们将单个条目添加到数组中的方式，因此添加多个条目只需用逗号分隔这些{ }对。
我们已经完成了对接口的介绍。他们可以做得更多，所以在下一篇文章中，我将展示类和接口如何协同工作。
这篇文章的代码可以在github上找到。
https://www.codeproject.com/Articles/5316489/100-Days-of-TypeScript-Day-4
