咱們應該如何(以及爲何)要將Typescript與Express、nodejs一塊兒使用(譯文)

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

我是怎麼想的?

我改變了主意嗎?

是的,但這也要取決於具體狀況。對於我獨自工做的我的項目,我仍然更喜歡純JavaScript,他的生產力更高。可是,對於那種團隊工做的大型項目,我建議使用TypeScript。在整篇文章中,我將解釋如何使用以及爲何去使用。javascript

typescript

生產力與維護

根據概念定義的,「TypeScript是用於應用程序規模開發的JavaScript」。也就是說,咱們對項目初始設置的工做能夠經過複雜項目的可維護性獲得補償。下面咱們來看一下爲何會發生這種狀況:java

輸入safe = less errors經過在代碼中定義類型,您能夠容許IDE在使用僅在運行時感知的類和函數時確認錯誤。node

例:typescript

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

IDE更容易尋找公開項目模塊

在複雜的項目中,咱們有數百個類分佈在多個文件中。當咱們定義類型時,IDE可以將對象和函數關聯到給它們起源的文件。
當使用control + 單擊從另外一個文件導入的方法或類時,IDE將自動導航到導入的文件,突出顯示定義引用的行。npm

咱們能夠在從其餘文件導入的類中使用自動完成功能。json

維護的難度是Java和C#開發人員避免將大型項目遷移到JS的主要緣由之一。咱們能夠說,Typescript是一種克服這一障礙的企業語言。bash

如何使用Typescript設置Express項目

如今讓咱們一步一步地建立一個在Express.js項目中使用Typescript語言的環境。服務器

npm init
複製代碼

咱們如今安裝typescript包。app

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文件選擇一個位置:

安裝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文件。

運行express:

node build / app.js
複製代碼

有了這個,咱們已經在端口3000上運行了一個服務器:

運行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
複製代碼

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

相關文章
相關標籤/搜索