转自：https://blog.csdn.net/weixin_40326107/article/details/81626873
简单介绍
TypeScript，和C#一样是微软搞出来的，是一个微软开发的自由的、开源的编程语言，而且都是大牛Anders Hejlsberg领导开发的。它是JavaScript的一个超集，本质上是向js语言添加了可选的静态类型和基于类的面向对象编程，并不是vue或者某个前端框架特有的工具。
我们知道，js是弱类型语言，没有命名空间，在开发大型的前端项目的时候，一度成为制约其模块化编程的一个重要因素。
1.1 简单的案例说明
1.安装TypeScript
一般安装TS的方式有两种，分别是：npm的包管理方式和安装TS的Visual Studio插件两种方式
这里使用的是npm的方式：
npm install -g typescript
2.创建一个html文件运行生成的js文件
这里我们可以看到，我们使用greeter.js来实现显示
<!DOCTYPE html> <html> <head><title>TypeScript Greeter</title></head> <body> <script src="greeter.js"></script> </body> </html>
3.创建一个ts（TypeScript）文件
在文件中写入如下代码
function greeter(person) { return "Hello, " + person; } let user = "Jane User"; document.body.innerHTML = greeter(user)
4.编译代码：
这里使用的是.ts扩展名,但是其中的代码是纯粹的js代码,这个代码可以被替换为你正在使用的任何其他js代码
在命令行中,运行TypeScript编辑器:
tsc greeter.ts
编译完成后会在当前目录下生成一个相应的js文件：
5.执行
编译结果将是一个greeter.ts包涵你所输入的相同的js文件，我们在javaScript应用程序中使用TS启动并执行。
6.以typescript语法写.ts文件
6.1
现在，我们使用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文件，发现还是会被正常使用：
6.2接口
我们可以使用接口来描述有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);
运行结果与之前上面的没有变化。
6.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应用程序
运行后得到的结果如下：
