一、是什麼 單點登錄（Single Sign On），簡稱為 SSO，是目前比較流行的企業業務整合的解決方案之一 SSO的定義是在多個應用系統中，用戶只需要登錄一次就可以訪問所有相互信任的應用系統 SSO 一般都需要一個獨立的認證中心（passport），子系統的登錄均得通過passport，子系統 ...
目錄
TypeScript入門介紹
什麼是 TypeScript？
1.1 TypeScript 是由微軟開發的一種開源的編程語言。它是 JavaScript 的一個超集，通過為 JavaScript 提供靜態類型檢查，增加了代碼的可讀性和可維護性
發展歷史
1.2 TypeScript 的歷史和發展
TypeScript 最初由 Anders Hejlsberg 在微軟開發，並於2012年首次發佈。它的發展一直得到社區的積極支持，逐漸成為前端開發的主流選擇。
1.3 TypeScript 與 JavaScript 的關係
TypeScript 是 JavaScript 的超集，意味著所有的 JavaScript 代碼都可以在 TypeScript 中運行，同時 TypeScript 還提供了額外的語法和功能。
優缺點
1.4 為什麼選擇 TypeScript？
選擇 TypeScript 的主要原因包括：靜態類型檢查、更好的代碼提示和自動補全、更好的代碼組織和維護性、更好的開發體驗等。
1.5 TypeScript 的優勢與劣勢
TypeScript 的優勢包括類型安全、智能代碼提示、更好的代碼組織結構等；劣勢可能包括學習曲線較陡等。
應用場景
1.6 TypeScript 的應用領域
TypeScript 可以用於開發各種類型的應用程式，包括 Web 應用、Node.js 應用、移動應用、桌面應用等
開發工具
環境依賴
Node.js: TypeScript 編譯器是基於 Node.js 構建的，因此需要先安裝 Node.js。你可以從 Node.js 官方網站 https://nodejs.org/ 下載並安裝適合你操作系統的 Node.js 版本。
npm install -g typescript
編程IDE
多種主流編輯器如Visual Studio Code、Sublime Text、Atom等都對 TypeScript 提供了良好的支持。
vs調試
launch.json
{
// 使用 IntelliSense 瞭解相關屬性。
// 懸停以查看現有屬性的描述。
// 欲瞭解更多信息，請訪問: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"name": "ts-node",
"type": "node",
"request": "launch",
"args": [
"${relativeFile}"
],
"runtimeArgs": [
"-r",
"ts-node/register"
],
"cwd": "${workspaceRoot}",
"protocol": "inspector",
"internalConsoleOptions": "openOnSessionStart"
}
]
}
構建工具/工程化
構建工具: 在實際項目中，通常會使用一些構建工具來處理 TypeScript 代碼，比如 Webpack、Rollup、Vite 等。這些工具可以幫助你自動化構建過程、優化代碼等。你可以根據項目需求選擇合適的構建工具，併在項目中使用 npm 進行安裝和管理。
步驟彙總
1.安裝vs code
2.npm install -g typescript
3.運行tsc hello.ts。將ts編譯為js文件
4.調試 npm install -D ts-node ，安裝vs擴展 TS Debug。添加調試launch.json文件配置如下
{
// 使用 IntelliSense 瞭解相關屬性。
// 懸停以查看現有屬性的描述。
// 欲瞭解更多信息，請訪問: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"name": "ts-node",
"type": "node",
"request": "launch",
"args": [
"${relativeFile}"
],
"runtimeArgs": [
"-r",
"ts-node/register"
],
"cwd": "${workspaceRoot}",
"protocol": "inspector",
"internalConsoleOptions": "openOnSessionStart"
}
]
}
5.事實編譯：在vs code中 選擇終端→運行任務 輸入ts 選中tsc:監控，將對ts生成js文件進行實時監控。
第一個項目
- 在vs中創建01hello.ts,代碼如下
function sayHello(person:string){
return `hello ${person}`;
}
let user:string = 'Tom';
let r= sayHello(user);
console.log(r);
2.編譯成JS 手動編譯tsc 01hello.ts或自動編譯運行任務tsc:監控。將生成01hello.js文件。
3.可以將01hello.js 拿到其他web頁面使用。註：實際開發過程中，可能使用到構建工具如Webpack、Rollup、Vite 等，就不用運行步驟2和3了。
