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

《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ā)市場的普遍認(rèn)可。TypeScrip可應(yīng)用予前端開發(fā),甚至實(shí)現(xiàn)后端開發(fā)。本課程分三個(gè)部分12章來學(xué)習(xí)TypeScript語言。第一部分為基礎(chǔ)篇,包含TypeScript開發(fā)入門、基礎(chǔ)語法、面向?qū)ο?、包裝類和集合類型;第二部分為進(jìn)階篇,包含TypeScript語法進(jìn)階、名稱空間和模塊、類型聲明文件;第三部分為實(shí)戰(zhàn)案例篇,為鞏固知識和提升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é)同工作的意識，提高溝通能力和自我表達(dá)能力。具有軟件工程師的基本素質(zhì)，良好的編碼能力、自覺的規(guī)范意識和團(tuán)隊(duì)精神、正確的價(jià)值取向、科技報(bào)國的社會責(zé)任感、探索未知終身學(xué)習(xí)的意識、精益求精的工匠精神。知識與能力目標(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è)級全棧開發(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é)作過程。對領(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)識符、關(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)容類和對象的基本概念、類結(jié)構(gòu)、屬性、成員函數(shù)、訪問器、構(gòu)造函數(shù)、創(chuàng)建對象、繼承語法、單繼承、函數(shù)覆蓋與多態(tài)、this與super、抽象類、定義接口、接口實(shí)現(xiàn)類等一系列知識和概念。（二）教學(xué)要求理解：類、對象的基本概念,繼承、覆蓋、多態(tài)的概念和使用場合,抽象類和接口概念和作用掌握：類的設(shè)計(jì),對象的創(chuàng)建,繼承、覆蓋、多態(tài)相關(guān)語法,關(guān)鍵字this和super的使用,接口的定義和使用重點(diǎn)：類的設(shè)計(jì)、對象的創(chuàng)建和繼承難點(diǎn)：多態(tài)第四章包裝類（一）課程內(nèi)容Boolean、Number、String、正則表達(dá)式。（二）教學(xué)要求理解：Boolean、Number、String包裝類型的使用場合，正則表達(dá)式作用掌握：Boolean、Number、String包裝類型的使用，正則表達(dá)式的常見應(yīng)用重點(diǎn)：String包裝類型的使用難點(diǎn)：正則表達(dá)式第五章集合類型（一）課程內(nèi)容數(shù)組、元組、Set、Map類型，集合類型間的轉(zhuǎn)換。（二）教學(xué)要求理解：數(shù)組、元組、Set、Map類型的使用的使用場合，數(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)與展開的使用場合，訪問修飾符和只讀修飾符的作用，各類修飾器及修飾工廠，類型不一致時(shí)，需要進(jìn)行兼容性處理，類型操作的作用，約束的作用和使用場景，錯(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庫的類型聲明文件、對JavaScript文件的直接支持、為.js文件編寫類型聲明文件（二）教學(xué)要求理解：聲明文件的作用掌握：獲取內(nèi)置API的類型聲明文件,獲取常用第三方JS庫的類型聲明文件的寫法,對JavaScript文件的直接支持寫法,為.js文件能編寫自定義的類型聲明文件難點(diǎn)：為.js文件能編寫自定義的類型聲明文件重點(diǎn)：為.js文件能編寫自定義的類型聲明文件第九章使用Puppeteer框架爬取書籍信息（一）課程內(nèi)容演示：用TypeScript語言調(diào)用Puppeteer框架API，對清華大學(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)代碼并測試第十章書籍信息保存至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ù)，提供對MongoDB數(shù)據(jù)庫中存放的書籍信息進(jìn)行功能操作：獲取列表信息、獲取詳細(xì)信息、修改書籍信息、更換書籍封面圖片、刪除書籍等。（二）教學(xué)要求理解：RESTfulAPI是一種軟件架構(gòu)風(fēng)格-將行為和資源分離，Express.js是一個(gè)輕量級的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)對書籍信息的管理。（二）教學(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)）針對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:包裝對象、正則表達(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)用六、課程考核（一）考核要求本課程成績評定采用項(xiàng)目答辯的形式展示大作業(yè)作品，要求提交項(xiàng)目文檔，項(xiàng)目報(bào)告，進(jìn)行項(xiàng)目的演示。成績構(gòu)成：平時(shí)成績40%（4次作業(yè)），期末成績60%（二）成績評定序號考核形式考核方法考核權(quán)重備注1平時(shí)成績4次作業(yè)40%2期末成績項(xiàng)目(大作業(yè))答辯60%總評成績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編程實(shí)戰(zhàn)[M].林賜,譯.北京:清華大學(xué)出版社,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）清華大學(xué)出版社網(wǎng)站“新書推薦”首頁/booksCenter/new_book_recommend.html執(zhí)筆教師：專業(yè)主任：教學(xué)院長：《TypeScript入門與全棧式網(wǎng)站開發(fā)實(shí)戰(zhàn)》教學(xué)進(jìn)度表—學(xué)年第學(xué)期授課專業(yè)：授課班級課程名稱：TypeScript入門與全棧式網(wǎng)站開發(fā)實(shí)戰(zhàn)任課教師：學(xué)期總學(xué)時(shí)教學(xué)周數(shù)周學(xué)時(shí)課程屬性課程類型考核方式考核形式試卷形式課程標(biāo)準(zhǔn)公共課專業(yè)基礎(chǔ)課專業(yè)課ABC考試考查形成性非形

