TypeScript学习——入门和简单案例
1.简单介绍
这里需要声明，TypeScript是一个微软开发的自由的、开源的编程语言，它是JavaScript的一个超集，本质上是向js语言添加了可选的静态类型和基于类的面向对象编程，并不是vue或者某个前端框架特有的工具。
我们知道，js是弱类型语言，没有命名空间，在开发大型的前端项目的时候，一度成为制约其模块化编程的一个重要因素
此文章需要有一定的前端基础，vue相关知识储备，看起来才不会吃力
1.1 简单的案例说明
1.安装TypeScript
一般安装TS的方式有两种，分别是：npm的包管理方式和安装TS的Visual Studio插件两种方式
这里使用的是npm的方式
npm:
> npm install -g typescript在cmd终端中可以查看安装的版本
2.创建一个html文件运行生成的js文件
这里我们可以看到，我们使用greeter.js来实现显示
TypeScript Greeter
3.构建一个ts（TypeScript）文件
在文件中写入如下代码
function greeter(person) {
return "Hello, " + person;
}
let user = "Jane User";
document.body.innerHTML = greeter(user)这种写法和类型java中的类的写法，构造，属性声明等
编译代码：
这里使用的是.ts扩展名,但是其中的代码是纯粹的js代码,这个代码可以被替换为你正在使用的任何其他js代码
在命令行中,运行TypeScript编辑器:
tsc greeter.ts编译完成后会在当前目录下生成一个相应的js文件
结果将是一个greeter.ts包涵你所输入的相同的js文件，我们在javaScript应用程序中使用TS启动并执行。
现在，我们使用TypeScript提供的新工具，:String 在person函数参数中添加一个类型的注解，如下所示：
function greeter(person: string) {
return "Hello, " + person;
}
let user = "Jane User";
document.body.innerHTML = greeter(user);查看html页面我们会看到，与之前的测试结果并没有变化。
输入注释
TypeScript中的类型注释是记录函数或者变量的预期契约的轻量级方法，在这种情况下，我们使用单子字符串参数调用greeter函数，我们可以尝试更改call greeter来传递一个数组：
function greeter(person: string) {
return "Hello, " + person;
}
let user = [0, 1, 2];
document.body.innerHTML = greeter(user);在终端中重新编译时，可以看到如下的告警：
很明显。这里的参数的类型有了String的验证，只允许传入string类型的数据
同样，尝试删除greeter调用的所有参数，TypeScript会通知您已使用意外数量的参数调用此函数，在这两种情况下，ts都可以根据代码结构和你提供的类型注释提供静态的分析
请注意，虽然存在错误，但是greeter.js文件还是会被创建，即使代码中存在错误，也可以使用TypeScript。但是这种情况下会报警代码可能无法按期运行
如上面的的错误已经发生，但是我们运行html文件，发现还是会被正常使用：
3. 接口
我们可以使用接口来描述有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);运行结果与之前上面的没有变化。
3.类
最后，让我们使用最后一次用类扩展实例，TypeScript支持javaScript中的新功能，例如支持基于类的对象编程。
这里，我们创建一个Student带有构造函数和一些公共字段的类，请注意，类和接口可以很好的协同工作，让程序员决定正确的抽象级别
指的注意的是，使用public构造函数on参数是一种简写，允许我们自动创建具有该名称的简写
class Student {
fullName: string;
constructor(public firstName: string, public middleInitial: string, public lastName: string) {
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，TypeScript中的类只是JavaScript中经常使用的基于原型的OO的简写。
运行TypeScript Web应用程序
运行后得到的结果如下：
