• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

在WisOne平台上学习TypeScript

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

TypeScript是微软公司推出的开源的类型化脚本语言,目的是用于为弱类型的javaScript提供强类型的识别和感知功能,同时它提供了类、接口、继承等相关在javaScript中不容易实现的功能,语法类似C#,简洁易懂,是构建大中型Web应用的一门非常理想的语言。

ü 通过这篇文章,你可以学到:

认识WisOne IDE

在WisOne IDE中编写TypeScript代码

在属性面板更改控件的属性

在WisOne IDE中运行TypeScript代码

本文源代码链接:http://www.wisone.com/app/sample/helloworld.frm

尽管微软在Visual Studio 2012中通过插件包的方式可以使用TypeScript的智能提示和编译功能,但是对于很多开源世界而来的开发人员来说,装个数G的Visual Studio来开发TypeScript有些大材小用,还好现在互联网上有一些专门用于辅助TypeScript开发的平台,WisOne智云平台就是其中具有代表性的一个Web平台。

通过如下的网址进入智云平台:

http://www.wisone.com/ide

WisOne IDE网页呈现了一个基于Web的IDE集成化开发环境,它使用TypeScript作为开发语言,并提供了可视化的开发与设计工具,如图1.1所示。

WisOne目前还只是预览阶段,但是随着WisOne团队的不断升级和完善,相信不久的将来,我们就可以在WisOne上使用TypeScript来开发专业性的Web应用了。

Example 1:Hello Word!

接下来让我们来了解一下如何在WisOne平台上学习TypeScript,就从经典的Hello Word开始,步骤如下所示:

(1)从工具栏上拖一个按钮,如图1.2所示。

(2)选中按钮,可以在属性面板中设置按钮的属性信息,是不是很像Visual Studio或者是Delphi等集成化开发环境。在属性面板中,设置Caption属性为“Hello World”,以更改按钮的显示文字。

(3)双击按钮,将进入到WisOne的代码编辑环境,可以看到WisOne自动产生了单击事件代码存根,在空白处输入代码即可,如图1.3所示。

由图中可以发现,WisOne的代码编辑器有智能提示功能,这对于初学TypeScript的人来说,实在太妙了,不用安装庞大的Visual Studio,也可以直接玩转TypeScript的语法提示。

(4)在代码存根位置输入如下的代码:

button1Click(sender: Core.Classes.TComponent){
//我的第一行TypeScript代码
this.button1.caption="你好,世界";
}

 

这行代码用于更改按钮的标题,可以看到,WisOne的IDE对TypeScript进行了很好的整合,这让整个Web IDE特别的具有Windows版开发工具的味道。

好了,已经迫不急待的要运行代码了,单击WisOne IDE左上角的“运行”按钮,如图1.4所示。

可以看到WisOne在一个新的页面上开启了我们的窗口,单击按钮,是不是发现按钮的标题已经发生了改变,如图1.5所示。

Example 2:使用TypeScript类型

接下来看一下TypeScript中如何使用类型,javaScript是不需要显示定义类型的,为变量的赋值决定了其类型,这种弱类型的语法极不利于大型可扩展的应用开发,而TypeScript提出了类型的概念,在定义变量时可以指定其类型,这个示例中向窗口中再次添加一个按钮,然后编写如下的示例代码:

module Unit1{

//定义一个函数,可以看到TypeScript的强类型代码

function Greeter(greeting: string) {

this.greeting = greeting;

}

export class TForm1 extends Core.Forms.TForm{

btnType: Core.StdCtrls.TButton;

btnTypeClick(sender: Core.Classes.TComponent){

//构造一个Greeter类的实例

var greeter = new Greeter("Hello world");

//访问Greeter类的属性

this.btnType.caption=greeter.greeting;

}

}

}

 

在Unit1单元名称下面,定义了一个函数Greeter,可以看到这个函数的形式参数是string类型的值,在函数体内定义了一个属性。

在按钮的单击事件处理代码中,首先实例化了Greeter类的实例,然后调用其属性,如果为Greeter的构造函数传递一个非字符串类型的值,WisOne将会抛出错误提示,如图1.6所示:

可以看到,WisOne在编译TypeScript时,将错误提示显示在调试面板中,非常便于我们了解其中的语法错误,TypeScript提供了类型功能,这对于开发大型可扩展的应用来说,确实是一个必要的功能。

将123456删除,替换为一个字符串,然后运行程序,这次成功运行通过,单击按钮将显示Greeter中的属性值,如图1.7所示。

小结

本文介绍了在WisOne平台上开发TypeScript的基础知识,讨论了WisOne IDE的组成,以及如何使用WisOne编写TypeScript代码,通过一个经典的“Hello World”来演示如何在WisOne平台上编写TypeScript代码。最后通过一个类型化的TypeScript示例,介绍了WisOne平台的调试功能。

关于WisOne平台的更多信息,可以通过如下的网址获取:

http://www.wisone.com/


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
TypeScript-类兼容性发布时间:2022-07-18
下一篇:
迈向angularjs2系列(1):typescript指南发布时间:2022-07-18
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap