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，准备常常鲜。

image_thumb11

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

image_thumb1

默认，这些文件中都是有内容的，是一个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>

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

image

虽然我们创建的是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函数时，传入的参数是其它类型，再次编译时就会报错，一是编辑器中会划出波浪线提示错误，而是错误列表中也有提示。

image

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

image

在这些情况下，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代码有如下优势：

  1. 将光标悬停在变量或者参数上，可以看到它们的类型。
  2. VS基于DOM元素类型的智能提示会让你看到可用的完整列表和参数帮助。把光标放到函数的引用上，并按F12会看到函数的定义。
  3. 在一个标记上右键，可以使用重构重命名标记。
posted @ 2015-11-25 00:21  tkbSimplest  阅读(5024)  评论(1)  编辑  收藏  举报