最も簡単な方法で ExpressJS を使用して TypeScript プロジェクトを作成する方法!! SilvenLEAFによる

TypeScript BackEND プロジェクトの作成方法を知りたい場合は、私の勇敢な騎士を恐れないでください.想像以上に簡単です!!手放す!

ステップ1

最初にターミナルで npm init -y を実行してプロジェクトを初期化すると、package.json ファイルが作成されます.次に、ターミナルで次のコマンドを実行して、これらのパッケージをインストールしましょう

npm i typescript ts-node express @types/node @types/express

typescript は typescript のコア パッケージであり、ts-node は node app.js と同じように .ts ファイルを実行するための node の typescript バージョンです.この場合は ts-node app.ts です. @types/node と @types/express には、それぞれノードとエクスプレスのすべてのタイプがあります.どうして?さて、typescriptはすべてタイプnaに関するものです:)

ボーナスステップ

それでは、開発に役立つものをいくつかインストールしましょう

npm i --D nodemon ts-node-dev

ts-node-dev パッケージは nodemon を typescript にバインドします. nodemon app.js の typescript バージョンは ts-node-dev app.ts です

それでは、package.json ファイルを更新しましょう.

  ....keep others unchanged
  "main": "app.ts",
  "scripts": {
    "start": "ts-node app.ts",
    "dev": "ts-node-dev app.ts"
  },
  ...keep others unchanged

ステップ2

次のコマンドを実行すると、tsconfig.json ファイルが作成されます.

tsc --init

ステップ 3

高速アプリを作成しましょう
作成した app.ts ファイルにこれらを書き込みます

import express, { Request, Response } from 'express';
import path from 'path';




// -------------------firing express app
const app = express();
app.use(express.json());
app.use(express.urlencoded({extended:false}));
app.use(express.static(path.join(__dirname, 'client/build')));




// -------------------routes
app.get('/home', (request: Request, response: Response)=>{
  console.log(request.url)
  response.json({ message: `Welcome to the home page!` })
});



// --------------------Listen
const PORT = process.env.PORT || 5000;
app.listen(PORT, ()=>{
  console.log(`Server running on PORT ${ PORT }`);
})

Yippie、私たちの最初の TypeScript Express アプリの準備が整いました.実行してテストしましょう

npm start または npm run dev と入力し、localhost:5000/home に移動して自分でテストします.楽しみ!