制作您的第一个 Typescript 项目

如何在 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在命令行中用于移动到其中,并使用以下命令启动了gitnpm :

git init
npm init

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

npx tsc --init

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

这些文件夹是什么意思?

  • 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项目,可以轻松地将其编译到分发文件夹中,供您轻松使用。