TypeScript开篇:尝点新鲜和甜头

简介:

快速开始

我们通过创建一个简单的web应用来开始使用TypeScript。获得TS工具的方法主要有两种,一种是通过NPM(Node包管理器),另一种是通过VS2012安装TS的插件。VS2013 Update2默认已经包含了TS插件模板。

VS2013的开发者:

为你的VS2013安装TS

VS2015的开发者:

可以直接使用TS了

NPM用户:

执行命令 > npm install -g typescript


打开我的VS2015 Professional,打开扩展和更新,发现TS已经更新到1.6.3了,看来还是更新的挺快嘛,我赶紧就更新了TS,准备常常鲜。

image_thumb11

重启VS,新建项目——>其他语言——>TypeScript——>起一个好的解决方案和项目名字,点击确定,会出现下图的解决方案目录。

image_thumb1

默认,这些文件中都是有内容的,是一个Demo代码,现在,我们先删除这些代码,自己写一个类似Hello World的脚本。

现在,我新建一个greeter.ts文件,输入下面的JavaScript代码,然后将greeter.js的应用放在index.html的</body>之前:

 1 function greeter(person) { 2     return "Hello," + person; 3 } 4  5 var user = "World!"; 6  7 document.body.innerHTML = greeter(user);

index.html内容如下:

<!DOCTYPE html><html lang="en"><head>    <meta charset="utf-8" />    <title>TypeScript Demo</title>    <link rel="stylesheet" href="app.css" type="text/css" />    </head><body>    <h1>TypeScript Demo</h1>    <script src="greeter.js"></script></body></html>

保存,在浏览器查看结果:

image

虽然我们创建的是ts扩展名的文件,但是代码依然是JavaScript的代码,你可以直接将这些代码复制/粘贴到一个现有的JavaScript应用中去运行。

当然,如果你用的Node.js的NPM,可以使用下面的命令进行ts文件的编译:

> tsc greeter.ts
下面不再多说关于NPM中如果编译ts,运行js。只讲关于在VS中如何进行演示。
 
