TypeScript入門與全棧式網(wǎng)站開發(fā) 教學大綱

TypeScript入門與全棧式網(wǎng)站開發(fā)（教學大綱+教學進度表）01課程基本信息02課程簡介TypeScript是由微軟開發(fā)的、基于JavaScript的開源編程語言。目前,TypeScript已在前端領域占據(jù)重要地位,得到了廣泛運用和開發(fā)市場的普遍認可。TypeScrip可應用予前端開發(fā),甚至實現(xiàn)后端開發(fā)。

本課程分三個部分12章來學習TypeScript語言。第一部分為基礎篇,包含TypeScript開發(fā)入門、基礎語法、面向對象、包裝類和集合類型;第二部分為進階篇,包含TypeScript語法進階、名稱空間和模塊、類型聲明文件;第三部分為實戰(zhàn)案例篇,為鞏固知識和提升TypeScript開發(fā)實踐技能,準備了4個案例項目:使用Puppeteer框架爬取圖書信息、將圖書信息保存至MongoDB、實現(xiàn)后端RESTfulAPI服務、實現(xiàn)前端Vue應用。03課程目標1.課程思政目標：樹立正確的人生觀、價值觀、事業(yè)觀、技術觀，形成良好的開發(fā)習慣，培養(yǎng)團隊開發(fā)和協(xié)同工作的意識，提高溝通能力和自我表達能力。具有軟件工程師的基本素質，良好的編碼能力、自覺的規(guī)范意識和團隊精神、正確的價值取向、科技報國的社會責任感、探索未知終身學習的意識、精益求精的工匠精神。2.知識與能力目標：本課程使學生能夠在零基礎基礎上，了解編程及項目開發(fā)的基本概念，掌握TypeScript語法、Puppeteer框架、Mongoose模塊、Express.js、Vue3等相關技術，能應用相關技術從事簡單應用的開發(fā)，為將來企業(yè)級全棧開發(fā)應用的實現(xiàn)奠定堅實的基礎。3.要求學生在案例學習的基礎上，分小組完成大作頁項目的開發(fā)。在此過程中可鍛煉學生的項目開發(fā)能力，體驗軟件的實施、協(xié)作過程。對領悟設計思想、強化訓練技巧的能力也將大幅提升。04課程內容與教學要求第一章開發(fā)入門（一）課程內容JavaScript語言的優(yōu)缺點、JavaScript與TypeScript的關系、TypeScript語言的優(yōu)點、搭建TypeScript開發(fā)環(huán)境。（二）教學要求了解：JavaScript語言的優(yōu)缺點、TypeScript語言的優(yōu)點理解：JavaScript與TypeScript的關系掌握：搭建TypeScript開發(fā)環(huán)境重點：整體TypeScript開發(fā)環(huán)境的搭建第二章基礎語法（一）課程內容注釋、標識符、關鍵字、基礎類型、變量、常量、操作符、分支語句、循環(huán)語句和循環(huán)函數(shù)、跳轉、函數(shù)。（二）教學要求掌握：基礎類型、變量、操作符、分支語句、循環(huán)語句、循環(huán)函數(shù)、跳轉、函數(shù)重點：分支語句、循環(huán)語句、函數(shù)難點：基礎類型繁雜、循環(huán)函數(shù)、遞歸函數(shù)、箭頭函數(shù)、回調函數(shù)第三章面向對象（一）課程內容類和對象的基本概念、類結構、屬性、成員函數(shù)、訪問器、構造函數(shù)、創(chuàng)建對象、繼承語法、單繼承、函數(shù)覆蓋與多態(tài)、this與super、抽象類、定義接口、接口實現(xiàn)類等一系列知識和概念。（二）教學要求

理解：類、對象的基本概念,繼承、覆蓋、多態(tài)的概念和使用場合,抽象類和接口概念和作用掌握：類的設計,對象的創(chuàng)建,繼承、覆蓋、多態(tài)相關語法,關鍵字this和super的使用,接口的定義和使用重點：類的設計、對象的創(chuàng)建和繼承難點：多態(tài)第四章包裝類（一）課程內容Boolean、Number、String、正則表達式。（二）教學要求

理解：Boolean、Number、String包裝類型的使用場合，正則表達式作用掌握：Boolean、Number、String包裝類型的使用，正則表達式的常見應用重點：String包裝類型的使用難點：正則表達式第五章集合類型（一）課程內容數(shù)組、元組、Set、Map類型，集合類型間的轉換。（二）教學要求理解：數(shù)組、元組、Set、Map類型的使用的使用場合，數(shù)組、元組、Set、Map類型間可進行轉換掌握：組、元組、Set、Map類型的使用，數(shù)組、元組、Set、Map類型間的轉換難點：數(shù)組、元組、Set、Map類型的使用有些繁雜重點：數(shù)組、元組、Map類型的使用第六章語法進階（一）課程內容解構與展開、訪問修飾符和只讀修飾符、修飾器及修飾工廠，接口兼容性、類兼容性、函數(shù)兼容性，聯(lián)合、交叉、別名、推斷、斷言、泛型，泛型類、泛型約束、索引簽名約束，錯誤處理，異步處理。（二）教學要求理解：解構與展開的使用場合，訪問修飾符和只讀修飾符的作用，各類修飾器及修飾工廠，類型不一致時，需要進行兼容性處理，類型操作的作用，約束的作用和使用場景，錯誤的概念，異步處理的概念，以及2種異步處理編程寫法的特點掌握：解構與展開的使用代碼，訪問修飾符和只讀修飾符的使用代碼，兼容性代碼，類型操作相關代碼，約束代碼，處理錯誤的trycatchfinally語法，異步處理的Promise寫法和async+await寫法難點：修飾器的定義和使用，理解和使用兼容性，泛型定義和使用，異步處理概念和應用重點：解構與展開，接口兼容性、類兼容性、聯(lián)合、交叉、別名、推斷的使用，處理錯誤的trycatchfinally語法、異步處理的Promise寫法和async+await寫法第七章名稱空間和模塊（一）課程內容定義名稱空間和導出資源、名稱空間嵌套、跨文件訪問名稱空間內資源、普通腳本資源全局可見、模塊導出默認資源、模塊導出多個資源、同時導出默認資源和普通資源、導入變量的只讀特征、導出導入的其他語法、CommonJS規(guī)則下模塊的導出導入（二）教學要求理解：名稱空間和資源的導入和導出在項目中的作用掌握：定義名稱空間，導出導出資源，跨文件訪問資源，CommonJS規(guī)則下模塊的導出導入難點：同時導出默認資源和普通資源重點：定義名稱空間和導出導入資源第八章類型聲明文件（一）課程內容獲取內置API的類型聲明文件、獲取常用第三方JS庫的類型聲明文件、對JavaScript文件的直接支持、為.js文件編寫類型聲明文件（二）教學要求

理解：聲明文件的作用掌握：獲取內置API的類型聲明文件,獲取常用第三方JS庫的類型聲明文件的寫法,對JavaScript文件的直接支持寫法,為.js文件能編寫自定義的類型聲明文件難點：為.js文件能編寫自定義的類型聲明文件重點：為.js文件能編寫自定義的類型聲明文件第九章使用Puppeteer框架爬取書籍信息（一）課程內容演示：用TypeScript語言調用Puppeteer框架API，對清華大學出版社網(wǎng)站“新書推薦”書籍信息進行爬取。然后調用Node.js內置模塊fs，保存信息到Json文件中。（二）教學要求

理解：Puppeteer框架的作用和優(yōu)點，使用Puppeteer框架爬取書籍信息的流程掌握：搭建Puppeteer框架爬取數(shù)據(jù)的開發(fā)環(huán)境，使用Puppeteer框架爬取書籍信息，并保存為JSON格式數(shù)據(jù)的核心代碼難點：Puppeteer框架爬取書籍信息實現(xiàn)代碼重點：編寫Puppeteer框架爬取書籍信息實現(xiàn)代碼并測試第十章書籍信息保存至MongoDB中（一）課程內容將爬取的Json格式信息，使用Mongoose框架API存放到MongoDB數(shù)據(jù)庫中。（二）教學要求

理解：了解MongoDB數(shù)據(jù)庫相關概念，操作MongoDB的框架Mongoose作用掌握：搭建將書籍信息保存至MongoDB中的開發(fā)環(huán)境，使用Mongoose模塊，將Books.json文件中的書籍信息保存到MongoDB數(shù)據(jù)庫的核心代碼難點：利用MongooseAPI，將Books.json數(shù)據(jù)填入MongoDB數(shù)據(jù)庫重點：利用MongooseAPI，將Books.json數(shù)據(jù)填入MongoDB數(shù)據(jù)庫第十一章實現(xiàn)RESTfulAPI服務（一）課程內容用Express.js應用框架構建RESTfulAPI服務，提供對MongoDB數(shù)據(jù)庫中存放的書籍信息進行功能操作：獲取列表信息、獲取詳細信息、修改書籍信息、更換書籍封面圖片、刪除書籍等。（二）教學要求

