TypeScript系列教程--初探TypeScript
王不会
今天给大家带来的是TypeScript
系列学习教程之一的第一篇:初探TypeScript。
关于TypeScript
TypeScript
-- JavaScript的超集
TypeScript是JavaScript类型的超集,它可以编译成纯JavaScript。
TypeScript可以在任何浏览器、任何计算机和任何操作系统上运行,并且是开源的。
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里输入如下内容:
<!DOCTYPE html>
<html><head><title>TypeScript Greeter</title></head><body><script src="greeter.js"></script></body>
</html>
在浏览器里打开greeter.html运行这个应用!
可选地:在Visual Studio里打开greeter.ts
或者把代码复制到TypeScript playground。 将鼠标悬停在标识符上查看它们的类型。 注意在某些情况下它们的类型可以被自动地推断出来。 重新输入一下最后一行代码,看一下自动补全列表和参数列表,它们会根据DOM元素类型而变化。 将光标放在 greeter
函数上,点击F12可以跟踪到它的定义。 还有一点,你可以右键点击标识,使用重构功能来重命名。
转载于:https://www.cnblogs.com/wangbuhui/p/8316171.html
TypeScript系列教程--初探TypeScript相关推荐
- TypeScript系列教程十一《装饰器》 -- 属性装饰器
系列教程 TypeScript系列教程一<开篇> TypeScript系列教程二<安装起步> TypeScript系列教程三<基础类型> TypeScript系列教 ...
- 【TypeScript系列教程02】安装及使用
目录 TypeScript 安装 NPM 安装 TypeScript 测试安装结果 本教程使用VSCode TypeScript 安装 我们需要使用到 npm ,你需要安装Node.js: NPM 安 ...
- 【总结】1277- 重学 TypeScript 系列教程
非常不错的 TypeScript 学习资料,一起推荐给小伙伴们,值得好好看看哈~ 以下是正文. TypeScript 是一种由微软开发的自由和开源的编程语言.它是 JavaScript 的一个超集,而 ...
- 【TypeScript系列教程14】Array数组对象的常见的方法
目录 TypeScript Array(数组) concat() every() filter() forEach() join() lastIndexOf() map() pop() push(
- 【TypeScript系列教程12】Number对象的基本使用
目录 TypeScript Number 语法 Number 对象属性 JavaScript NaN 实例 prototype 实例 Number 对象方法 TypeScript Number Typ ...
- 【TypeScript系列教程11】函数的使用
目录 TypeScript 函数 函数定义 实例 实例 函数返回值 实例 带参数函数 实例 JavaScript
- 【TypeScript系列教程10】循环语句的使用
目录 TypeScript 循环 for 循环 语法 实例 for-in 循环 语法 实例 for-of .forEach.every 和 some 循环
- 【TypeScript系列教程09】条件语句的使用
目录 TypeScript 条件语句 条件语句 if 语句 语法 实例 if-else 语句 语法 实例 if-else if-.else 语句
- 【TypeScript系列教程07】变量声明
目录 TypeScript 变量声明 实例 类型断言(Type Assertion) TypeScript 是怎么确定单个断言是否足够 类型推断 变量作用域 TypeScript 变量声明
- 【TypeScript系列教程06】基础类型
目录 TypeScript 基础类型 任意类型 (any) 变量的值会动态改变时 改写现有代码时 定义存储各种类型数据的数组时 数字类型 (number)
最新文章
- java vs .net
- 世界地图20亿像素_高通骁龙690 5G平台发布,支持1.92亿像素性能提升20%
- java io流(字符流) 文件打开、读取文件、关闭文件
- 计算机网络多元化媒体传达,【多媒体技术论文】视觉传达设计多媒体技术的应用(共4007字)...
- 大学考试分数越高学分越多吗_大学的绩点和学分有什么用?影响学生毕业吗
- LeetCode 131. 分割回文串(回溯)
- 【Android】安卓闪电复习
- python怎么注释掉一段代码_爬取出来的网页代码都被注释掉怎么解决?
- sqlmap常见命令
- 机器学习基本概念-有监督学习和无监督学习
- 人工智能 - paddlepaddle飞桨 - 深度学习基础教程 - 数字识别
- 实体机安装linux系统,实体机安装Ubuntu系统
- 解决类似微信聊天界面软键盘和表情框冲突问题
- latex大括号 多行公式_问题百出的MathType公式编辑器,会有替代品吗?
- 室内设计——办公楼创意室内设计(包含预览图jpg和.psd文件)
- 区块链关键技术1(笔记)
- 大数据之Linux 基础
- java compiler类_利用 JavaCompiler 编译 Java 类文件
- 如何让ecshop做淘宝客
- WEB服务器迁移协议,web服务器迁移
热门文章
- 大整数减法的c语言程序,求用C编个大数加减法运算程序
- python的设计具有很强的可读性_Python是什么?具有怎么样的特点呢?
- C语言求组合数取模,C 习题1.pdf
- python字符串重复输出例子_使用python语言,比较两个字符串是否相同的实例
- 图的存储结构之十字链表、邻接多重表、边集数组
- ogre 1.9SDK阅读笔记
- PHP用户名和密码登陆验证代码
- RHEL 5基础篇—管理系统计划任务
- iPhone程序中如何生成随机数
- [ExtJs4.0]数据从excle2003导入到数据库【2-1】