您当前的位置: 首页 >  typescript

寒冰屋

暂无认证

  • 0浏览

    0关注

    2286博文

    0收益

  • 0浏览

    0点赞

    0打赏

    0留言

私信
关注
热门博文

TypeScript 100天(第1天)

寒冰屋 发布时间:2022-07-13 22:53:48 ,浏览量:0

目录

介绍TypeScript

入门

介绍TypeScript

自从我有机会在这个博客上写作已经有一段时间了,我真的很想为我想出一些不同的东西。如果你是我的长期追随者,你可能知道几年前我写了一本关于TypeScript的书,所以我认为开始写这些100天类型的博客对我来说会很有趣如果您以前没有使用过TypeScript,这是一个向您介绍TypeScript的系列;让你复习一下你已经知道的东西,如果你用过它,也许会向你介绍一些你以前可能没有遇到过的新东西。

注意:这个博客系列不会连续发布100天,到最后是100天。

那么,什么是TypeScript?如果你访问TypeScript网站,标语是“TypeScript is JavaScript with syntax for types”。这实际上是什么意思?

TypeScript最初是基于编写高质量JavaScript很困难的想法而构建的。虽然这是一种主观意见,但TypeScript迅速发展,使我们能够通过polyfills使用即将推出的JavaScript功能(不用担心,我们将在以后的文章中讨论这个问题)。TypeScript现在被列为最流行的语言之一。

入门

好的,您可以在Playground中在线开发TypeScript应用程序,但我真的建议在本地安装它。为此,您将需要使用npm、yarn或pnmpm之类的东西。如果你没有安装npm,你需要安装Node来获取它。假设您已经安装了Node,您可以使用以下命令安装TypeScript(取决于您使用的包管理器)。

npm install -g typescript

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

这将是一个将两个数字相加的简单程序。当我想编译我的TypeScript代码时,我将使用TypeScript编译器来设置一些东西。

tsc --init

这创建了一个名为tsconfig.json的文件,它设置了编译器选项,这些选项确定我们的JavaScript在我们从TypeScript编译它时的样子;哦等等,我不是说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天,我们将研究如何更改我们的函数,使其位于类中;这将让我们看到如何开始利用面向对象的概念来构建可重用的块。

https://www.codeproject.com/Articles/5316027/100-Days-of-TypeScript-Day-1

关注
打赏
1665926880
查看更多评论
立即登录/注册

微信扫码登录

0.0735s