TS语法Class类实现代码示例

本文介绍了如何在JavaScript中定义接口interfaceShape并实现两个类Circle和Rectangle,以计算它们的面积。通过printArea函数展示了如何使用这些类来获取和打印面积。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

// 定义一个接口
interface Shape {
  calculateArea(): number; // 定义了一个返回数字的方法
}

// 创建一个实现接口的类
class Circle implements Shape {
  radius: number; // 圆的半径

  // 构造函数接受半径作为参数
  constructor(radius: number) {
    this.radius = radius;
  }

  // 实现接口中的方法,计算圆的面积
  calculateArea(): number {
    return Math.PI * this.radius ** 2; // 使用数学公式计算面积
  }
}

class Rectangle implements Shape {
  width: number; // 矩形的宽度
  height: number; // 矩形的高度

  // 构造函数接受宽度和高度作为参数
  constructor(width: number, height: number) {
    this.width = width;
    this.height = height;
  }

  // 实现接口中的方法,计算矩形的面积
  calculateArea(): number {
    return this.width * this.height; // 直接相乘得到面积
  }
}

// 使用接口的函数
function printArea(shape: Shape) {
  console.log(`The area is: ${shape.calculateArea()}`); // 打印出面积
}

// 创建一个半径为5的圆和一个宽度为3、高度为4的矩形
const myCircle = new Circle(5);
const myRectangle = new Rectangle(3, 4);

// 调用函数,打印出面积
printArea(myCircle); // 输出: "The area is: ~78.54"
printArea(myRectangle); // 输出: "The area is: 12"

欢迎光临我的个人博客

网址:https://liukang.vip

在HTML中使用TypeScript语法,需要将TypeScript代码编译为JavaScript代码后再在HTML中引用。以下是一个示例: 首先,在TypeScript文件中编写代码,例如在一个名为`script.ts`的文件中: ```typescript let body: HTMLElement = document.body; let allDiv: NodeList = document.querySelectorAll('div'); document.addEventListener('click', function(e: MouseEvent) { // Do something }); ``` 然后,使用TypeScript编译器将该文件编译为JavaScript文件。可以使用以下命令进行编译: ``` tsc script.ts ``` 这将生成一个名为`script.js`的JavaScript文件。 最后,在HTML文件中引用生成的JavaScript文件。例如,在`index.html`文件中: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./script.js"></script> </head> <body> <!-- HTML内容 --> </body> </html> ``` 在`<script>`标签中引用生成的JavaScript文件`script.js`。 这样,在HTML中就可以使用TypeScript编写的代码了。 #### 引用[.reference_title] - *1* *2* [TypeScript(02)——函数,class其他语法ts在html页面中如何使用案例](https://blog.youkuaiyun.com/weixin_43216105/article/details/105391739)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [typescriptTS)基础语法快速入门,ts编译选项,ts打包使用](https://blog.youkuaiyun.com/m0_52409770/article/details/122973043)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值