TypeScript 是一种强类型的编程语言，基于 JavaScript 进行扩展，旨在提高代码的可维护性和可读性，解决 JavaScript 的隐式转换和类型不匹配问题。它的流行由于其开源特性及与各种框架（如 Vue、React、Angular）的兼容性，使得开发者能写出更严谨的代码。环境设置示例显示如何在项目中配置 TypeScript，包括步骤如安装依赖、修改配置文件等。

1. TypeScript

2. TypeScript 背景

3. TypeScript 是啥
● 2012年誕生
● 強型別語言
● 基於 JavaScript 去擴充
● 提高維護性和可讀性
● 微軟推的

4. TypeScript 為何誕生
● 解決 JavaScript 存在的隱式轉換問題。複習隱式轉換，如：
[] + []、{} + []、[] + {}、{} + {}、"hello" - 1、"11" + 2、"5" - "2"
● 解決不慎重新賦值但又不同型別的問題，如：
var foo = 123;
foo = '456';
Ref: https://basarat.gitbook.io/typescript/getting-started/why-typescript

5. TypeScript 為何流行
● Open source
● 不是，也不會取代 JS
● 任何框架皆能用（Vue, React, Angular）
● IDE 可以更好地告訴你錯誤的地方（含Visual Studio, Visual Studio Code,
Nova, Atom, Sublime Text, Emacs, Vim, WebStorm and Eclipse.）

6. TypeScript 學了可以幹嘛
● 更嚴謹的寫 code
● 你將（比較）可以相信你的程式
● 避免奇怪的 bug
● 與其他公司接軌，更有競爭力

7. TypeScript 相容性
● jQuery, React, Vue, Angular 都可以，學一套萬用
● 可以部分 TypeScript，部分 JavaScript，但 TypeScript 最好先從小元件下手

8. TypeScript 環境設定
以專案「Adnetwork」為例

9. TypeScript 環境設定
adnetwork 基於 craco 建置，需要以下步驟：
1. 安裝套件 craco-alias、typescript 進
devDenpencies

10. TypeScript 環境設定
adnetwork 基於 craco 建置，需要以下步驟：
2. 將原本已設定的 jsconfig 改為 tsconfig

11. TypeScript 環境設定
adnetwork 基於 craco 建置，需要以下步驟：
3. 將原本 jsconfig.json 改名為 tsconfig.json

12. TypeScript 環境設定
adnetwork 基於 craco 建置，需要以下步驟：
4. 由於 craco-alias 的 options.source = "tsconfig" 時
tsConfigPath 是必填欄位，只好另創檔案加入 alias 內容
，檔名：tsconfig.extend.json

13. TypeScript 環境設定
adnetwork 基於 craco 建置，需要以下步驟：
5. 其他：當檔名為 .ts 但裡面可能有 import 一些套件
，craco 會自動告知需要去安裝一些專門提供給 .ts 的套
件引用，原本 import 方式維持不變

14. TypeScript 環境設定
6. Unit test 如果 import 的檔案
是 .ts，test 檔案本身也必須被改
成 .ts 檔，並在測試上加上支持 .ts
的方法，以 jest 為例，如圖設定

15. TypeScript cheatsheets
https://github.com/typescript-cheatsheets/react

16. 參考網站
CheatSheets
https://react-typescript-cheatsheet.netlify.app/docs/basic/setup
Craco alias
https://github.com/risenforces/craco-alias
TypeScript 中文教學 30 篇
https://ithelp.ithome.com.tw/users/20120053/ironman/2273
深讀 TypeScript
https://basarat.gitbook.io/typescript