TypeScript 学习笔记9: Real-World Application Development

原文链接：https://leanpub.com/essentialtypescript/read#leanpub-auto-real-world-application-development
在TypeScriptTodo工程中，创建如下文件，把书中的代码复制过去：
1. index.html
2. TodoService.js
3. TodoListComponent.js
4. TodoApp.js
在Terminal中，cd到TypeScriptTodo目录下，启动lite-server。浏览器会自动启动，显示如下页面：

这是用传统的js实现的web app，没有使用任何TypeScript代码。使用前几章学到的知识，我们要把它变成TypeScript风格的代码。

1. 把现有的 JavaScript 代码转换成 TypeScript

TypeScript是js的超集，那么，在TypeScript的工程中，可以任意使用js语法。也就是说，我们可以把一部分代码改成TypeScript，web app 依然会正常运行。
在Terminal中，cd到TypeScriptTodo目录下，启动 tsc -w
按照书中的步骤，一点点的把js文件改成ts文件。这一小节没有介绍新的知识，是对前几章内容的复习。

2. 创建 Declaration Files

declare 关键字

declare var $: any;

这行代码声明了一个变量 $，但并没有定义这个变量，它不会生成js代码，只是给后续的TypeScript代码提供这个变量的类型信息。

Declaration Files

第三方库，或者，我们提供给别人的js库，通常都不是TypeScript文件，而是用tsc编译好的js文件。通过这些js文件，无法得到TypeScript的类型信息。要提供类型信息需要同时提供 declaration 文件。如何生成这种文件呢？
修改 tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "declaration": true
  }
}

设置 declaration 属性为true之后，tsc会给每个 ts 文件生成一个 .d.ts 文件，如：

//TodoApp.d.ts
export declare class TodoApp {
    private todoService;
    private todoList;
    constructor(el: any, todos: any);
    addTodo(todoName: any): void;
    clearCompleted(): void;
    toggleTodoState(todoId: any): void;
    renderTodos(): void;
    initialize(el: any): void;
}

3. 引用第三方库

如何获取第三方库(例如：jQuery)的TypeScript类型信息呢？ 有人做了一个社区，专门收集这类东西：http://definitelytyped.org
书中使用tsd来安装jQuery的类型信息，不知为啥，我在运行 tsd query jquery 时，总是得到 “>> zero results”。所以，只好放弃了。改用 typings 是可以的。
运行：

npm install typings -g
typings search jquery
typings install dt~jquery --global --save

说明：
1. 第一步用npm安装 typings，这是一个查询/安装 TypeScript 类型库的工具；
2. 第二步，到typings服务器上查询 jquery 的类型库；
3. 第三步，安装 jquery 类型库；
4. dt~ 是指定源服务器，因为，第一次我没有加这个前缀，安装报错：
   typings ERR! message Unable to find “jquery” in the registry.
   typings ERR! message However, we found “jquery” for 1 other source: “dt”
5. –save 会生成typings.json文件:

{
  "globalDependencies": {
    "jquery": "registry:dt/jquery#1.10.0+20170310222111"
  }
}

下载的类型库会保存在 TypeScriptTodo/typings/ 目录下，有了typings.json文件，即使我们删除了这个目录，也可以很容易的恢复：

rm -rf typings
typings install

还有一个问题，原书中的TodoListComponent.ts中使用了jQueryStatic:

class TodoListComponent {

    private $el: JQueryStatic;

    constructor(el: HTMLElement) {
        this.$el = $(el);
    } 

第6行总是报错：

我把它改成 JQuery就好了：

private $el: JQuery;

不知道为什么。这个JQueryStatic到底是什么东西呢？

4. 转换成 External Modules

在第一小节中，所有的js代码都改成了ts，但没有使用Module功能，在各个文件中定义的类都是全局的，现在，把它们改成 External Module。

1. 使用system.js loader

在tsconfig.json 中添加：
“module”: “system”

2. 给各个ts文件加上 export 和 import

上一章讲的很清楚了。

3. import 第三方库

TodoListComponent.ts 需要使用jQuery：

import '//code.jquery.com/jquery-1.12.1.min.js';

import 不仅可以导入工程内部的模块，也可以引用第三方库，只要指定合法的URL。

4. default member

//TodoService.ts
export default class TodoService implements ITodoService {

//TodoApp.ts
import TodoService, { ITodoService } from './TodoService';

这个default到底有什么用？ 除了import时不用花括号，还有什么好处？ 不知道。

5. 在index.html 中加载system.js

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.22/system.js"></script>

system.js loader不是TypeScript的内置模块，需要显示引用。当然，也可以把它下载到本地。别忘了写这行代码：

<script type="text/javascript">
    System.defaultJSExtensions = true;
</script>

否则，程序运行错误。

6. 创建TodoApp的实例

System.import('TodoApp').then(function(module) {
    new module.TodoApp(document, [
        'Pick up drycleaning',
        'Clean Batcave',
        'Save Gotham'
    ]);
})

system.js loader 使用了promise，这样可以确保必要的模块加载完毕才创建 TodoApp。

5. 使用映射文件调试 TypeScript 代码

先制造一个小bug，把TodoApp.ts 文件中的:

var todoId = evnt.detail.todoId;

改成：

var todoId = evnt.details.todoId;

这样，当点击网页上的checkbox时，会引发异常：

可以看到，异常发生在 TodoApp.js 的第45行，注意，不是在 TodoApp.ts 文件中。我们怎么能定位到 TodoApp.ts 文件相应的代码上呢？使用 Source map。
修改tsconfig.json 文件，添加 sourceMap 属性：

{
  "compilerOptions": {
    //...
    "sourceMap": true
  }
}

立刻，tsc 给每一个 ts 文件创建了 .js.map 文件，而且，相应的 .js 文件的最下面也多出来一行：

//# sourceMappingURL=TodoApp.js.map

这个 map 文件的作用，就是把 .js 文件和 .ts 文件的代码建立一一映射。浏览器会自动搜索 .js.map 文件，当我们debug时，可以直接调试 ts 文件，而不是tsc生成的 js 文件。 注意，这是浏览器提供的功能。Chrome支持这个功能，Safari不支持。