Knockout.js

    这个快速上手指南会告诉你如何结合使用TypeScript和Knockout.js。

    这里我们假设你已经会使用和npm

    首先，我们新建一个目录。 暂时命名为，当然了你可以使用任何喜欢的名字。

    接下来，我们按如下方式来组织这个工程：

    1. proj/
    2.    ├─ src/
    3.    └─ built/

    TypeScript源码放在src目录下，结过TypeScript编译器编译后，生成的文件放在built目录里。

    下面创建目录：

    1. mkdir src
    2. mkdir built

    初始化工程

    现在将这个文件夹转换为npm包。

    1. npm init

    你会看到一系列提示。 除了入口点外其它设置都可以使用默认值。 你可以随时到生成的package.json文件里修改这些设置。

    我们还要获取Knockout的声明文件，它描述了这个库的结构供TypeScript使用。

    1. npm install --save @types/knockout

    获取运行时依赖

    我们需要Knockout和RequireJS。 是一个库，它可以让我们在运行时异步地加载模块。

    有以下几种获取方式：

    1. 手动下载文件并维护它们。
    2. 通过像Bower这样的包管理下载并维护它们。
    3. 使用内容分发网络（CDN）来维护这两个文件。

    我们使用第一种方法，它会简单一些，但是Knockout的官方文档上有讲解，更多像RequireJS一样的代码库可以在cdnjs上查找。

    下面让我们在工程根目录下创建externals目录。

    1. mkdir externals

    然后和下载RequireJS到这个目录里。 最新的压缩后版本就可以。

    下面我们想把所有的TypeScript文件整合到一起 - 包括自己写的和必须的声明文件。

    我们需要创建一个tsconfig.json文件，包含了输入文件列表和编译选项。 在工程根目录下创建一个新文件tsconfig.json，内容如下：

    1. {
    2.     "compilerOptions": {
    3.         "sourceMap": true,
    4.         "noImplicitAny": true,
    5.         "module": "amd",
    6.         "target": "es5"
    7.     },
    8.     "files": [
    9.         "./src/require-config.ts",
    11.     ]
    12. }

    你可能会对typings目录下的browser.d.ts文件感到好奇，尤其因为我们将在浏览器里运行代码。 其实原因是这样的，当目标为浏览器的时候，一些包会生成不同的版本。 通常来讲，这些情况很少发生并且在这里我们不会遇到这种情况，所以我们可以忽略browser.d.ts。

    你可以在查看更多关于tsconfig.json文件的信息

    写些代码

    下面我们使用Knockout写一段TypeScript代码。 首先，在src目录里新建一个hello.ts文件。

    接下来，在src目录下再新建一个require-config.ts文件。

    1. declare var require: any;
    2. require.config({
    3.     paths: {
    4.         "knockout": "externals/knockout-3.4.0",
    5.     }
    6. });

    这个文件会告诉RequireJS从哪里导入Knockout，好比我们在hello.ts里做的一样。 你创建的所有页面都应该在RequireJS之后和导入任何东西之前引入它。 为了更好地理解这个文件和如何配置RequireJS，可以查看。

    我们还需要一个视图来显示HelloViewModel。 在proj目录的根上创建一个文件index.html，内容如下：

    1. <!DOCTYPE html>
    2. <html>
    3.     <head>
    5.     </head>
    6.     <body>
    7.         <p>
    8.             Hello from
    9.             <strong data-bind="text: language">todo</strong>
    10.             and
    11.             <strong data-bind="text: framework">todo</strong>!
    12.         </p>
    14.         <p>Language: <input data-bind="value: language" /></p>
    15.         <p>Framework: <input data-bind="value: framework" /></p>
    17.         <script src="./externals/require.js"></script>
    18.         <script src="./built/require-config.js"></script>
    19.         <script>
    20.             require(["built/hello"]);
    21.         </script>
    22.     </body>
    23. </html>

    注意，有两个script标签。 首先，我们引入RequireJS。 然后我们再在require-config.js里映射外部依赖，这样RequireJS就能知道到哪里去查找它们。 最后，使用我们要去加载的模块去调用require。

    运行

    1. tsc