现在,我们开始使用TS中提供的一些新的东西。就像下面演示的那样,给function的参数person添加一个“:string”注解:
 1 function greeter(person:string) {//这里的string就表明了person是string类型 2     return "Hello," + person; 3 } 4  5 var user = "World!"; 6  7 document.body.innerHTML = greeter(user);//相应地,这里传进来的实参只能是string类型的

TS中的类型注解是记录目标函数契约或变量的轻量方式。在此例中,我们想要调用一个具有唯一的string类型参数的greeter函数。如果,在调用greeter函数时,传入的参数是其它类型,再次编译时就会报错,一是编辑器中会划出波浪线提示错误,而是错误列表中也有提示。

image

类似地,尝试移除greeter函数调用时的实参。编译器会告诉你下面的结果:

image

在这些情况下,ts编译器会基于代码的结构和你提供的类型注解,给出静态的分析结果。

要注意的是,即使存在编译错误,相应的js文件还是会被创建的。但在这种情况下,TS是在警告你,你的代码很可能不会按你想象的那样去执行。

继续代码的扩展。这里我们使用一个具有firstname和lastname字段的接口。在TS中,如果两个类型的内部结构是兼容的,那么它们就是兼容的。这样的话,我们就可以通过创建该接口要求的模型来实现接口,而不用使用显式的“implements”语句。代码在线演示

 1 interface Person { 2     firstname: string; 3     lastname: string; 4 } 5 function greeter(person: Person) {//这里的string就表明了person是string类型 6     return "Hello," + person.firstname + person.lastname; 7 } 8  9 var user = {firstname:"tkb",lastname:"至简"};10 11 document.body.innerHTML = greeter(user);//相应地,这里传进来的实参只能是string类型的

最后,让我们使用TS中的类来扩展这个例子。TS支持当前ES6对于基于类的面向对象编程的提议。

这里我们创建一个具有构造函数和一些公共字段的Student类。注意类和接口可以一起工作,以便程序员决定谁才是合适的抽象级别。

也要注意,构造函数参数的“public”是一种速写,目的是允许我们自动创建属性。在线演示

 1 class Student { 2     fullname: string; 3     constructor(public firstname, public middleInitial, public lastname) { 4         this.fullname = firstname + middleInitial + lastname; 5     } 6 } 7 interface Person { 8     firstname: string; 9     lastname: string;10 }11 function greeter(person: Person) {12     return "Hello," + person.firstname + person.lastname;13 }14 15 var user = new Student("tkb", "-", "至简" );16 17 document.body.innerHTML = greeter(user);

当然,你也可以在vs中保存即可自动编译,在浏览器中浏览页面即可,打开开发者工具,会看到编译生成的js文件,TS中的类就是在JS中频繁使用的基于原型的面向对象的一种速写。

注意使用VS编写TS代码有如下优势:

  1. 将光标悬停在变量或者参数上,可以看到它们的类型。
  2. VS基于DOM元素类型的智能提示会让你看到可用的完整列表和参数帮助。把光标放到函数的引用上,并按F12会看到函数的定义。
  3. 在一个标记上右键,可以使用重构重命名标记。



本文转自tkbSimplest博客园博客,原文链接:http://www.cnblogs.com/farb/p/4993415.html,如需转载请自行联系原作者
目录
相关文章
|
SQL 分布式计算 大数据
【大数据技术Hadoop+Spark】Spark SQL、DataFrame、Dataset的讲解及操作演示(图文解释)
【大数据技术Hadoop+Spark】Spark SQL、DataFrame、Dataset的讲解及操作演示(图文解释)
362 0
|
6月前
|
人工智能 JSON 小程序
【一步步开发AI运动APP】七、自定义姿态动作识别检测——之规则配置检测
本文介绍了如何通过【一步步开发AI运动APP】系列博文,利用自定义姿态识别检测技术开发高性能的AI运动应用。核心内容包括:1) 自定义姿态识别检测,满足人像入镜、动作开始/停止等需求;2) Pose-Calc引擎详解,支持角度匹配、逻辑运算等多种人体分析规则;3) 姿态检测规则编写与执行方法;4) 完整示例展示左右手平举姿态检测。通过这些技术,开发者可轻松实现定制化运动分析功能。
|
4月前
|
消息中间件 缓存 小程序
婚恋交友相亲公众号app小程序系统源码「脱单神器」婚恋平台全套代码 - 支持快速二次开发
这是一套基于SpringBoot + Vue3开发的婚恋交友系统,支持微信公众号、Uniapp小程序和APP端。系统包含实名认证、智能匹配、视频相亲、会员体系等功能,适用于婚恋社交平台和相亲交友应用。后端采用SpringBoot 3.x与MyBatis-Plus,前端使用Vue3与Uniapp,支持快速部署和二次开发。适合技术团队或有经验的个人创业者使用。
259 8
|
12月前
|
测试技术 API 项目管理
API测试方法
【10月更文挑战第18天】API测试方法
294 1
|
8月前
|
传感器 人工智能 机器人
【01】人形机器人研究试验-被有些网友痛骂“工业垃圾”“人工智障”上春晚的人形AI机器人-宇树科技机器人到底怎么样??-本系列优雅草卓伊凡亲自尝试下人形机器人的制造-从0开始学习并且制作机器人-可以跟随卓伊凡
【01】人形机器人研究试验-被有些网友痛骂“工业垃圾”“人工智障”上春晚的人形AI机器人-宇树科技机器人到底怎么样??-本系列优雅草卓伊凡亲自尝试下人形机器人的制造-从0开始学习并且制作机器人-可以跟随卓伊凡
416 1
【01】人形机器人研究试验-被有些网友痛骂“工业垃圾”“人工智障”上春晚的人形AI机器人-宇树科技机器人到底怎么样??-本系列优雅草卓伊凡亲自尝试下人形机器人的制造-从0开始学习并且制作机器人-可以跟随卓伊凡
|
9月前
|
监控 安全 算法
龙蜥衍生版KeyarchOS国密应用、eBPF安全技术实践介绍|龙蜥大讲堂107期
龙蜥衍生版KeyarchOS国密应用及eBPF安全技术实践介绍。本次分享由浪潮信息的霍文和甄鹏主讲,涵盖全栈国密、国密密钥证书、国密通信等内容,并介绍了基于eBPF技术的新一代零侵入安全防御组件KSecure。通过实际案例展示了敏感信息传输加密、虚拟机热迁移等应用场景,以及如何利用eBPF实现进程注入检测等安全功能。该技术方案有效提升了操作系统的安全性与合规性,为服务器提供了强大的安全保障。
224 12
龙蜥衍生版KeyarchOS国密应用、eBPF安全技术实践介绍|龙蜥大讲堂107期
|
11月前
|
人工智能 自然语言处理 监控
函数计算玩转 AI 大模型
本文总结了对一个基于函数计算和AI大模型的解决方案的理解和实践体验。整体而言,方案描述详细、逻辑清晰,易于理解。但在技术细节和部署引导方面还有提升空间,如增加示例代码和常见错误解决方案。函数计算的优势在部署过程中得到了有效体现,特别是在弹性扩展和按需计费方面。然而,针对高并发场景的优化建议仍需进一步补充。总体评价认为,该解决方案框架良好,但需在文档和细节方面继续优化。
|
C语言
C语言中的复合语句
C语言中的复合语句
1057 1
|
存储 数据安全/隐私保护 计算机视觉
Python教程:一文了解从Bytes到Bits的数据转换
在Python编程中,处理数据时经常需要在字节(bytes)和位(bits)之间进行转换。这种转换在网络通信、数据加密、图像处理等领域尤为常见。本文将详细介绍如何在Python中进行字节与位之间的转换,并提供一个实用的功能:如何在指定的位位置替换位数据。
811 4
|
开发工具
【专栏】Vim的可视模式是其强大之处,允许图形化选择文本
【4月更文挑战第28天】Vim的可视模式是其强大之处,允许图形化选择文本,。通过`v`、`V`和`Ctrl + v`进入。基本操作包括选择文本、复制/剪切(`y`、`d`)、粘贴(`p`)及退出(Esc或`<C-c>`)。高级技巧涉及结合其他Vim命令、宏录制和与系统剪贴板交互。掌握可视模式能大幅提升文本编辑效率。
321 1