首先，我們新建一個目錄。
暫時命名為proj，當(dāng)然了你可以使用任何喜歡的名字。
mkdir proj
cd proj接下來，我們按如下方式來組織這個工程：
proj/
+- src/
+- built/TypeScript源碼放在src目錄下，結(jié)過TypeScript編譯器編譯后，生成的文件放在built目錄里。
下面創(chuàng)建目錄：
mkdir src
mkdir built首先確保TypeScript和Typings已經(jīng)全局安裝。
npm install -g typescript typings你肯定已經(jīng)很了解TypeScript了，但你有可能還不太了解Typings. Typings是一個包管理器用來獲取聲明文件。
我們將會使用它來獲取Knockout的聲明文件。
typings install --global --save dt~knockout--global標(biāo)記會告訴Typings從DefinitelyTyped去獲取聲明文件，這是由社區(qū)維護(hù)的.d.ts文件倉庫。
這個命令會在當(dāng)前目錄下創(chuàng)建一個typings.json文件和一個typings文件夾。
我們需要Knockout和RequireJS。 RequireJS是一個庫，它可以讓我們在運(yùn)行時異步地加載模塊。
有以下幾種獲取方式：
我們使用第一種方法，它會簡單一些，但是Knockout的官方文檔上有講解如何使用CDN，更多像RequireJS一樣的代碼庫可以在cdnjs上查找。
下面讓我們在工程根目錄下創(chuàng)建externals目錄。
mkdir externals然后下載Knockout和下載RequireJS到這個目錄里。 最新的壓縮后版本就可以。
下面我們想把所有的TypeScript文件整合到一起 - 包括自己寫的和必須的聲明文件。
我們需要創(chuàng)建一個tsconfig.json文件，包含了輸入文件列表和編譯選項(xiàng)。
在工程根目錄下創(chuàng)建一個新文件tsconfig.json，內(nèi)容如下：
{
"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幫我們創(chuàng)建的。
這個文件會自動地包含所有安裝的依賴。
你可能會對typings目錄下的browser.d.ts文件感到好奇，尤其因?yàn)槲覀儗⒃跒g覽器里運(yùn)行代碼。
其實(shí)原因是這樣的，當(dāng)目標(biāo)為瀏覽器的時候，一些包會生成不同的版本。
通常來講，這些情況很少發(fā)生并且在這里我們不會遇到這種情況，所以我們可以忽略browser.d.ts。
你可以在這里查看更多關(guān)于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從哪里導(dǎo)入Knockout，好比我們在hello.ts里做的一樣。
你創(chuàng)建的所有頁面都應(yīng)該在RequireJS之后和導(dǎo)入任何東西之前引入它。 為了更好地理解這個文件和如何配置RequireJS，可以查看文檔。
我們還需要一個視圖來顯示HelloViewModel。
在proj目錄的根上創(chuàng)建一個文件index.html，內(nèi)容如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello Knockout!</title>
</head>
<body>
<p>
Hello from
<strong data-bind="text: language">todo</strong>
and
<strong data-bind="text: framework">todo</strong>!
</p>
<p>Language: <input data-bind="value: language" /></p>
<p>Framework: <input data-bind="value: framework" /></p>
<script src="./externals/require.js"></script>
<script src="./built/require-config.js"></script>
<script>
require(["built/hello"]);
</script>
</body>
</html>注意，有兩個script標(biāo)簽。
首先，我們引入RequireJS。
然后我們再在require-config.js里映射外部依賴，這樣RequireJS就能知道到哪里去查找它們。
最后，使用我們要去加載的模塊去調(diào)用require。
運(yùn)行
tsc現(xiàn)在，在你喜歡的瀏覽器打開index.html，所有都應(yīng)該好用了。
你應(yīng)該可以看到頁面上顯示“Hello from TypeScript and Knockout!”。
在它下面，你還會看到兩個輸入框。
當(dāng)你改變輸入和切換焦點(diǎn)時，就會看到原先顯示的信息改變了。
掃碼關(guān)注鍍金池微信號
手機(jī)訂課，優(yōu)惠多多