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了。