# 🏅 Day 1 - TypeScript 簡介 ## 題目一:TypeScript 介紹,五道單選題 > 影片連結:[TypeScript 介紹 - 它究竟強在哪?TypeScript 介紹 - 它究竟強在哪?](https://courses.hexschool.com/courses/typescript-30/lectures/50717866) > TypeScript 是一種靜態型別的程式語言,它是 JavaScript 的超集,可以編譯為純 JavaScript 代碼。TypeScript 提供了型別檢查、物件導向程式設計等功能,使得開發者能夠更容易地進行大型專案的開發和維護。 請觀看影片來回答以下五道單選題: 1. TypeScript 是什麼類型的程式語言? 1. 動態型別語言 2. 靜態型別語言 3. 混合型別語言 2. TypeScript 是基於哪種程式語言的超集? 1. Python 2. Java 3. JavaScript 3. TypeScript 的主要優勢是什麼? 1. 更高的執行效能 2. 更簡潔的語法 3. 更好的可維護性和可擴展性 4. TypeScript 提供了哪種功能來進行型別檢查(複選)? 1. 編譯時型別檢查 2. 執行時型別檢查 3. 靜態型別檢查 5. TypeScript 可以直接運行於瀏覽器中嗎? 1. 可以 2. 不可以 ## 題目二:TypeScript 環境安裝與教學 > 影片連結:[環境安裝流程](https://courses.hexschool.com/courses/typescript-30/lectures/50717867) 請依照影片或下方文字,將 TypeScript 環境安裝好,並截圖有編譯成功畫面即可 ### 步驟一:安裝VSCode編輯器 前往 [VSCode](https://code.visualstudio.com/) 官網,點擊左下角的 "Download" 按鈕,系統會自動檢測操作系統(Mac或Windows)並提供相應的下載選項。 ### 步驟二:安裝 [Node.js](https://nodejs.org/en) Node.js中包含NPM(Node Package Manager),這是一個套件管理工具,可以用來安裝 TypeScript。 ### 步驟三:安裝TypeScript 打開 VSCode,進入終端機(Terminal),執行以下指令來安裝TypeScript: ``` npm install -g typescript ``` 3. 安裝完成後,就可以開始建立TypeScript專案嘍 :D ### 步驟四:建立新專案 1. 在桌面或任意位置建立一個新資料夾,命名為 "TypeScript" 或其他喜歡的名稱。 2. 在 VSCode 中,點擊左上角的“檔案”(File),然後選擇“開啟資料夾”(Open Folder)來打開剛剛建立的資料夾。 ### 步驟五:初始化TypeScript專案 1. 在VSCode的終端機中,執行以下指令來初始化TypeScript專案: ```bash tsc --init ``` 2. 這將生成一個`tsconfig.json`檔案,可以在這裡配置 TypeScript 的各種設定。 ### 步驟六:編寫並編譯TypeScript代碼 建立一個`hello.ts`檔案,寫入 TypeScript 程式碼。要編譯TypeScript檔案,再次打開終端機並執行:會多一個對應的`hello.js` 的檔案。 ``` tsc hello.ts ``` ### 步驟七:自動編譯設定 如果希望TypeScript檔案在保存時自動編譯,可以使用`--watch` 參數: ```bash tsc --watch ``` ## 回報流程 將答案寫在 CodePen,並貼至底下回報就算完成了喔! 解答位置請參考下圖(需打開程式碼的部分觀看) ![](https://i.imgur.com/vftL5i0.png) <!-- 解答: 2、3、3、(1、3)、2 --> 回報區 --- | Discord | CodePen / 答案 | |:-------------:|:----------------------------------------------------------------:| |洧杰|[Codepen](https://codepen.io/hexschool/pen/poYgYqW?editors=1010)| |kevinhes|[Codepen](https://codepen.io/kevinhes/pen/PoLNydd)| |hannahpun|[Codepen](https://codepen.io/hannahpun/pen/zYbqmyK) |HsienLu|[Codepen](https://codepen.io/Hsienlu/pen/BaMMeOa) |苡安|[Codepen](https://codepen.io/yi-an-yang/pen/xxBVyed) |BonnieChan|[Codepen](https://codepen.io/Bonnie-chan-the-bold/pen/jOJqegN) |銀光菇|[CodePen](https://codepen.io/genesynthesis/pen/mdoPzNG?editors=1010)| |亞當|[CodePen](https://codepen.io/Adam-Hsu/full/MWxyPMa)| |連小艾|[CodePen](https://codepen.io/bolaslien/pen/GReZYzB)| |展誠|[CodePen](https://codepen.io/hedgehogkucc/pen/qBvZJzX)| |hiYifang|[HackMD](https://hackmd.io/@gPeowpvtQX2Om6AmD-s3xw/B1VlA0_uT)| |m_m|[Codepen](https://codepen.io/minnn7716/pen/bGZpQoN)| |精靈|[CodePen](https://codepen.io/justafairy/pen/abMNPoa)| |Yee|[CodePen](https://codepen.io/alivealife/pen/mdoPaKr)| |Otis|[CodePen](https://codepen.io/humming74/pen/mdoPoQZ)| |Yang|[CodePen](https://codepen.io/Yang-J/pen/XWGdLbN)| |Bryan Chu|[CodePen](https://codepen.io/bryanchu10/pen/jOJqjYq)| |Derrick|[CodePen](https://codepen.io/Derricktang/pen/zYbqVJp)| |hannahTW|[CodePen](https://codepen.io/hangineer/pen/ExMKqVe?editors=1010)| |Lisa|[CodePen](https://codepen.io/lisaha/pen/ZEPWgqq)| |77_0411|[CodePen](https://codepen.io/chungchi/pen/KKEzOaX)| |wendy_.li|[HackMD](https://hackmd.io/PcmFgqZwRd-4Ep3-LgK5_Q)| |Henry_Wu| [CodePen](https://codepen.io/hekman1122/pen/oNVLvbL) |Starr|[CodePen](https://codepen.io/StarrZhong/pen/xxBVvjN)| |jasperlu005|[Codepen](https://codepen.io/uzzakuyr-the-reactor/pen/WNmxeGg)| |發仔|[Codepen](https://codepen.io/faypo/pen/ExMyYvV?editors=1010)| |rikku1756|[Codepen](https://codepen.io/rikkubook/pen/GReZexa)| |NiuNiu|[Codepen](https://codepen.io/Dawson-the-bold/pen/rNRLBJa)| |deedee1215|[Codepen](https://codepen.io/diddy032/pen/yLwJBbr)| |leave3310|[Codepen](https://codepen.io/leave3310-the-looper/pen/eYXzOPN?editors=1000)| |薏慈|[Codepen](https://codepen.io/its_wang/pen/KKEMPLP?editors=1100)| erwin阿瀚|[Codepen](https://codepen.io/yohey03518/pen/oNVLvRG)| TrevorLin|[Codepen](https://codepen.io/0Trevor0/pen/abMZoam) Eric Yu|[Codepen](https://codepen.io/OE3OE3OE3/pen/LYaZYNe) Zuo|[Codepen](https://codepen.io/linchinhsuan/pen/zYbBYKw) Yao|[Codepen](https://codepen.io/AlbertoLL/pen/oNVLNey) shan_13|[Codepen](https://codepen.io/yishan13-tsai/pen/KKEMKxg) | Mi | [Codepen](https://codepen.io/Mi-Jou-Hsieh/pen/bGZeGQV?editors=1010) | |:------------ |:----------------------------------------------------------------------------- | | becca | [Codepen](https://codepen.io/beca323/pen/MWxeYgE) | | hiraka | [CodePen](https://codepen.io/judyyy/pen/ZEPOYEa) | | JC | [Codepen](https://codepen.io/jcsamoyed/pen/oNVLgXV) | | Teddy | [Codepen](https://codepen.io/TaideLi/pen/GReqReV) | | Mia | [Codepen](https://codepen.io/Mianzi/pen/poYbvLL) | | shaokang | [Codepen](https://codepen.io/tony-hsueh/pen/oNVLXeY) | | yunhung | [Codepen](https://codepen.io/ahung888/pen/zYbBGvg) | | YH.Lo | [Codepen](https://codepen.io/chloelo/pen/ZEPOBzV) | | YC | [HackMD](https://hackmd.io/SKoJd3EsTlitnjzCx4Rarg#🏅-Day-1---TypeScript-簡介) | | BEN | [Codepen](https://codepen.io/Kao-Yu-Chun/pen/wvOWJVr) | | wei | [Codepen](https://codepen.io/jweeei/pen/rNRLGYB) | | ZOE | [Codepen](https://codepen.io/Zoechiueh/pen/xxBOpXm?editors=0010) | | ZS | [Codepen](https://codepen.io/irishuang/pen/BabzxqW) | | ethan1331 | [Codepen](https://codepen.io/EthanTsai/pen/BabzVRY) | | Paul_09148 | [Codepen](https://codepen.io/JiaBaoShen/pen/abMZPqQ) | | Alex-Chiu | [Codepen](https://codepen.io/datsxzqg-the-selector/pen/ExMyzej) | | 時雨 | [Codepen](https://codepen.io/jjustin-35/pen/QWoKyZM) | | chaya | [Codepen](https://codepen.io/vickyvvv9/pen/xxBEdBZ) | | puffy | [Codepen](https://codepen.io/TernMayDay/pen/jOJMwER) | | Jack | [codepen](https://codepen.io/lj787448952/pen/YzgGQVe) | | 楓 | [codepen](https://codepen.io/maplestartend/pen/Babzdoj) | | nina.kuo | [codepen](https://codepen.io/ninakuo0814/pen/WNmGXPN) | | 小米 | [codepen](https://codepen.io/joanne-wei/pen/XWGjzNd?editors=1010) | | Alyce | [codepen](https://codepen.io/alycehwy/pen/QWoKZXJ) | | 啞鈴 | [codepen](https://codepen.io/TinaTing/pen/BabLgVM) | | bonnieli1414 | [codepen](https://codepen.io/bonnieli1414/pen/dyrOMMb?editors=1010) | | 翰毅 | [codepen](https://codepen.io/yzuigtdw-the-animator/pen/RwdoRzY) | | 柴貓 ouo | [codepen](https://codepen.io/shibacat/pen/WNmooYJ) | |皓皓|[HackMD](https://hackmd.io/@cutecat8110/HyzrfQWta)| |Amberhh | [codepen](https://codepen.io/Amberhh/pen/YzgNyyp)| | 黃士桓 | [codePen](https://codepen.io/shr-huan-huang/pen/oNVBxpK) | | clairechang | [codePen](https://codepen.io/claire-chang-the-bashful/pen/XWOQqxv) | | 我是泇吟 | [codePen](https://codepen.io/kljuqbxs/pen/MWxegeR) | | Rochel |[Codepen](https://codepen.io/rochelwang1205/pen/PoLWdOL?editors=1100)| |怡竹|[Codepen](https://codepen.io/Annie-Pan-the-selector/pen/qBvRGJG)| |aki|[Codepen](https://codepen.io/aki168/pen/MWxpedN)| |Louise|[Codepen](https://codepen.io/LouiseHuang/pen/JjzWMKE)| | fanshu0303 | [CodePen](https://codepen.io/JuiHsuanLee0303/pen/vYPxVQB) | | Ginn.dev | [Codepen](https://codepen.io/ginnlee/pen/yLwMZVg?editors=1010) | | Nick Lin | [Codepen](https://codepen.io/NickLinP/pen/PoLmwYQ) | |Snorlax|[HackMD](https://hackmd.io/@snorlaxpock/H13XmiDFa)| |Yoshi|[CodePen](https://codepen.io/yoshiyyc/pen/KKEaOYM)| |NathanJames|[CodePen](https://codepen.io/ufo060204/pen/xxBrXJY)| |Rena|[CodePen](https://codepen.io/aureate0116/pen/JjzJgYP)| |Han|[HackMD](https://hackmd.io/@laihan/B18o2EaKa)| |Chelly|[HackMD](https://codepen.io/chellyhsu/pen/OJqxLwr)| |大衛|[HackMD](https://codepen.io/exnsrpjc/pen/wvOpvgO)| |Eileen|[CodePen](https://codepen.io/Eileen-io/pen/poYpXMy)| |狸貓|[CodePen](https://codepen.io/tanuki320/pen/MWxGrKg?editors=1010)| |阿鬥鬥|[CodePen](https://codepen.io/yvonne217/pen/MWxGdEv) |Tori|[HackMD](https://hackmd.io/OAdkiOH-S_WkD-LF6IONVA?both)