成性閉卷開卷有無64164√√√√大作業(yè)√選用教材

《TypeScript入門與全棧式網(wǎng)站開發(fā)實(shí)戰(zhàn)》清華大學(xué)出版社，2024年3月是否規(guī)劃教材是否√需實(shí)驗(yàn)器材及設(shè)備硬件：PC機(jī)、投影機(jī)、麥克風(fēng)、電腦課桌椅；

軟件：Windows10操作系統(tǒng)、VSCode、node16、mongodb、Chrome、錄屏軟件、Office環(huán)境等（連接外網(wǎng)）周次日

期課內(nèi)（計(jì)劃內(nèi)）學(xué)時(shí)分配課外學(xué)時(shí)安排主要內(nèi)容講授校內(nèi)

實(shí)訓(xùn)校外

實(shí)踐討論小計(jì)主要內(nèi)容地點(diǎn)學(xué)時(shí)11.1JavaScript與TypeScript

1.2搭建TypeScript開發(fā)環(huán)境

編程基礎(chǔ)：

2.1.1注釋、2.1.2標(biāo)識符、2.1.3關(guān)鍵字、

2.1.4基礎(chǔ)類型之：any、number、bigint、string、boolean22422.1.4基礎(chǔ)類型之：數(shù)組類型、元組類型

2.1.4基礎(chǔ)類型之：枚舉、對象、null、undefined、void

2.1.4基礎(chǔ)類型之：never、symbol

2.1.5變量、2.1.6常量

2.1.7操作符之：算術(shù)、關(guān)系、邏輯22432.1.7操作符之：位運(yùn)算

2.1.7操作符之：賦值、條件、空值合并

2.1.7操作符之：類型操作、優(yōu)先級和結(jié)合性

2.2.1流程控制之：分支

2.2.2循環(huán)語句之：while、dowhile、for、forin、forof22442.2.2循環(huán)函數(shù)之：foreach、every、some

2.2.3跳轉(zhuǎn):break、continue

2.3.1函數(shù)定義

2.3.2可選參數(shù)、默認(rèn)參數(shù)和剩余參數(shù)

2.3.3重載函數(shù)、2.3.4遞歸函數(shù)、2.3.5匿名函數(shù)、2.3.6箭頭函數(shù)、2.3.7回調(diào)函數(shù)22453.1.1類結(jié)構(gòu)

3.1.2屬性、3.1.3函數(shù)、3.1.4訪問器、3.1.5構(gòu)造函數(shù)

3.2.1對象概述

3.2.2創(chuàng)建對象、3.3.1繼承語法、3.3.2單繼承

3.3.3函數(shù)覆蓋與多態(tài)、3.3.4this與super

3.4抽象類

3.5.1定義接口

3.5.2接口實(shí)現(xiàn)類、3.5.3接口多繼承22464.1Boolean類、4.2Number類

4.3.1String常見屬性、4.3.2String常見函數(shù)

4.3.3正則表達(dá)式之：

1.正則表達(dá)式的2種寫法、2.正則表達(dá)式修飾符：i、g、m、3.正則表達(dá)式模式22475.1.1創(chuàng)建數(shù)組對象、5.1.2Array類常用函數(shù)和屬性

5.2.1定義元組和賦值、5.2.2元組常用操作

5.3.1創(chuàng)建Set對象、5.3.2Set類常用操作

5.4.1創(chuàng)建Map對象、5.4.2Map類常用函數(shù)和屬性、5.5不同集合類型間的轉(zhuǎn)換22486.1.1數(shù)組的解構(gòu)與展開、6.1.2對象的解構(gòu)與展開

6.2.1訪問修飾符、6.2.2只讀修飾符

6.3.1類裝飾器、6.3.2其他裝飾器、6.3.3裝飾器工廠、6.3.4裝飾器執(zhí)行順序22496.4.1接口兼容性、6.4.2類兼容性、6.4.3函數(shù)兼容性

6.5.1聯(lián)合類型、6.5.2交叉類型、6.5.3類型別名、6.5.4類型推斷、6.5.5類型斷言

6.5.6泛型之：1.泛型函數(shù)、2.泛型接口224106.5.6泛型之：3.泛型類、4.泛型約束、5.索引簽名約束

6.6錯(cuò)誤處理

6.7.1傳統(tǒng)回調(diào)函數(shù)實(shí)現(xiàn)異步處理、6.7.2Prom