制作您的第一个 Typescript 项目

Posted on by

如何在 Typescript 中设置新项目

TypeScript Hello World

Javascript 是一种弱类型语言。这意味着我们不必定义类型，许多人喜欢它的灵活性。Typescript是 Javascript，只是它是强类型的。这意味着我们需要定义类型。TypeScript在过去几年中变得非常流行。

为什么 Typescript 如此受欢迎？#

Typescript 遵循 Javascript 的所有相同约定，除了它定义类型的方式。如果您以前使用过 Javascript，您可能会遇到这种问题：

let i = "1";
let j = i + 10;
console.log(j); // Returns 110

由于我们已经给出i了一个字符串，当我们尝试添加它时，我们将字符串添加在一起，而不是数字。如您所见，这可能会成为一个问题。

通过严格定义类型的方式，typescript帮助我们避免由于这种情况而出现的错误。这不仅适用于数字和字符串，还适用于我们可能期望具有属性的对象。在TypeScript中，我们可以强制该对象始终包含该属性。

如何使用TypeScript#

需要注意的是，typescript 是一种服务器端语言，因此它与 Node.JS 齐头并进。要安装 typescript，我们使用npm。确保在此之前安装了 NPM 和 Node.JS。要安装 typescript，请运行以下命令：

npm i -g typescript

现在我们已经安装了 typescript，我们可以开始工作了。我创建了一个新文件夹，cd在命令行中用于移动到其中，并使用以下命令启动了git和npm ：

git init
npm init

接下来，让我们为这个项目启动TypeScript：

npx tsc --init

这将创建一个 tsconfig.json 文件，该文件将包含有关您的 typescript 配置的所有信息。如果需要，您可以编辑它。我还创建了两个文件夹 – build和dist，所以我的文件夹看起来像这样：

这些文件夹是什么意思？

  • build – 这是我们所有TypeScript的去向。
  • dist – 当我们构建我们的TypeScript时，它被编译成 Javascript。这将进入此文件夹。

写你的第一个TypeScript#

首先，为确保我们正在写入正确的文件夹，请更新您的tsconfig.json文件以包含以下两行：

// ....
"outDir": "dist", 
"rootDir": "build",
// ....

这将确保我们在编译TypeScript时写入正确的文件夹。在build中，创建一个名为index.ts的新文件。现在你可以开始写TypeScript了。我为index.ts创建了一个非常基本的示例：

let i:number = 1;
let j:number = 2;
let z:number = 3;

现在，当我们想要编译我们的TypeScript时，我们只需要在我们的基本目录中运行以下命令：

tsc --build

现在我们的index.ts文件将被编译成index.js，我们可以在dist文件夹中找到它。

使用观察者Watchers#

由于不断运行构建命令会很烦人，我们可以设置一个TypeScript观察器，每次保存TypeScript时都会编译它。为此，我们只需运行以下命令：

tsc -w

现在你所有的TypeScript都会自动编译。现在我们已经完成了所有这些，您就有了一个成熟的TypeScript项目，可以轻松地将其编译到分发文件夹中，供您轻松使用。

推荐阅读：