TypeScript和Knockout.js的结合使用

  这里假设你的电脑上已经安装了Node.js，我也是刚刚接触Node.js，准备在今年好好研究下这个东西，听说很是强大呀。另外，不知道你对npm了解多少，这里默认为你对这些知识是了解的。下面列出几个常见的命令，后面会使用到。
  创建文件夹：mkdir dir
  初始化工程：npm init
  安装TypeScript：npm install -g typescript
  获取knockout的声明文件：npm install –save @types/knockout
  将所有部分整合在一起：tsc
  接下来我们创建一个工程proj，获取运行时依赖，这里需要两个js，分别是knockout.js和require.js，require.js可以让我们在代码运行时异步加载模块。在这之后我们在工程的根目录下添加一个TypeScript的配置文件tsconfig.json，内容如下：

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

工程的目录结构大概如下所示：

接下来看看hello.ts文件中的内容：

import * as ko from "knockout";

class HelloViewModel {
  language: KnockoutObservable
  framework:KnockoutObservable

  constructor(language:string, framework:string){
    this.language = ko.observable(language);
    this.framework = ko.observable(framework);
  }
}
ko.applyBindings(new HelloViewModel("TypeScript", "Knockout"));

再看看require-config.ts文件中的内容：

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

最后，看看index.html文件中的内容：

    
    


    

        Hello from
        todo
        and
        todo!
    

    
Language: 
    
Framework: 

    
    
    

以上就是一个简单的结合使用的例子，如需下载代码，请点击下载。