寫在前面

重要概念： TypeScript（TS）是一種編譯時的靜態(tài)類型語言，是一種強類型語言

• 靜態(tài)類型: 在TypeScript中，變量和函數(shù)的類型是在編寫代碼時指定的，而不是在運行時確定的。這有助于捕捉類型錯誤，并提供更好的代碼自動補全、導(dǎo)航和重構(gòu)支持。
• 編譯時: 瀏覽器和nodejs并不能直接識別TS代碼，需要編譯成js代碼。TypeScript在編譯到JavaScript之前進行類型檢查。這意味著任何類型錯誤都會在編譯時被發(fā)現(xiàn)，而不是在代碼運行時。
• 強類型語言: 這個術(shù)語通常用來描述那些在編譯時執(zhí)行嚴格的類型檢查的語言。

安裝與運行

安裝

建議全局安裝

npm i -g typescript

安裝好之后，就可以直接使用tsc來編譯ts文件了

編譯

我們現(xiàn)在可以創(chuàng)建一個ts文件，并將他編譯成js文件，比如下面簡單的代碼

let str:string = "hello";

但是，就是這么簡單的代碼，編譯之后卻會報錯。

不用擔(dān)心，這個錯誤，并不是我們的錯誤，原因是默認情況下，TS會做出下面的幾種假設(shè)：

1、假設(shè)當(dāng)前環(huán)境在DOM環(huán)境中

2、如果代碼中沒有模塊化語句，默認代碼是全局執(zhí)行的，所以變量就是全局變量

要最簡單的解決，就是用模塊化

可以加上TS的配置文件，或者tsc命令行的選項參數(shù)

tsconfig.json配置文件

官方配置文件說明地址：tsconfig.json

如果項目中指定了tsconfig.json文件，運行tsc不需要再指定文件路徑地址

{
  "compilerOptions": {
    "target": "ES2017", // 編譯目標版本
    "lib":["ES2017","DOM","DOM.Iterable"], // 需要引用的庫
    "outDir": "./dist" // 指定輸出目錄，如果未指定和對應(yīng)的.ts文件同目錄
  },
  "include": ["src/**/*.ts"] // 指定需要編譯的文件或目錄
}

使用第三庫簡化流程

ts-node: 將ts代碼在內(nèi)存中完成編譯，同時完成運行

安裝:

npm i -g ts-node

運行:

ts-node src/index.ts

nodemon: 檢測文件變化

安裝:

npm i -g nodemon

運行:

nodemon --exec ts-node src/index.ts

當(dāng)然，我們可以像之前一樣，將這個代碼放入到package.json的 scripts 屬性中

"scripts": {
    "start": "nodemon --exec ts-node src/index.ts"
},

開發(fā)相關(guān)配置

tsconfig初始化

tsc --init

工程切換Typescript

如果本地工程中也安裝了typescript，并且希望相關(guān)類型引用指向本地typescript，而不是vscode內(nèi)置的typescript，可以自行進行切換

Ctrl (Command 在 macOS) + Shift + P 打開命令面板，輸入Select Typescript Version，選擇切換即可

開發(fā)相關(guān)設(shè)置

在**「設(shè)置」中，「打開工作區(qū)設(shè)置」**，由于內(nèi)容較多，可以使用搜索詞：typescript inlay hints

對于新手，推薦開啟的配置項主要是這幾個：

• Function Like Return Types，顯示推導(dǎo)得到的函數(shù)返回值類型；
• Parameter Names，顯示函數(shù)入?yún)⒌拿Q；
• Parameter Types，顯示函數(shù)入?yún)⒌念愋停?/li>
• Variable Types，顯示變量的類型。

{
  "typescript.inlayHints.functionLikeReturnTypes.enabled": true,
  "typescript.inlayHints.parameterNames.enabled": "all",
  "typescript.inlayHints.parameterTypes.enabled": true,
  "typescript.inlayHints.variableTypes.enabled": true
}

當(dāng)然，并不是所有人都習(xí)慣這樣的顯示方式，你可以根據(jù)自己的需要進行調(diào)整。

VS Code插件

Error Lens：這個插件能夠把錯誤直接顯示到代碼文件中的對應(yīng)位置：

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論