TypeScript基础教程（笔记+应用快速上手）

什么是 TypeScript？
TypeScript 是一种由微软开发的自由和开源的编程语言，它是JavaScript的一个超集，扩展了JavaScript的语法。
它不是JavaScript的替代品，也不会为JavaScript代码添加任何新功能。相反，TypeScript允许程序员在其代码中使用面向对象的构造，然后将其转换为JavaScript。
TypeScript的优点：
**1.**静态类型，TypeScript代码比JavaScript 更容易预测且更容易调试。
2. 面向对象的功能（如模块和命名空间）使组织大型代码库更易于管理。
3. 编译步骤在到达运行时之前捕获错误。
4. 流行的框架Angular是用TypeScript编写的。虽然也可以在Angular中使用常规JavaScript，但您在框架中找到的大多数教程都是用TypeScript编写的。任何想要充分利用Angular和类似开发平台的人都会更好地了解TypeScript。
5. TypeScript类似于CoffeeScript，另一种编译为JavaScript的语言，但由于静态类型，前者比后者更灵活。

JavaScript、TypeScript、ES6三者之间的联系和区别
ES6是什么
ECMAScript 6.0（以下简称ES6）是JavaScript语言（现在是遵循ES5标准）的下一代标准，已经在2015年6月正式发布了。它的目标，是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

ECMAScript和JavaScript的关系
由于JavaScript的创造者Netscae公司的版权问题，ECMAScript不能叫Javascript。总之，ECMAScript和JavaScript的关系是，前者是后者的规格（语言规范），后者是前者的一种实现。

JavaScript 与 TypeScript 的关系
TypeScript是Javascript的超集，实现以面向对象编程的方式使用Javascript。当然最后代码还是编译为Javascript。

TypeScript和ES6的关系
TypeScript是ES6的超集。至于需不需要使用，在于你所需要的场景。比如在Angular2中，用TypeScript明显好于ES6。

总结一下：
ES6是Javascript语言的标准，typescript是ES6的超集，Angular2是基于typescript来开发的JS框架。

快速上手TypeScript

有两种主要的方式来获取TypeScript工具：
通过npm（Node.js包管理器）
安装Visual Studio的TypeScript插件
Visual Studio 2017和Visual Studio 2015 Update 3默认包含了TypeScript。
使用npm安装：

npm install -g 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调用的所有参数。 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里输入如下内容：

在浏览器里即可打开greeter.html运行这个应用！

这就是TypeScript的简单应用