很高興你來到這裡，本次鐵人賽系列文章將會分享如何學習 TypeScript 以及實戰運用。
目前從事前端已經有兩年，接觸 TypeScript 也只有一年多的經驗，以往有看過大神分享的 TypeScript 鐵人賽文章，時至今日，站在巨人肩膀上的我也想透過文章的方式輸出，讓我能更有效率地鞏固知識，如果有寫得不好或需要調整的地方也不吝賜教。
我想在 2024 年的前端工程師，應該沒有人不知道了吧，但還是不免俗的稍微介紹一下。
從官網的介紹，我們可以看到 TypeScript 是 JavaScript 的超集，添加了許多 JavaScript 沒有的語法，與編譯器更緊密的整合在一起，且可以轉換為 JavaScript 到各個地方中運行。
以下是 TypeScript 的工作方式，TypeScript 程式碼會被編譯為純 JavaScript 代碼，因此可以在任何支援 JavaScript 的環境中運行，如：瀏覽器或 Node.js。
既然最後都是 JavaScript 在運行，我們就要了解 TypeScript 是想解決哪些問題
增加了型別系統（Type System），可以在開發階段就檢查類型錯誤的問題
支援更多便於開發維護的語法特性，讓開發者體驗優化，如：枚舉、泛型、裝飾器
可以編譯出兼容各種版本的 JavaScript
首先想要學習開發 TypeScript，會建議需要先安裝下面這些工具
以上工具都安裝完了之後，我們先在專案資料夾中下
tsc --init
這時專案內會多一個 tsconfig.json 的檔案，且裡面會有很多設定可以調整，我們先關注幾個最常用的設定
/src
/dist
ES5
接著我們先建立一個 ts 檔案在 src 目錄下
// /src/main.ts
interface IPerson {
name: string;
}
const echoName = (person: IPerson) => {
console.log(person.name);
};
echoName({ name: "Mao" });
這時你在終端機打 tsc (把 ts 檔案編譯成 js 的指令)，就會發現新增了一個 dist 的資料夾內有 main.js 的檔案，並且這個 js 已經轉換兼容 ES5 的語法
恭喜你～已經開始在撰寫 TypeScript 程式碼了！
iThome鐵人賽
看影片追技術