目標
- 使用 typescript 開發
- 顯示/新增/刪除 TodoList
功能分析
- 只是練習,故不開發 server side 的程式
- 暫時存在 cookie 上
- 用 bootstrap 作簡單的樣式
實作記錄
UI : 使用 Bootstrap 沒有必要重新打造輪子,能用的就拿來用
- 找到一個 TodoList 的樣版,內含 HTML 、 CSS 與 JS ,功能完整.
- 取用樣版的 HTML.
- 引用 bootstrap 3.3.5 CDN 上的 css .
- 建立一個 todo.css 直接引用樣版的 css 並加入頁面參考.
開發環境
- 安裝 typescript
npm install typescript --save
- 安裝 gulp
npm install gulp
npm install --global gulp
- 安裝 gulp-typescript
npm install gulp-typescript
- 建立 gulpfile.js
1 | var gulp = require("gulp"); |
Typescript
關於 typescript 的定義檔, 以前有 tsd 與 typings 兩種管理工具,現在可以更簡便的合併到 npm 作管理 .
透過 TypeSearch 可以找到 bootstrap 的 typescript 定義檔.
執行
npm install --save @types/bootstrap
安裝 bootstrap (目前的版本是 Bootstrap 3.3.5) , 因為相依於 jquery 所以也會一併安裝安裝 jquery-ui 的定義檔
npm install --save @types/jqueryui
新增檔案
todo.ts
,將 樣版 的 javascript 複製貼上 .
*註:因為 typescript 是 javascript 的 superset , 完全可以相容原生 javascript, 如果有任何錯誤, TypeScript 將會提示你todo.ts 引用 jquery 、jquery-ui 與 bootstrap 的 typescript 定義檔.
1
2
3/// <reference path="../../../node_modules/@types/jquery/index.d.ts" /> ///
<reference path="../../../node_modules/@types/bootstrap/index.d.ts" /> ///
<reference path="../../../node_modules/@types/jqueryui/index.d.ts" />頁面載入對應的 js 檔,記得放置順序 jquery 要在最前面,並將放在
<\body>
之後1
2
3
4
5
6
7
8
9
10
11<script
src="http://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"
></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script
src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
crossorigin="anonymous"
></script>執行
gulp
,會產生 todo.js頁面載入 js 檔,記得要放在相依的 js( jquery 、 bootstrap 、 jqueryui)之後.
1 | <script type="text/javascript" src="/javascripts/kata/todo.js"></script> |
截至目前為止,僅僅是在作複製樣版,同時一併處理一些基本 gulp 與 typescript 相關的配置
接下來才要開始寫 typescript
(待續)
參考
- 關於 TypeScript 2.0 之後的模組定義檔 ( Declaration Files ) ( *.d.ts )
- bootsnipp
- TYPESCRIPT + EXPRESS + NODE.JS
(fin)