您当前的位置: 首页 >  typescript

寒冰屋

暂无认证

  • 2浏览

    0关注

    2286博文

    0收益

  • 0浏览

    0点赞

    0打赏

    0留言

私信
关注
热门博文

TypeScript 100天(第2天)

寒冰屋 发布时间:2022-07-13 23:28:15 ,浏览量:2

这是100部分系列的第2部分,向您介绍TypeScript(如果您以前没有使用过它);如果您使用过它,这将使您重新了解您已经知道的东西,并可能向您介绍一些您以前可能没有遇到过的新事物。在这一部分中,您将了解一般意义上的类是什么以及它们与TypeScript/JavaScript的关系。

在TypeScript的100天(第1天)中,我创建了一个基本的TypeScript“应用程序”,其中两个数字可以相加。这旨在向您介绍编写TypeScript代码的先决条件,以及让您熟悉使用类型系统。在文章的最后,我承诺我会重写这个应用程序以使用TypeScript类系统。

在我开始编写代码之前,有必要先了解一下一般意义上的类是什么,以及它们与TypeScript/JavaScript的关系。

简单地说,类是允许我们将数据和行为组合成一个对象的东西;这听起来很复杂,但实际上非常简单。使用类的想法是我们将需要做的所有事情放在一个地方。想象一下,我想将与弹吉他有关的所有内容组合在一起,因此我创建了一个吉他类。这具有适用于它的某些属性(数据),例如弦数、吉他类型、制造商、型号;可能它有拾音器,等等。这些都可以归为一类,称为Guitar。 它也有我们可以做的事情,所以对于电吉他,我们可以选择我们使用的拾音器,我们可以调整音调控制或改变吉他的调音方式。这些行为或动作都可以添加到Guitar类。换句话说,我们需要的一切都归为一个对象。

注意:在以后的文章中,我将展示我们如何将该Guitar类分解为更专业的更小类。

最初创建TypeScript时,类是JavaScript考虑的东西,但实际上并没有正式发布。TypeScript允许我们编写使用类的代码,并输出JavaScript无需使用class关键字就可以使用的代码;当类被正式添加到JavaScript中时,我们的TypeScript代码可以重新编译以在本地使用它们。

那么,一个类是什么样的呢?对于我们的加法类,我们可以从一个如下所示的空定义开始:

class Addition { }

就目前而言,这并不是很有用,所以我将添加一些称为字段的东西来表示我想要加在一起的两个数字。字段只是我们给保存类数据的事物的名称。添加我们的字段如下所示:

class Addition { 
    number1: number = 0;
    number2: number = 0;
}

在这里的代码中,我添加了我的两个数字字段并给它们一个初始值0。我不得不给他们一个初始值,因为TypeScript抱怨如果我不这样做就没有值。

在进入创建add方法的部分之前,让我们看看我是如何将值放入number1和number2的。为了达到这两个字段,我必须做一些叫做实例化的事情。所以,Addition是我们的类——为了使用它,我们创建了一个类的实例(这就是它被称为实例化的原因)。为了创建我们类的实例,我们使用了一个特殊的关键字new。它看起来像这样:

const additionInstance = new Addition();

有了这个,我现在可以直接设置number1和number2的值。

additionInstance.number1 = 10;
additionInstance.number2 = 20;

回到Addition类,我现在要编写addition方法(在面向对象中,您可以将方法视为我们给函数的名称)。

public Add(): number {
    return this.number1 + this.number2;
}

在我的Add方法中,我可以使用特殊this关键字访问number1和number2字段。其中this是让类中的方法访问类的当前实例的其他部分。

现在我已经完成了该Add方法,现在可以从我的实例化代码中调用它。实例化代码现在如下所示:

const additionInstance = new Addition();
additionInstance.number1 = 10;
additionInstance.number2 = 20;
console.log(additionInstance.Add());

就是这样!我们在这里创建了第一个TypeScript类。在下一个教程中,我将演示如何隐藏字段,以便在类的实例之外无法访问它们,并介绍构造函数,帮助我们以更多的方式实例化我们的类。

这篇文章的代码可以在这里找到。

https://www.codeproject.com/Articles/5316234/100-Days-of-TypeScript-Day-2

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

微信扫码登录

0.0459s