《TypeScript入門與全棧式網(wǎng)站開發(fā)實(shí)戰(zhàn)》 教學(xué)大綱

《TypeScript入門與全棧式網(wǎng)站開發(fā)實(shí)戰(zhàn)》教學(xué)大綱課程基本信息課程代碼課程名稱TypeScript入門與全棧式網(wǎng)站開發(fā)實(shí)戰(zhàn)開課學(xué)院信息科學(xué)與技術(shù)適用專業(yè)軟件工程、計(jì)算機(jī)科學(xué)與技術(shù)等學(xué)分4總學(xué)時(shí)64理論學(xué)時(shí)32實(shí)踐學(xué)時(shí)32課程性質(zhì)必修專業(yè)課程類別專業(yè)課考核方式課程設(shè)計(jì)先修課程無選用教材《TypeScript入門與全棧式網(wǎng)站開發(fā)實(shí)戰(zhàn)》清華大學(xué)出版社，2024制定人審核人批準(zhǔn)人制定時(shí)間審核時(shí)間批準(zhǔn)時(shí)間課程簡介TypeScript是由微軟開發(fā)的、基于JavaScript的開源編程語言。目前,TypeScript已在前端領(lǐng)域占據(jù)重要地位,得到了廣泛運(yùn)用和開發(fā)市場(chǎng)的普遍認(rèn)可。TypeScrip可應(yīng)用予前端開發(fā),甚至實(shí)現(xiàn)后端開發(fā)。本課程分三個(gè)部分12章來學(xué)習(xí)TypeScript語言。第一部分為基礎(chǔ)篇,包含TypeScript開發(fā)入門、基礎(chǔ)語法、面向?qū)ο蟆b類和集合類型;第二部分為進(jìn)階篇,包含TypeScript語法進(jìn)階、名稱空間和模塊、類型聲明文件;第三部分為實(shí)戰(zhàn)案例篇,為鞏固知識(shí)和提升TypeScript開發(fā)實(shí)踐技能,準(zhǔn)備了4個(gè)案例項(xiàng)目:使用Puppeteer框架爬取圖書信息、將圖書信息保存至MongoDB、實(shí)現(xiàn)后端RESTfulAPI服務(wù)、實(shí)現(xiàn)前端Vue應(yīng)用。課程目標(biāo)課程思政目標(biāo)：樹立正確的人生觀、價(jià)值觀、事業(yè)觀、技術(shù)觀，形成良好的開發(fā)習(xí)慣，培養(yǎng)團(tuán)隊(duì)開發(fā)和協(xié)同工作的意識(shí)，提高溝通能力和自我表達(dá)能力。具有軟件工程師的基本素質(zhì)，良好的編碼能力、自覺的規(guī)范意識(shí)和團(tuán)隊(duì)精神、正確的價(jià)值取向、科技報(bào)國的社會(huì)責(zé)任感、探索未知終身學(xué)習(xí)的意識(shí)、精益求精的工匠精神。知識(shí)與能力目標(biāo)：本課程使學(xué)生能夠在零基礎(chǔ)基礎(chǔ)上，了解編程及項(xiàng)目開發(fā)的基本概念，掌握TypeScript語法、Puppeteer框架、Mongoose模塊、Express.js、Vue3等相關(guān)技術(shù)，能應(yīng)用相關(guān)技術(shù)從事簡單應(yīng)用的開發(fā)，為將來企業(yè)級(jí)全棧開發(fā)應(yīng)用的實(shí)現(xiàn)奠定堅(jiān)實(shí)的基礎(chǔ)。要求學(xué)生在案例學(xué)習(xí)的基礎(chǔ)上，分小組完成大作頁項(xiàng)目的開發(fā)。在此過程中可鍛煉學(xué)生的項(xiàng)目開發(fā)能力，體驗(yàn)軟件的實(shí)施、協(xié)作過程。對(duì)領(lǐng)悟設(shè)計(jì)思想、強(qiáng)化訓(xùn)練技巧的能力也將大幅提升。四、課程內(nèi)容與教學(xué)要求第一章開發(fā)入門（一）課程內(nèi)容JavaScript語言的優(yōu)缺點(diǎn)、JavaScript與TypeScript的關(guān)系、TypeScript語言的優(yōu)點(diǎn)、搭建TypeScript開發(fā)環(huán)境。（二）教學(xué)要求了解：JavaScript語言的優(yōu)缺點(diǎn)、TypeScript語言的優(yōu)點(diǎn)理解：JavaScript與TypeScript的關(guān)系掌握：搭建TypeScript開發(fā)環(huán)境重點(diǎn)：整體TypeScript開發(fā)環(huán)境的搭建第二章基礎(chǔ)語法（一）課程內(nèi)容注釋、標(biāo)識(shí)符、關(guān)鍵字、基礎(chǔ)類型、變量、常量、操作符、分支語句、循環(huán)語句和循環(huán)函數(shù)、跳轉(zhuǎn)、函數(shù)。（二）教學(xué)要求掌握：基礎(chǔ)類型、變量、操作符、分支語句、循環(huán)語句、循環(huán)函數(shù)、跳轉(zhuǎn)、函數(shù)重點(diǎn)：分支語句、循環(huán)語句、函數(shù)難點(diǎn)：基礎(chǔ)類型繁雜、循環(huán)函數(shù)、遞歸函數(shù)、箭頭函數(shù)、回調(diào)函數(shù)第三章面向?qū)ο螅ㄒ唬┱n程內(nèi)容類和對(duì)象的基本概念、類結(jié)構(gòu)、屬性、成員函數(shù)、訪問器、構(gòu)造函數(shù)、創(chuàng)建對(duì)象、繼承語法、單繼承、函數(shù)覆蓋與多態(tài)、this與super、抽象類、定義接口、接口實(shí)現(xiàn)類等一系列知識(shí)和概念。（二）教學(xué)要求理解：類、對(duì)象的基本概念,繼承、覆蓋、多態(tài)的概念和使用場(chǎng)合,抽象類和接口概念和作用掌握：類的設(shè)計(jì),對(duì)象的創(chuàng)建,繼承、覆蓋、多態(tài)相關(guān)語法,關(guān)鍵字this和super的使用,接口的定義和使用重點(diǎn)：類的設(shè)計(jì)、對(duì)象的創(chuàng)建和繼承難點(diǎn)：多態(tài)第四章包裝類（一）課程內(nèi)容Boolean、Number、String、正則表達(dá)式。（二）教學(xué)要求理解：Boolean、Number、String包裝類型的使用場(chǎng)合，正則表達(dá)式作用掌握：Boolean、Number、String包裝類型的使用，正則表達(dá)式的常見應(yīng)用重點(diǎn)：String包裝類型的使用難點(diǎn)：正則表達(dá)式第五章集合類型（一）課程內(nèi)容數(shù)組、元組、Set、Map類型，集合類型間的轉(zhuǎn)換。（二）教學(xué)要求理解：數(shù)組、元組、Set、Map類型的使用的使用場(chǎng)合，數(shù)組、元組、Set、Map類型間可進(jìn)行轉(zhuǎn)換掌握：組、元組、Set、Map類型的使用，數(shù)組、元組、Set、Map類型間的轉(zhuǎn)換難點(diǎn)：數(shù)組、元組、Set、Map類型的使用有些繁雜重點(diǎn)：數(shù)組、元組、Map類型的使用第六章語法進(jìn)階（一）課程內(nèi)容解構(gòu)與展開、訪問修飾符和只讀修飾符、修飾器及修飾工廠，接口兼容性、類兼容性、函數(shù)兼容性，聯(lián)合、交叉、別名、推斷、斷言、泛型，泛型類、泛型約束、索引簽名約束，錯(cuò)誤處理，異步處理。（二）教學(xué)要求理解：解構(gòu)與展開的使用場(chǎng)合，訪問修飾符和只讀修飾符的作用，各類修飾器及修飾工廠，類型不一致時(shí)，需要進(jìn)行兼容性處理，類型操作的作用，約束的作用和使用場(chǎng)景，錯(cuò)誤的概念，異步處理的概念，以及2種異步處理編程寫法的特點(diǎn)掌握：解構(gòu)與展開的使用代碼，訪問修飾符和只讀修飾符的使用代碼，兼容性代碼，類型操作相關(guān)代碼，約束代碼，處理錯(cuò)誤的trycatchfinally語法，異步處理的Promise寫法和async+await寫法難點(diǎn)：修飾器的定義和使用，理解和使用兼容性，泛型定義和使用，異步處理概念和應(yīng)用重點(diǎn)：解構(gòu)與展開，接口兼容性、類兼容性、聯(lián)合、交叉、別名、推斷的使用，處理錯(cuò)誤的trycatchfinally語法、異步處理的Promise寫法和async+await寫法第七章名稱空間和模塊（一）課程內(nèi)容定義名稱空間和導(dǎo)出資源、名稱空間嵌套、跨文件訪問名稱空間內(nèi)資源、普通腳本資源全局可見、模塊導(dǎo)出默認(rèn)資源、模塊導(dǎo)出多個(gè)資源、同時(shí)導(dǎo)出默認(rèn)資源和普通資源、導(dǎo)入變量的只讀特征、導(dǎo)出導(dǎo)入的其他語法、CommonJS規(guī)則下模塊的導(dǎo)出導(dǎo)入（二）教學(xué)要求理解：名稱空間和資源的導(dǎo)入和導(dǎo)出在項(xiàng)目中的作用掌握：定義名稱空間，導(dǎo)出導(dǎo)出資源，跨文件訪問資源，CommonJS規(guī)則下模塊的導(dǎo)出導(dǎo)入難點(diǎn)：同時(shí)導(dǎo)出默認(rèn)資源和普通資源重點(diǎn)：定義名稱空間和導(dǎo)出導(dǎo)入資源第八章類型聲明文件（一）課程內(nèi)容獲取內(nèi)置API的類型聲明文件、獲取常用第三方JS庫的類型聲明文件、對(duì)JavaScript文件的直接支持、為.js文件編寫類型聲明文件（二）教學(xué)要求理解：聲明文件的作用掌握：獲取內(nèi)置API的類型聲明文件,獲取常用第三方JS庫的類型聲明文件的寫法,對(duì)JavaScript文件的直接支持寫法,為.js文件能編寫自定義的類型聲明文件難點(diǎn)：為.js文件能編寫自定義的類型聲明文件重點(diǎn)：為.js文件能編寫自定義的類型聲明文件第九章使用Puppeteer框架爬取書籍信息（一）課程內(nèi)容演示：用TypeScript語言調(diào)用Puppeteer框架API，對(duì)清華大學(xué)出版社網(wǎng)站“新書推薦”書籍信息進(jìn)行爬取。然后調(diào)用Node.js內(nèi)置模塊fs，保存信息到Json文件中。（二）教學(xué)要求理解：Puppeteer框架的作用和優(yōu)點(diǎn)，使用Puppeteer框架爬取書籍信息的流程掌握：搭建Puppeteer框架爬取數(shù)據(jù)的開發(fā)環(huán)境，使用Puppeteer框架爬取書籍信息，并保存為JSON格式數(shù)據(jù)的核心代碼難點(diǎn)：Puppeteer框架爬取書籍信息實(shí)現(xiàn)代碼重點(diǎn)：編寫Puppeteer框架爬取書籍信息實(shí)現(xiàn)代碼并測(cè)試第十章書籍信息保存至MongoDB中（一）課程內(nèi)容將爬取的Json格式信息，使用Mongoose框架API存放到MongoDB數(shù)據(jù)庫中。（二）教學(xué)要求理解：了解MongoDB數(shù)據(jù)庫相關(guān)概念，操作MongoDB的框架Mongoose作用掌握：搭建將書籍信息保存至MongoDB中的開發(fā)環(huán)境，使用Mongoose模塊，將Books.json文件中的書籍信息保存到MongoDB數(shù)據(jù)庫的核心代碼難點(diǎn)：利用MongooseAPI，將Books.json數(shù)據(jù)填入MongoDB數(shù)據(jù)庫重點(diǎn)：利用MongooseAPI，將Books.json數(shù)據(jù)填入MongoDB數(shù)據(jù)庫第十一章實(shí)現(xiàn)RESTfulAPI服務(wù)（一）課程內(nèi)容用Express.js應(yīng)用框架構(gòu)建RESTfulAPI服務(wù)，提供對(duì)MongoDB數(shù)據(jù)庫中存放的書籍信息進(jìn)行功能操作：獲取列表信息、獲取詳細(xì)信息、修改書籍信息、更換書籍封面圖片、刪除書籍等。（二）教學(xué)要求理解：RESTfulAPI是一種軟件架構(gòu)風(fēng)格-將行為和資源分離，Express.js是一個(gè)輕量級(jí)的Web應(yīng)用框架掌握：搭建實(shí)現(xiàn)RESTfulAPI服務(wù)的開發(fā)環(huán)境，能基于Express.js搭建RESTfulAPI應(yīng)用的整體構(gòu)架難點(diǎn)：實(shí)現(xiàn)RESTfulAPI服務(wù)復(fù)雜度較大：涉及中間件、路由、實(shí)現(xiàn)控制器等部分重點(diǎn)：基于Express.js搭建RESTfulAPI應(yīng)用的整體構(gòu)架，利用MongooseAPI實(shí)現(xiàn)控制器核心代碼第十二章實(shí)現(xiàn)前端Vue應(yīng)用（一）課程內(nèi)容設(shè)計(jì)Web前端Vue3應(yīng)用，調(diào)用RESTfulAPI來實(shí)現(xiàn)對(duì)書籍信息的管理。（二）教學(xué)要求理解：Vue3項(xiàng)目特點(diǎn),前端Vue3應(yīng)用實(shí)現(xiàn)的整體思路掌握：使用Vite構(gòu)建Vue3項(xiàng)目整體構(gòu)架,安裝vue-router模塊、配置路由,定義實(shí)體類、設(shè)計(jì)服務(wù)類、設(shè)計(jì)Vue組件,編寫與API交互代碼難點(diǎn)：Vue項(xiàng)目復(fù)雜度較大：涉及面較多，不易實(shí)現(xiàn)重點(diǎn)：創(chuàng)建Vue項(xiàng)目整體框架，并在框架基礎(chǔ)上設(shè)計(jì)邏輯代碼，實(shí)現(xiàn)與后端API的交互五、本課程開設(shè)的實(shí)踐（訓(xùn)）針對(duì)TypeScript語法，1~8章后設(shè)有相應(yīng)的“實(shí)戰(zhàn)闖關(guān)”練習(xí)環(huán)節(jié)：實(shí)戰(zhàn)闖關(guān)1:環(huán)境搭建、初試開發(fā)實(shí)戰(zhàn)闖關(guān)2:基礎(chǔ)語法實(shí)戰(zhàn)闖關(guān)3:面向?qū)ο髮?shí)戰(zhàn)闖關(guān)4:包裝對(duì)象、正則表達(dá)式實(shí)戰(zhàn)闖關(guān)5:集合實(shí)戰(zhàn)闖關(guān)6:語法進(jìn)階實(shí)戰(zhàn)闖關(guān)7:名稱空間和模塊實(shí)戰(zhàn)闖關(guān)8:類型聲明文件鞏固TypeScript語法，在9~12章安排了項(xiàng)目實(shí)踐：項(xiàng)目實(shí)踐1：使用Puppeteer框架爬取書籍信息 項(xiàng)目實(shí)踐2：將書籍信息保存至MongoDB中MongoDB項(xiàng)目實(shí)踐3：實(shí)現(xiàn)RESTfulAPI服務(wù)項(xiàng)目實(shí)踐4：實(shí)現(xiàn)前端Vue應(yīng)用六、課程考核（一）考核要求本課程成績?cè)u(píng)定采用項(xiàng)目答辯的形式展示大作業(yè)作品，要求提交項(xiàng)目文檔，項(xiàng)目報(bào)告，進(jìn)行項(xiàng)目的演示。成績構(gòu)成：平時(shí)成績40%（4次作業(yè)），期末成績60%（二）成績?cè)u(píng)定序號(hào)考核形式考核方法考核權(quán)重備注1平時(shí)成績4次作業(yè)40%2期末成績項(xiàng)目(大作業(yè))答辯60%總評(píng)成績100%說明：學(xué)生不提交或被認(rèn)定為抄襲者，以0分計(jì)算。七、參考書目及學(xué)習(xí)資料教材名稱：《TypeScript入門與全棧式網(wǎng)站開發(fā)實(shí)戰(zhàn)》清華大學(xué)出版社，2024參考資料(資源)：

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

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

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

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

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

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

[7]ISAACKSJD.ES2015/2016