理解：RESTfulAPI是一種軟件架構風格-將行為和資源分離，Express.js是一個輕量級的Web應用框架掌握：搭建實現(xiàn)RESTfulAPI服務的開發(fā)環(huán)境，能基于Express.js搭建RESTfulAPI應用的整體構架難點：實現(xiàn)RESTfulAPI服務復雜度較大：涉及中間件、路由、實現(xiàn)控制器等部分重點：基于Express.js搭建RESTfulAPI應用的整體構架，利用MongooseAPI實現(xiàn)控制器核心代碼第十二章實現(xiàn)前端Vue應用（一）課程內容設計Web前端Vue3應用，調用RESTfulAPI來實現(xiàn)對書籍信息的管理。（二）教學要求

理解：Vue3項目特點,前端Vue3應用實現(xiàn)的整體思路掌握：使用Vite構建Vue3項目整體構架,安裝vue-router模塊、配置路由,定義實體類、設計服務類、設計Vue組件,編寫與API交互代碼難點：Vue項目復雜度較大：涉及面較多，不易實現(xiàn)重點：創(chuàng)建Vue項目整體框架，并在框架基礎上設計邏輯代碼，實現(xiàn)與后端API的交互05本課程開設的實踐（訓）針對TypeScript語法，1~8章后設有相應的“實戰(zhàn)闖關”練習環(huán)節(jié)：實戰(zhàn)闖關1:環(huán)境搭建、初試開發(fā)實戰(zhàn)闖關2:基礎語法實戰(zhàn)闖關3:面向對象實戰(zhàn)闖關4:包裝對象、正則表達式實戰(zhàn)闖關5:集合實戰(zhàn)闖關6:語法進階實戰(zhàn)闖關7:名稱空間和模塊實戰(zhàn)闖關8:類型聲明文件鞏固TypeScript語法，在9~12章安排了項目實踐：項目實踐1：使用Puppeteer框架爬取書籍信息

用TypeScript語言調用Puppeteer框架API，對清華大學出版社網(wǎng)站“新書推薦”書籍信息進行爬取。然后調用Node.js內置模塊fs，保存信息到Json文件中。項目實踐2：將書籍信息保存至MongoDB中將爬取的Json格式信息，使用Mongoose框架API存放到MongoDB數(shù)據(jù)庫中。項目實踐3：實現(xiàn)RESTfulAPI服務書籍信息已存放MongoDB中，接著用Express.js應用框架構建RESTfulAPI服務，來提供對MongoDB數(shù)據(jù)庫中存放的書籍信息進行功能操作：獲取列表信息、獲取詳細信息、修改書籍信息、更換書籍封面圖片、刪除書籍等。項目實踐4：實現(xiàn)前端Vue應用設計Web前端Vue3應用，調用RESTfulAPI來實現(xiàn)對書籍信息的管理。06課程考核（一）考核要求本課程成績評定采用項目答辯的形式展示大作業(yè)作品，要求提交項目文檔，項目報告，進行項目的演示。成績構成：平時成績40%（4次作業(yè)），期末成績60%（二）成績評定07參考書目及學習資料教材名稱：《TypeScript入門與全棧式網(wǎng)站開發(fā)實戰(zhàn)》清華大學出版社，2024參考資料(資源)：

[1]汪明.TypeScript實戰(zhàn)[M].北京:清華大學出版社,2020.

[2]柳偉衛(wèi).Node.js+Express+MongoDB+Vue.js全棧開發(fā)[M].北京:清華大學出版社,2013.

[3]鄭均輝,薛燚.JavaScript+Vue+React全程實例[M].北京:清華大學出版社,2019.

[4]呂鳴.Vue.js3應用開發(fā)與核心源碼解析[M].北京:清華大學出版社,2022.

[5]ALEXISG.精通MongoDB3.x[M].陳凱,譯.北京:清華大學出版社,2019.

