TypeScript入门和简单案例

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› TypeScript›TypeScript教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

转自：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应用程序

运行后得到的结果如下：