我們應該如何(以及為什麼)要將Typescript與Express、nodejs一起使用(譯文)

前端技術小哥發表於2019-03-04

Typescript與Express、nodejs
在我的職業生涯開始時,我是一名桌面應用開發人員,其中強型別語言佔據了市場主導地位。
當我遷移到Web開發時,我對JavaScript和Python等語言的每個新功能都很著迷。事實上,我沒有必要宣告變數的型別,這極大的提高了我的生產力,並且使我的工作變得更有趣了。
所以我第一次聽說TypeScript時,腦海中的第一個想法是這個語言的演變是不是倒退了一步。

我是怎麼想的?

我改變了主意嗎?

是的,但這也要取決於具體情況。對於我獨自工作的個人專案,我仍然更喜歡純JavaScript,他的生產力更高。但是,對於那種團隊工作的大型專案,我建議使用TypeScript。在整篇文章中,我將解釋如何使用以及為什麼去使用。

typescript

生產力與維護

根據概念定義的,“TypeScript是用於應用程式規模開發的JavaScript”。也就是說,我們對專案初始設定的工作可以通過複雜專案的可維護性得到補償。下面我們來看一下為什麼會發生這種情況:

輸入safe = less errors通過在程式碼中定義型別,您可以允許IDE在使用僅在執行時感知的類和函式時確認錯誤。

例:

我們應該如何(以及為什麼)要將Typescript與Express、nodejs一起使用(譯文)

這裡我使用的是Visual Studio Code,它指出了兩個錯誤:
在第6行:我們試圖將字串引數傳遞給只接受數字的函式。
在第9行:我們試圖將一個返回數字的函式的結果賦給字串。
如果沒有Typescript,這兩個錯誤將被忽視,導致最終應用程式出現一些錯誤。

IDE更容易尋找公開專案模組

在複雜的專案中,我們有數百個類分佈在多個檔案中。當我們定義型別時,IDE能夠將物件和函式關聯到給它們起源的檔案。
當使用control + 單擊從另一個檔案匯入的方法或類時,IDE將自動導航到匯入的檔案,突出顯示定義引用的行。

我們應該如何(以及為什麼)要將Typescript與Express、nodejs一起使用(譯文)

我們可以在從其他檔案匯入的類中使用自動完成功能。

我們應該如何(以及為什麼)要將Typescript與Express、nodejs一起使用(譯文)

維護的難度是Java和C#開發人員避免將大型專案遷移到JS的主要原因之一。我們可以說,Typescript是一種克服這一障礙的企業語言。

如何使用Typescript設定Express專案

現在讓我們一步一步地建立一個在Express.js專案中使用Typescript語言的環境。

npm init
複製程式碼

我們現在安裝typescript包。

npm安裝typescript -s
複製程式碼

關於Typescript節點包 Node.js是一個執行Javascript而不是Typescript的引擎。節點Typescript包允許您將 .ts檔案轉換為 .js指令碼。Babel也可用於轉換Typescript,但市場標準是使用官方的Microsoft軟體包。

在我們內部package.json我們將放置一個名為tsc:

“scripts”:{ 
    “tsc”:“tsc” 
},
複製程式碼

此修改允許我們從專案資料夾中的命令列呼叫typescript函式。所以我們可以使用以下命令:

npm run tsc  -  --init
複製程式碼

此命令通過建立tsconfig.json檔案來初始化typescript專案。在此檔案中,我們將取消註釋該outDir選項,併為要傳遞的已轉換的.js檔案選擇一個位置:

我們應該如何(以及為什麼)要將Typescript與Express、nodejs一起使用(譯文)

安裝express.js

npm install express -s
複製程式碼

Express和Typescript包是獨立的。這樣做的結果是Typescript不“知道”Express類的型別。Typescript有一個特定的npm包來識別Express型別。

npm install @ types / express -s
複製程式碼

Hello world

為了擁有儘可能最簡單的應用程式,我將使用express.js教程的hello world示例:

var express = require('express');
var app = express();

app.get('/', function (req, res){
    res.send('hello world!');
});

app.listen(3000, function(){
    console.log('Example app listening on port 3000');
})
複製程式碼

在我們的專案中,我們將建立一個名為的資料夾app。在此資料夾中,我們將建立一個名為app.ts以下內容的檔案:

import express = require('express');

// Create a new express application instance
const app: express.Application = express();

app.get('/', function (req, res) {
  res.send('Hello World!');
});

app.listen(3000, function () {
  console.log('Example app listening on port 3000!');
});
複製程式碼

編譯我們的第一個應用程式

npm run tsc
複製程式碼

如您所見,該命令自動建立了build資料夾和.js檔案。

我們應該如何(以及為什麼)要將Typescript與Express、nodejs一起使用(譯文)

執行express:

node build / app.js
複製程式碼

有了這個,我們已經在埠3000上執行了一個伺服器:

我們應該如何(以及為什麼)要將Typescript與Express、nodejs一起使用(譯文)

執行TypeScript而不進行轉換

您可以使用ts-node包直接在節點上執行typescript 。

此軟體包僅建議用於開發。要在生產中進行最終部署,請始終使用專案的javascript版本。

該ts-node已被包含在另一個包的依賴關係,T ts-node-dev。安裝後,ts-node-dev我們可以執行命令,以便在專案檔案發生更改時重新啟動伺服器。

npm安裝ts-node-dev -s
複製程式碼

在我們內部,packege.json我們將新增兩個指令碼:

“scripts”:{ 
    “tsc”:“tsc”,
    “dev”:“ts-node-dev --respawn --transpileOnly ./app/app.ts”,“prod”:“tsc 
    && node ./build/ app.js“ 
},
複製程式碼

要啟動開發環境:

npm run dev
複製程式碼

要以生產模式執行伺服器:

npm run prod
複製程式碼

有啥問題可以在評論處給我留言謝謝你的閱讀!

相關文章