集册 TypeScript 中文手册 Knockout.js

Knockout.js

—— 新建工程

Xebcnor     最近更新时间：2020-08-04 05:37:59

230

首先，我们新建一个目录。

暂时命名为proj，当然了你可以使用任何喜欢的名字。

mkdir proj
cd proj

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

proj/
   +- src/
   +- built/

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

下面创建目录：

mkdir src
mkdir built

安装构建依赖

首先确保TypeScript和Typings已经全局安装。

npm install -g typescript typings

你肯定已经很了解TypeScript了，但你有可能还不太了解Typings. Typings是一个包管理器用来获取声明文件。

我们将会使用它来获取Knockout的声明文件。

typings install --global --save dt~knockout

--global标记会告诉Typings从DefinitelyTyped去获取声明文件，这是由社区维护的.d.ts文件仓库。

这个命令会在当前目录下创建一个typings.json文件和一个typings文件夹。

获取运行时依赖

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

有以下几种获取方式：

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

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

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

mkdir externals

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

添加TypeScript配置文件

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

我们需要创建一个tsconfig.json文件，包含了输入文件列表和编译选项。

在工程根目录下创建一个新文件tsconfig.json，内容如下：

{
    "compilerOptions": {
        "outDir": "./built/",
        "sourceMap": true,
        "noImplicitAny": true,
        "module": "amd",
        "target": "es5"
    },
    "files": [
        "./typings/index.d.ts",
        "./src/require-config.ts",
        "./src/hello.ts"
    ]
}

这里引用了typings/index.d.ts，它是Typings帮我们创建的。 这个文件会自动地包含所有安装的依赖。

你可能会对typings目录下的browser.d.ts文件感到好奇，尤其因为我们将在浏览器里运行代码。

其实原因是这样的，当目标为浏览器的时候，一些包会生成不同的版本。 通常来讲，这些情况很少发生并且在这里我们不会遇到这种情况，所以我们可以忽略browser.d.ts。

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

写些代码

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

import * as ko from "knockout";

class HelloViewModel {
    language: KnockoutObservable<string>
    framework: KnockoutObservable<string>

    constructor(language: string, framework: string) {
        this.language = ko.observable(language);
        this.framework = ko.observable(framework);
    }
}

ko.applyBindings(new HelloViewModel("TypeScript", "Knockout"));

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

declare var require: any;
require.config({
    paths: {
        "knockout": "externals/knockout-3.4.0",
    }
});

这个文件会告诉RequireJS从哪里导入Knockout，好比我们在hello.ts里做的一样。

你创建的所有页面都应该在RequireJS之后和导入任何东西之前引入它。 为了更好地理解这个文件和如何配置RequireJS，可以查看文档。

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

展开阅读全文