TypeScript开篇：尝点新鲜和甜头

返回TS学习总目录

快速开始

我们通过创建一个简单的web应用来开始使用TypeScript。获得TS工具的方法主要有两种，一种是通过NPM（Node包管理器），另一种是通过VS2012安装TS的插件。VS2013 Update2默认已经包含了TS插件模板。

VS2013的开发者：

为你的VS2013安装TS

VS2015的开发者：

可以直接使用TS了

NPM用户：

执行命令 > npm install -g typescript

打开我的VS2015 Professional，打开扩展和更新，发现TS已经更新到1.6.3了，看来还是更新的挺快嘛，我赶紧就更新了TS，准备常常鲜。

重启VS，新建项目——>其他语言——>TypeScript——>起一个好的解决方案和项目名字，点击确定，会出现下图的解决方案目录。

默认，这些文件中都是有内容的，是一个Demo代码，现在，我们先删除这些代码，自己写一个类似Hello World的脚本。

现在，我新建一个greeter.ts文件，输入下面的JavaScript代码，然后将greeter.js的应用放在index.html的</body>之前：

 1 function greeter(person) {

 2     return "Hello," + person;

 3 }

 4

 5 var user = "World!";

 6

 7 document.body.innerHTML = greeter(user);

index.html内容如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8" />

    <title>TypeScript Demo</title>

    <link rel="stylesheet" href="app.css" type="text/css" />

</head>


<body>


<h1>TypeScript Demo</h1>


<script src="greeter.js"></script>


</body>


</html>

保存，在浏览器查看结果：

虽然我们创建的是ts扩展名的文件，但是代码依然是JavaScript的代码，你可以直接将这些代码复制/粘贴到一个现有的JavaScript应用中去运行。

当然，如果你用的Node.js的NPM，可以使用下面的命令进行ts文件的编译：

> tsc greeter.ts

下面不再多说关于NPM中如果编译ts，运行js。只讲关于在VS中如何进行演示。

现在，我们开始使用TS中提供的一些新的东西。就像下面演示的那样，给function的参数person添加一个“:string”注解：

 1 function greeter(person:string) {//这里的string就表明了person是string类型

 2     return "Hello," + person;

 3 }

 4

 5 var user = "World!";

 6

 7 document.body.innerHTML = greeter(user);//相应地，这里传进来的实参只能是string类型的

TS中的类型注解是记录目标函数契约或变量的轻量方式。在此例中，我们想要调用一个具有唯一的string类型参数的greeter函数。如果，在调用greeter函数时，传入的参数是其它类型，再次编译时就会报错，一是编辑器中会划出波浪线提示错误，而是错误列表中也有提示。

类似地，尝试移除greeter函数调用时的实参。编译器会告诉你下面的结果：

在这些情况下，ts编译器会基于代码的结构和你提供的类型注解，给出静态的分析结果。

要注意的是，即使存在编译错误，相应的js文件还是会被创建的。但在这种情况下，TS是在警告你，你的代码很可能不会按你想象的那样去执行。

继续代码的扩展。这里我们使用一个具有firstname和lastname字段的接口。在TS中，如果两个类型的内部结构是兼容的，那么它们就是兼容的。这样的话，我们就可以通过创建该接口要求的模型来实现接口，而不用使用显式的“implements”语句。代码在线演示

 1 interface Person {

 2     firstname: string;

 3     lastname: string;

 4 }

 5 function greeter(person: Person) {//这里的string就表明了person是string类型

 6     return "Hello," + person.firstname + person.lastname;

 7 }

 8

 9 var user = {firstname:"tkb",lastname:"至简"};

10

11 document.body.innerHTML = greeter(user);//相应地，这里传进来的实参只能是string类型的

最后，让我们使用TS中的类来扩展这个例子。TS支持当前ES6对于基于类的面向对象编程的提议。

这里我们创建一个具有构造函数和一些公共字段的Student类。注意类和接口可以一起工作，以便程序员决定谁才是合适的抽象级别。

也要注意，构造函数参数的“public”是一种速写，目的是允许我们自动创建属性。在线演示

 1 class Student {

 2     fullname: string;

 3     constructor(public firstname, public middleInitial, public lastname) {

 4         this.fullname = firstname + middleInitial + lastname;

 5     }

 6 }

 7 interface Person {

 8     firstname: string;

 9     lastname: string;

10 }

11 function greeter(person: Person) {

12     return "Hello," + person.firstname + person.lastname;

13 }

14

15 var user = new Student("tkb", "-", "至简" );

16

17 document.body.innerHTML = greeter(user);

当然，你也可以在vs中保存即可自动编译，在浏览器中浏览页面即可，打开开发者工具，会看到编译生成的js文件，TS中的类就是在JS中频繁使用的基于原型的面向对象的一种速写。

注意使用VS编写TS代码有如下优势：

将光标悬停在变量或者参数上，可以看到它们的类型。
VS基于DOM元素类型的智能提示会让你看到可用的完整列表和参数帮助。把光标放到函数的引用上，并按F12会看到函数的定义。
在一个标记上右键，可以使用重构重命名标记。