既然我们使用了TypeScript,我们就可以使用很多新的特性,比如说使用类去构建实例;接下来我们来使用Fruit类来构建我们的水果实例.首先我们在app文件夹下创建一个新的文件夹,就叫它classes吧,然后我们创建一个Fruit.ts文件,在这里面我们书写Fruit类的代码:
export class Fruit{ constructor( public name:string, public price: number ){} }
解释一下上面的代码,我们使用了构造函数,然后在构造函数里面声明了这个对象的两个属性;一个是name,另一个是price,我们使用构造函数里面的name:string,和price: number参数来创建和初始化这个对象的属性.接下来我们就可以在我们的程序中使用这个类了;
首先在app.component.ts中引入这个类:
import {Fruit} from './classes/Fruits';
然后在AppComponent中使用Fruit类来初始化我们的水果列表:
export class AppComponent { username = 'dreamapple'; age = 22; fruitsList = [ new Fruit('apple', 20), new Fruit('orange', 30), new Fruit('pear', 40), new Fruit('banana', 50) ]; //noinspection TypeScriptUnresolvedVariable fruit = this.fruitsList[0].name; // 这里要使用 this.fruitsList[0] }
然后也要改一下我们的模板:
复制代码 代码如下:
<li *ngFor="let fruit of fruitsList; let i = index;">{{i}}-{{fruit.name}}-{{fruit.price}}</li>
最后的结果应该是下面这个样子:
最后不得不说,无论是ES6,还是TypeScript都让我感觉到了有种写Java感觉;这也算有利有弊吧,好处肯定是增加了代码的可读性,使程序更加容易维护,也更容易写出大型的项目,让团队协作也非常的便利;当然也有它的一些不足,不足主要是增加了大家的学习成本;当然一切向前看呀.
您可能感兴趣的文章: