如何使用TypeScript创建类和类方法并生成JS文件

在本文中，我们将介绍如何使用TypeScript创建类和类的方法，并生成相应的JavaScript文件，然后在页面中调用这些JS文件。

第一步：创建TypeScript文件

首先，双击打开HBuilder编辑工具，新建一个TypeScript文件，我们将其命名为Fruit.ts。在该文件中，我们定义一个名为Fruit的类，该类具有两个属性：name（名称）和num（销售量），示例如下：

class Fruit {
  name: string;
  num: number;
  constructor(name: string, num: number) {
      name;
      num;
  }
}

第二步：定义类的方法

接下来，我们再定义一个名为Apple的类，该类继承自Fruit类。Apple类有一个额外的属性sales（销售情况），构造方法有两个参数name和num。我们还定义了一个名为showApple的方法，用于展示苹果的详细信息，示例如下：

class Apple extends Fruit {
  sales: string;
  constructor(name: string, num: number, sales: string) {
    super(name, num);
      sales;
  }
  showApple() {
    console.log(`苹果名称：${}，销售量：${}，销售情况：${}`);
  }
}

第三步：调用类的方法

现在，我们可以使用let关键字定义一个名为apple的对象变量，并调用Apple类中的showApple方法来展示苹果的详细信息，示例如下：

let apple  new Apple("红富士", 100, "好");
();

第四步：编译TypeScript文件

接下来，打开CMD命令窗口，并将路径切换到保存了Fruit.ts文件的路径下。然后执行tsc命令，将TypeScript文件编译为JavaScript文件，示例如下：

tsc Fruit.ts

第五步：生成JavaScript文件

完成上一步的操作后，在HBuilder的同级目录下将会生成一个与TypeScript文件同名的JavaScript文件（Fruit.js），该文件包含了编译后的JavaScript代码。

第六步：引入并运行JavaScript文件

最后，我们可以在指定目录下创建一个静态HTML页面，并在该页面中引入生成的JavaScript文件（Fruit.js）。然后通过浏览器打开该页面，就可以看到控制台输出了苹果的详细信息。

通过以上步骤，我们成功地使用TypeScript创建了类和类的方法，并生成了对应的JavaScript文件，最终在页面中调用了这些JS文件。

版权声明：本文内容由互联网用户自发贡献，本站不承担相关法律责任.如有侵权/违法内容,本站将立刻删除。