在html中写typescript,5分钟上手TypeScript
让我们使用TypeScript来创建一个简单的Web应用。
安装TypeScript
有两种主要的方式来获取TypeScript工具:
通过npm(Node.js包管理器)
安装Visual Studio的TypeScript插件
Visual Studio 2017和Visual Studio 2015 Update 3默认包含了TypeScript。 如果你的Visual Studio还没有安装TypeScript,你可以下载它。
针对使用npm的用户:
> npm install -g typescript
构建你的第一个TypeScript文件
在编辑器,将下面的代码输入到greeter.ts文件里:
function greeter(person) {
return "Hello, " + person;
}
let user = "Jane User";
document.body.innerHTML = greeter(user);
编译代码
我们使用了.ts扩展名,但是这段代码仅仅是JavaScript而已。 你可以直接从现有的JavaScript应用里复制/粘贴这段代码。
在命令行上,运行TypeScript编译器:
tsc greeter.ts
输出结果为一个greeter.js文件,它包含了和输入文件中相同的JavsScript代码。 一切准备就绪,我们可以运行这个使用TypeScript写的JavaScript应用了!
接下来让我们看看TypeScript工具带来的高级功能。 给
person函数的参数添加: string类型注解,如下:
function greeter(person: string) {
return "Hello, " + person;
}
let user = "Jane User";
document.body.innerHTML = greeter(user);
类型注解
TypeScript里的类型注解是一种轻量级的为函数或变量添加约束的方式。 在这个例子里,我们希望
greeter函数接收一个字符串参数。 然后尝试把
greeter的调用改成传入一个数组:
function greeter(person: string) {
return "Hello, " + person;
}
let user = [0, 1, 2];
document.body.innerHTML = greeter(user);
重新编译,你会看到产生了一个错误。
greeter.ts(7,26): error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.
类似地,尝试删除greeter调用的所有参数。 TypeScript会告诉你使用了非期望个数的参数调用了这个函数。 在这两种情况中,TypeScript提供了静态的代码分析,它可以分析代码结构和提供的类型注解。
要注意的是尽管有错误,greeter.js文件还是被创建了。 就算你的代码里有错误,你仍然可以使用TypeScript。但在这种情况下,TypeScript会警告你代码可能不会按预期执行。
接口
让我们开发这个示例应用。这里我们使用接口来描述一个拥有firstName和lastName字段的对象。 在TypeScript里,只在两个类型内部的结构兼容那么这两个类型就是兼容的。
这就允许我们在实现接口时候只要保证包含了接口要求的结构就可以,而不必明确地使用
implements语句。
interface Person {
firstName: string;
lastName: string;
}
function greeter(person: Person) {
return "Hello, " + person.firstName + " " + person.lastName;
}
let user = { firstName: "Jane", lastName: "User" };
document.body.innerHTML = greeter(user);
类
最后,让我们使用类来改写这个例子。 TypeScript支持JavaScript的新特性,比如支持基于类的面向对象编程。
让我们创建一个Student类,它带有一个构造函数和一些公共字段。 注意类和接口可以一起共作,程序员可以自行决定抽象的级别。
还要注意的是,在构造函数的参数上使用public等同于创建了同名的成员变量。
class Student {
fullName: string;
constructor(public firstName, public middleInitial, public lastName) {
this.fullName = firstName + " " + middleInitial + " " + lastName;
}
}
interface Person {
firstName: string;
lastName: string;
}
function greeter(person : Person) {
return "Hello, " + person.firstName + " " + person.lastName;
}
let user = new Student("Jane", "M.", "User");
document.body.innerHTML = greeter(user);
重新运行tsc greeter.ts,你会看到生成的JavaScript代码和原先的一样。 TypeScript里的类只是JavaScript里常用的基于原型面向对象编程的简写。
运行TypeScript Web应用
在greeter.html里输入如下内容:
TypeScript Greeter
在浏览器里打开greeter.html运行这个应用!
可选地:在Visual Studio里打开greeter.ts或者把代码复制到TypeScript playground。 将鼠标悬停在标识符上查看它们的类型。 注意在某些情况下它们的类型可以被自动地推断出来。
重新输入一下最后一行代码,看一下自动补全列表和参数列表,它们会根据DOM元素类型而变化。 将光标放在
greeter函数上,点击F12可以跟踪到它的定义。 还有一点,你可以右键点击标识,使用重构功能来重命名。
这些类型信息以及工具可以很好的和JavaScript一起工作。 更多的TypeScript功能演示,请查看本网站的起步部分。
在html中写typescript,5分钟上手TypeScript相关推荐
- js 加入debug后可以进入controller_写给前端的 Nest.js 教程——10分钟上手后端接口开发
前言 沉默了很久,一直都没发文章,有些惭愧. 最近实习结束之后回了学校,提前开始做毕业设计了.对,就是毕业设计. 近两个月把 React Native.Vue 3.0 和 Nest.js 都摸了一下, ...
- AirtestIDE 教程 — 5分钟上手自动化测试
AirtestIDE 教程 - 5分钟上手自动化测试::http://airtest.netease.com/tutorial/Tutorial.html AirtestIDE 官方文档:http:/ ...
- 教你三分钟上手阿里云OOS上传操作
教你三分钟上手阿里云OOS上传操作 1.注册登录 如果小伙伴需要进行使用阿里云oss操作,第一步我们得注册/登录阿里云 https://www.aliyun.com/,小编建议大家尽量使用支付宝登录, ...
- 快速上手 TypeScript
快速上手 TypeScript ypeScript 简称 TS ,既是一门新语言,也是 JS 的一个超集,它是在 JavaScript 的基础上增加了一套类型系统,它支持所有的 JS 语句,为工程化开 ...
- 1-5分钟上手自动化测试——Airtest+Poco快速上手
1 | 5分钟上手自动化测试--Airtest+Poco快速上手 1.1 前言 本文档将演示如何使用Airtest Project专用的编辑器AirtestIDE,编写Airtest+Poco自动化脚 ...
- 15分钟上手vue3.0(小结)
这篇文章主要介绍了15分钟上手vue3.0,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值 Vue 3 还没有正式发布,但是 Alpha 版本已经发布了. 虽然官方还不推荐 ...
- AirtestIDE 教程 : 5分钟上手自动化测试
都跟简单,只要认真钻研. AirtestIDE 教程 - 5分钟上手自动化测试::http://airtest.netease.com/tutorial/Tutorial.html AirtestID ...
- 小猪的Python学习之旅 —— 10.三分钟上手Requests库
小猪的Python学习之旅 -- 10.三分钟上手Requests库 标签:Python 一句话概括本文: 本节讲解Requests库的常见使用,以及一个实战项目: 扒取某一篇微信文章里所有的图片,视 ...
- access 提供程序无法确定object 值_Python | 加一行注释,让你的程序提速10+倍!numba库十分钟上手指南...
如果你在使用Python进行高性能计算,Numba提供的加速效果可以比肩原生的C/C++程序,只需要在函数上添加一行@jit的装饰.它支持CPU和GPU,是数据科学家必不可少的编程利器. 之前的文章 ...
最新文章
- R语言KEGGREST包
- ati显卡驱动安装linux,恭喜自己 ati显卡驱动安装成功
- Linux内核驱动之GPIO子系统(一)GPIO的使用
- mysql中列的默认值
- CentOS7网络配置,安装jdk,tomcat和mysql全过程
- mysql工厂模式_设计模式-三种工厂模式实例
- tomcat端口被占用了怎么办
- OpenCV-图像处理(23、直方图均衡化)
- IDEA配置maven本地仓库
- nbu 7.5备份oracle,NBU7.5备份oracle
- 漫谈历法、闰年与闰月
- vs2017无法解析外部符号__imp__fprintf和__imp____iob_func
- v.douyin.com生成制作抖音缩短口令网址php接口方法
- 恒星结构和演化-学习记录6-第五章-恒星核合成
- 微信小游戏 缓存目录
- java sql语句模糊查询
- 应用在复印机触摸屏中的触摸IC
- 移植opencv到嵌入式arm详细过程
- 高项.2021案例默写
- Spring框架中IOC和DI的区别