[6]EDWARDSG,SABHARWALN.MongoDB實戰(zhàn):架構、開發(fā)與管理[M].蒲成,譯.北京:清華大學出版社,2017.

[7]ISAACKSJD.ES2015/2016編程實戰(zhàn)[M].林賜,譯.北京:清華大學出版社,2019[8]TypeScript官網(wǎng)[9]Node.js官網(wǎng)[10]VsCode官網(wǎng)[11]D3.js官網(wǎng)[12]MongoDB官網(wǎng)注：（1）DefinitelyTyped公共庫的類型聲明文件查詢頁/DefinitelyTyped/DefinitelyTyped/find/master（2）清華大學出版社網(wǎng)站“新書推薦”首頁/booksCenter/new_book_recommend.html

參考書籍TypeScript入門與全棧式網(wǎng)站開發(fā)實戰(zhàn)作者：曹宇技術背景在Web前端開發(fā)領域，JavaScript始終處于重要的地位。JavaScript能很好地結合Node.js這一跨平臺運行環(huán)境，將可開發(fā)范圍由前端擴展到后端。但隨著Web項目需求的不斷增加，其業(yè)務邏輯也越來越復雜。JavaScript作為一款弱類型的動態(tài)腳本語言，顯然不能滿足當前實際開發(fā)的需要，也無法很好地應對項目維護等工作。幸好，隨著技術的不斷進步，TypeScript語言的出現(xiàn)，成功破解了這一難題。TypeScript是由微軟公司開發(fā)的、基于JavaScript的開源編程語言。TypeScript帶有靜態(tài)類型檢查功能，是JavaScript的一個超集，TypeScript的源文件最終可被編譯為純JavaScript代碼。TypeScript可以彌補JavaScript弱類型系統(tǒng)的不足，從而大幅提高開發(fā)代碼的可靠性。此外，TypeScript也繼承了JavaScript的諸多優(yōu)點，如沿用了JavaScript的語法和語義，極大地降低了學習成本和程序遷移成本。目前，TypeScript已在前端領域占據(jù)重要地位，得到了廣泛運用和開發(fā)市場的普遍認可。對開發(fā)技術人員來說，掌握TypeScript不但可以重塑類型思維、提升編程素養(yǎng)，還可玩轉前端應用開發(fā)，甚至挑戰(zhàn)后端應用開發(fā)。本書主要內容本書共12章分為三部分，包括基礎篇、進階篇和實戰(zhàn)案例篇。第一部分基礎篇，包括第1~5章。第1章開發(fā)入門，主要闡述JavaScript的局限性和TypeScript語言的優(yōu)點、JavaScript和TypeScript之間的關系、安裝和配置TypeScript的開發(fā)環(huán)境。第2章基礎語法，詳細介紹包括注釋、標識符、關鍵字、基礎類型、變量、常量、操作符、分支語句、循環(huán)語句、跳轉、函數(shù)定義、可選函數(shù)、默認參數(shù)、剩余參數(shù)、重載函數(shù)、遞歸函數(shù)、匿名函數(shù)、箭頭函數(shù)、回調函數(shù)等內容。第3章面向對象，詳細介紹類和對象的基本概念、類結構、屬性、函數(shù)、訪問器、構造函數(shù)、創(chuàng)建對象、繼承、函數(shù)覆蓋和多態(tài)、this與super、抽象類、接口定義、接口實現(xiàn)類、接口多繼承等內容。第4章包裝類，主要介紹Boolean、Number、String幾個包裝類的常見屬性和函數(shù)，以及正則表達式的語法知識。第5章集合類型，重點介紹數(shù)組(array)、元組(tuple)、集合(set)、映射(map)4種數(shù)據(jù)結構的創(chuàng)建和使用，以及不同集合類型間的轉換。第二部分進階篇，包括第6~8章。第6章語法進階，詳細描述數(shù)組的解構與展開、對象的解構與展開、訪問修飾符、只讀修飾符、類裝飾器、其他裝飾器、裝飾器工廠、裝飾器執(zhí)行順序、接口兼容性、類兼容性、函數(shù)兼容性、聯(lián)合類型、交叉類型、類型別名、類型推斷、類型斷言、泛型、錯誤處理、傳統(tǒng)回調函數(shù)實現(xiàn)異步處理、Promise實現(xiàn)異步編程、關鍵字async和await的使用等內容。第7章名稱空間和模塊，全面介紹名稱空間的定義