TypeScript 100天 (第1天)

TypeScript 简介

好久没机会在这个博客上写作了，我真的想为自己写点不一样的东西。如果你是我的老读者，你可能知道我几年前写了一本关于 TypeScript 的书，所以我想开始一个类似的 100 天系列博客，如果你以前没用过 TypeScript，我会向你介绍它；如果你用过它，会让你复习一下你已经知道的东西，也许还会向你介绍一些你可能以前没接触过的新东西。

注意：这个博客系列不会连续 100 天发布，而是到最后发布 100 天的内容。

那么，什么是 TypeScript？如果你访问 TypeScript 网站，它的标语是“TypeScript 是带有类型语法的 JavaScript”。这到底是什么意思？

TypeScript 最初的构建是基于编写高质量 JavaScript 很难这个想法。虽然这是一种主观观点，但 TypeScript 迅速发展，让我们能够通过 polyfill 使用即将推出的 JavaScript 功能（不用担心这个，我们会在未来的文章中回来讨论）。TypeScript 现在是目前最流行的语言之一。

入门

好的，你可以在 playground 中在线开发 TypeScript 应用程序，但我真的推荐在本地安装它。要做到这一点，你需要使用类似 npm、yarn 或 pnmpm 的东西。如果你没有安装 npm，你需要安装 Node 来获取它。假设你已经安装了 Node，你可以使用以下命令安装 TypeScript（这取决于你使用的包管理器）。

npm install -g typescript

是时候编写我们的第一个 TypeScript 应用程序了（所有代码都可以在 github 上找到）。

这将是一个简单的程序，用于将两个数字相加。我将使用 TypeScript 编译器来设置一些东西，为我想编译 TypeScript 代码做好准备。

tsc --init

这创建了一个名为 tsconfig.json 的文件，它设置了编译器选项，这些选项决定了我们从 TypeScript 编译后的 JavaScript 的外观；哦等等，我不是提到过 TypeScript 编译成 JavaScript 了吗？简单说明一下——我几乎总是使用 Visual Studio Code 来编辑我的 TypeScript；如果你以前没用过它，这是一个不错的选择。

我将添加一个名为 day1.ts 的文件，以添加我的 TypeScript 并添加我的第一个例子。扩展名 .ts 告诉我们这是一个 TypeScript 文件。如果你以前使用过 JavaScript，代码对你来说会很熟悉。这是我们的 add 函数作为 JavaScript 方法的样子。

function add(number1, number2) {
    return number1 + number2;
}

我说过我希望 add 函数能够将两个数字相加。我不希望它将两个字符串或日期和字符串加在一起。这是 TypeScript 的第一个优势真正发挥作用的地方，也是 TypeScript 标语有意义的地方。我将使用以下语法约束该函数来接受数字并返回数字。

function add(number1: number, number2: number): number {
    return number1 + number2;
}

如果我试图将不是数字的内容传递给任何一个参数，我就无法编译代码。我不能将“特殊”值（例如 undefined 或 null）传递给任何一个参数。换句话说，我刚刚写了一些可以保护我自己的东西。

为了测试我的代码，我将调用该函数并将输出传递给控制台窗口，如下所示。

console.log(add(10, 20));

保存文件后，我想“编译” TypeScript 代码，使其变成 JavaScript。为此，我只需运行带有任何参数的 tsc 命令。这将获取 tsconfig.json 文件的内容，并使用它来控制文件的编译方式。（这里的 tsc 命令应该在与 tsconfig.json 文件相同的目录中运行）。

现在我已经编译了我的代码，我可以使用以下命令运行它。

node day1.js

就这样，这是第一个 TypeScript 程序。在 第 2 天，我们将研究如何更改我们的函数，使其位于一个类中；这将让我们了解如何开始利用面向对象的概念来构建可重用的块。