首页 > 软件开发 > JavaScript >

如何在TypeScript分别使用接口和类的属性并调用

来源:互联网 2023-03-17 00:01:10 版权归原作者所有,如有侵权,请联系我们

如果在TypeScript中,定义一个接口和一个类,可以声明一个接口类型变量,然后使用实例化类对象,对这个变量重新赋值;接着依次调用并查看对应的属性。下面利用实例说明,操作如下:Fz4办公区 - 实用经验教程分享!

如何在TypeScript分别使用接口和类的属性并调用Fz4办公区 - 实用经验教程分享!

工具/原料

  • TypeScript
  • JavaScript
  • HTML5
  • HBuilderX
  • 浏览器
  • 截图工具

方法/步骤

  • 1

    第一步,在TypeScript文件中,定义一个User接口,有属性name、age、sex和addr,如下图所示:

    Fz4办公区 - 实用经验教程分享!

    Fz4办公区 - 实用经验教程分享!

    如何在TypeScript分别使用接口和类的属性并调用Fz4办公区 - 实用经验教程分享!

  • 2

    第二步,再定义一个Student类,属性个数和名称跟第一步中是一样的,如下图所示:Fz4办公区 - 实用经验教程分享!

    如何在TypeScript分别使用接口和类的属性并调用Fz4办公区 - 实用经验教程分享!

  • 3

    第三步,利用接口类型声明一个变量u,然后利用类Student进行实例化,赋值给变量u,如下图所示:Fz4办公区 - 实用经验教程分享!

    如何在TypeScript分别使用接口和类的属性并调用Fz4办公区 - 实用经验教程分享!

  • 4

    第四步,使用console.log()依次打印变量u中的属性值,查看对应的值,如下图所示:Fz4办公区 - 实用经验教程分享!

    如何在TypeScript分别使用接口和类的属性并调用Fz4办公区 - 实用经验教程分享!

  • 4相关内容未经许可获取自百度经验
  • 5

    第五步,保存代码并使用TypeScript命令进行编译,生成对应的JavaScript文件,如下图所示:Fz4办公区 - 实用经验教程分享!

    如何在TypeScript分别使用接口和类的属性并调用Fz4办公区 - 实用经验教程分享!

  • 6

    第六步,将已经编译好的JavaScript文件,引入到页面中,并在浏览器中预览效果,如下图所示:

    Fz4办公区 - 实用经验教程分享!

    Fz4办公区 - 实用经验教程分享!

    如何在TypeScript分别使用接口和类的属性并调用Fz4办公区 - 实用经验教程分享!

  • 注意事项

    • 注意TypeScript中的接口和类赋值给变量的写法
    • 注意获取TypeScript中的类和接口中属性值

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!Fz4办公区 - 实用经验教程分享!


    标签: JAVASCRIPT函数

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号