以下將TypeScript簡稱ts
1. 為什么要學
1). 減少bug，提高質量
強型別、強語言【列舉、介面、泛型...】，代碼更健壯，語法等例外，編譯階段能“提前”報錯
2). 面向物件
支持面向物件，軟體設計與工程化更為成熟，更容易做單元測驗、持續集成等
3). 提高效率
- 語言簡單易學，尤其是有C#、java基礎的后端同學
- 相比js，代碼簡潔易讀，大型專案實作相同的功能代碼量更少
- ide支持更為友好，如：智能提示、變數強關聯、重構等
- 絕大部分常用類別庫已經支持智能提示
4). 業內趨勢
- GitHub年度報告：TypeScript超越C++成第四大語言
- ts成為騰訊2020年增速第二的語言，僅次于go
- 代表作品github上使用ts得repo-按star降序
- vscode
- node下一代-deno
- angular
- nest
- apollo-client
- ....不一一舉例
2. 練級攻略
- 基礎語法
- typescript入門教程：內容少，易上手
- 官方手冊：相對全面
- 編碼風格
- 谷歌-ts代碼風格指導
- 核心功能
- tsconfig.json
- 面向物件
- 泛型
- 編譯 -> 包大小
- 軟體工程
- 單元測驗
- 重構
- 設計模式
- 面向物件-Java編程思想
3.適用場景
- 適合：1)框架、類別庫組件開發；2)業務開發，尤其適合框架、類別庫組件開發，建議先將類別庫組件ts，逐步向業務開發推廣
4. 推薦ide
新手 webstorm > vscode，老手反之
- webstorm特點
- 優點：開箱即用(無需安裝插件)、易于重構【個人覺得非常重要】
- 缺點：收費、沒idea成熟
- 長期：還是要被VSC碾壓的
5. 推薦書籍
- TypeScript入門與實戰
- 推薦級別A，理由：介紹全面，適合入門及進階
- 深入理解TypeScript
- 推薦級別B，理由：入門及編譯簡介
6. tsconfig.json配置demo
{
"compilerOptions": {
"pretty": true,
"module": "commonjs",
"importHelpers": true,
"target": "es5",
"lib": [
"es2015",
"es2016",
"es2017",
"es2018",
"es2019",
"dom",
"ES2015.Promise"
],
"allowJs": true,
"sourceMap": false,
"baseUrl": "./src",
"outDir": "./build/src/",
"paths": {
"@/*": [
"*"
],
"tslib": [
"path/to/node_modules/tslib/tslib.d.ts"
]
},
//編譯例外時候，禁止發行
"noEmitOnError": true,
//禁止隱性any
"noImplicitAny": true,
//嚴格的null檢查，避免如可選引數，未判斷undefined引發的問題等
"strictNullChecks": true,
//未使用的變數，拋出錯誤
"noUnusedLocals": true,
//未使用的引數，拋出錯誤
"noUnusedParameters": true,
//檢查函式是否有回傳值
"noImplicitReturns": true,
//啟用嚴格模式，對型別賦值、型別轉換更嚴格
"strict": true,
//https://mariusschulz.com/blog/downlevel-iteration-for-es3-es5-in-typescript
"downlevelIteration": true
},
"typeRoots": [
"node_modules/@types",
"typings"
],
"include": [
"src/**/*.ts"
],
"exclude": [
"node_modules",
"test"
]
}
7. 看法
ts將會是web前端開發首選語言
ts是js的超集，不是替代物
- 寫好ts，還得先學好js
- 再學習ts語法及面向物件設計
- 關注ts編譯原理及編譯結果
不得已存在的any型別
- 產生問題：any型別，不支持強型別、智能提示等，相當于把ts回退到js
- 問題原因：1)兼容，老代碼及外部依賴如WEBAPI回傳的引數型別，在不同瀏覽器或不同版本的相同瀏覽器都不一樣，只能定義為any型別；2)類別庫不健全，lid.d.ts不全面，導致部分屬性、方法的型別描述不完整，得再型別定義后添加" | any" 組合型別才能滿足需求，不得不用any型別
- 改進辦法：有明確的復合型別，可以通過組合型別來定義型別，如: age: int | any，比純any，IDE能添加int型別相關的智能提示和語法報錯
復合型別沒必要
- 交叉型別、索引型別、映射物件型別，意義不大，適用場景少，易濫用，明顯降低代碼可讀性
- js的問題是語言太隨意，導致很多程式員把大量的時間浪費在語法學習上
面向物件不徹底
- 不支持多載
- 方法默認是public修飾符
面向物件的邊界
- 服務端開發，如使用nestjs等框架，建議所有代碼都面向物件，甚至可以借鑒java spring，使用面向介面編程，解決依賴倒置的需求
- 客戶端開發，部分場景下，過度使用面向物件，可能會導致包體積變大，需要留意
8. 業內實踐
- 整潔的js代碼
- 整潔的js代碼-中文翻譯
- 將超過5000萬行JS代碼遷移到TypeScript，我們得到的10大見解
- Typescript Best Practices
- TypeScript系列（五）最佳實踐
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/388961.html
標籤：JavaScript