Express.js ile Typescript kurulumu

Bu yazıda bir express.js projesine Typescript nasıl eklenir ve kullanılır onu anlattım.
Ayrıca express.js ile basit bir rest api yazalım adlı yazıma da öncesinde bakabilirsiniz.

Paketlerin kurulumu

Öncelikle projeniz için bir klasör oluşturun ve bu klasörde bir terminal açıp ardından npm init -y komutu ile bir package.json oluşturalım.

Ardından sırasıyla aşağıdaki komutları yazalım. Önce express.js i yükleyelim ardından typescript ve gerekli tip paketlerini

npm install express
npm install -D typescript ts-node @types/node @types/express

Bu paketleri kurduktan sonra bazı faydalı npm scriptleri de ekleyeceğiz.

Tsconfig.json dosyası oluşturma

Typescripti sadece kurmak yetmiyor ona bir de ayarlarını içeren bir config dosyası oluşturmamız gerekiyor. Aşağıdaki bu projede kullandığım config dosyasını bulabilirsiniz.

{
  "compilerOptions": {
    "target": "ES6",
    "module": "commonjs",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}

Src klasörü ve app.ts dosyası oluşturma

Tsconfig.json dosyasında projemizin root yani ana klasörünü /src klasörü olarak belirtmiş. Yani typescript => javascript dönüşümü yaparken bu klasördeki dosyalara bakacak ve /dist klasörüne de çıktı olarak javascript dosyalarını oluşturacak. Bizim sadece /src klasörü ile ilgilenmemiz yeterli.

src klasörünü oluşturduktan sonra içine bir tane app.ts dosyası oluşturun. Alttaki örnek kodu yazabilirsiniz projeyi test etmek için.

import express, { Request, Response } from "express"

const app = express()

const PORT: number | string = process.env.port || 3000
const mesaj: string = "Merhaba Express & TS"

app.get("/", (req: Request, res: Response) => {
  res.send(mesaj)
})

app.listen(PORT, () => console.log(`Sunucu port : ${PORT} 'de başladı`))

Npm Scriptlerini yazma

Son olarak birkaç npm scripti yazmamız gerekiyor. package.json dosyasının içine gelerek aşağıdaki script kısmını ekleyelim.

"scripts": {
    "start": "node dist/app.js",
    "dev": "ts-node src/app.ts",
    "build": "npx tsc"
  }

Package.json dosyasının son hali şu şekilde olmalı (versiyon numaraları değişebilir)

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "src/app.js",
  "scripts": {
    "start": "node dist/app.js",
    "dev": "ts-node src/app.ts",
    "build": "npx tsc"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.18.2"
  },
  "devDependencies": {
    "@types/express": "^4.17.17",
    "@types/node": "^20.4.4",
    "ts-node": "^10.9.1",
    "typescript": "^5.1.6"
  }
}

Projeyi build etme ve çalıştırma

Bu eklediğimiz scriptler sayesinde geliştirme yapabiliriz ve projeyi son haline build edebiliriz.

npm run dev komutunu girdiğinizde node direkt olarak app.ts dosyasını çalıştırır.
npm run build komutunu girdiğinizde typescript derleyicisi app.ts dosyasınızı app.js olarak /dist klasöründe oluşturur.
npm start komutu /dist klasöründe app.js dosyasını çalıştırır. Dikkatli olun bunun için önce build etmeniz gerekli.

Son olarak sunucuyu otomatik başlatmak için nodemon paketi kurabilirsiniz. Ayrıca build&start gibi bir npm scripti ekleyerek her sunucu başlamadan önce projeyi build edebilirsiniz. Bu yazıda çok basit bir TS kurulumu anlattım. Sorunuz varsa yorum atabilirsiniz.

Yorum bırakın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Scroll to Top