Altın Konu Node.js TypeScript Nasıl Kullanılır?

ByMoDuS · 30 Nis 2022

Node.js TypeScript Nasıl Kullanılır?

Node.JS'de TypeScript Nasıl Kurulur

Node.js projenizle TypeScript'i kullanmaya başlamak için burada ve orada birkaç yapılandırma çekmeniz gerekecek.

Ancak, devam etmeden önce Node.js npm paketini kurduğunuzdan emin olun.

Bir package.json Dosyasını Başlatın

Terminalinizi açın ve bir proje klasörü oluşturun. Ardından, bu yeni dizini girin ve bir Node.js projesini başlatın:

npm init

Yukarıdaki komut, bağımlılıklarınızı depolamak için bir package.json dosyası oluşturur.

TypeScript ve Diğer Bağımlılıkları Yükleyin

Ardından devam edin ve TypeScript'i Node.js projenize yükleyin:

npm i -D typescript

-D anahtar sözcüğü, TypeScript'in package.json içindeki devDependencies'in bir parçası olarak yüklenmesini sağlar.

Ayrıca, Express.js için bir TypeScript tanımı olan @types/express yüklemeniz gerekir:

npm install -D @types/express

Ardından, bir tsconfig.json dosyası başlatın. Bu, projeniz için temel derleyici seçeneklerini detaylandırır:

npx tsc --init

Yukarıdaki komut, proje kök klasörünüzde bir tsconfig.json dosyası oluşturur. Ayrıca, Express.js'yi yükleyin.

Sunucuları yalnızca Node.js'nin yerleşik HTTP temel öğeleriyle yönetmeyi düşünüyorsanız bunu atlayabilirsiniz. Ancak Express.js bunu kolaylaştırır:

npm install express

Ardından, kodunuzda herhangi bir değişiklik olduğunda sunucunuzu otomatik olarak yeniden başlatan bir paket olan nodemon'u yükleyin.

Çalışması için bunu global olarak yüklediğinizden emin olun:

npm install -g nodemon

TypeScript'i Node.JS ile Yapılandırma

Seçtiğiniz kod düzenleyiciyi kullanarak daha önce başlattığınız tsconfig.json dosyasını açın. Bu dosyada çok şey olabilir.

Bu dosyayı mevcut haliyle yapılandırabilirken, daha basit hale getirmek için tüm içeriğini aşağıdakiyle değiştirebilirsiniz.

Başlamak için tsconfig.json'da ihtiyacınız olan şey şudur:

{
"compilerOptions": {
"module": "commonjs",
"esModuleInterop": true,
"target": "es6",
"moduleResolution": "node",
"sourceMap": true,
"outDir": "dist" //Specifies the transpiler directory.
},
"lib": ["es2015"]
}

Şimdi package.json dosyasını açın, TypeScript ve Express'i yükledikten sonra şu anda nasıl göründüğü:

Ardından, komut dizisi dizisine aşağıdaki yapılandırmaları ekleyin:

"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "npx tsc",
"start": "node ./dist/app.js",
"dist": "tsc -p .",
"dev": "nodemon ./src/app.ts", //Replace this with the correct directory path for app.ts in your case
"type": "module"
}

Bu nedenle, geliştirme ortamını başlattığınızda nodemon, app.ts dosyasını çalıştırır.

Node.js daha sonra bunu HTTP sunucusuyla iletişim kuran app.js içindeki JavaScript'te derler.

Ardından, proje kök dizininizde bir src klasörü oluşturun. Bu klasörün içinde boş bir TypeScript dosyası oluşturun ve onu app.ts olarak adlandırın .

Aktarıcı Dizini Oluşturun

Aktarıcı, TypeScript kodunu yerel JavaScript'te derleyen bir JavaScript dosyasıdır.

Bu, sunucunun kesinlikle yazılan komut dosyası yerine JavaScript olarak kodunuzla ilişki kurmasını sağlar.

TypeScript kod yapısını işlerken, aktarıcı dosyası onu JavaScript'te derler.

Şimdi, dist aktarıcı dizinini otomatik olarak oluşturmak için derleme komut dosyasını çalıştırın:

npm run build

Yukarıdaki komut, TypeScript kodunuzu JavaScript'te derler. Oluşturulan klasör iki dosya içerir;

app.js ve app.js.map

package.json'u tekrar açınız. Main adlı dizide bir anahtar göreceksiniz. Değerinin index.js'ye işaret ettiğini görebilirsiniz.

Bunu app.js (aktarıcı) dosya dizini ile değiştirin:

"main": "./dist/app.js",

Biçimlendirmeden sonra package.json şöyle görünmelidir:

HTTP İsteği Oluşturun ve Çalıştırın

Şimdi kodunuzun gerektiği gibi derlenip derlenmediğini görmek için Express.js sunucusu aracılığıyla bir HTTP isteği oluşturup çalıştırmayı deneyin.

app.ts'nin içinde :

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

const app = express()

app.get('/', async (req: Request, res: Response)=>{
console.log('Hello world')
res.send('Hello world')
})

const port = 8080

app.listen(port, (): void=>{
console.log(`App is listening at
Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.
:${port}`)
})

Ardından, projenizin kök dizinine giden komut satırını açın ve projenizi başlatmak için dev komut dosyasını çalıştırın:

npm run dev

Tarayıcınızı açın ve localhost:8080'e gidin, yanıtı göreceksiniz.

Yukarıdaki örnekte yaptığımız gibi console.log komutunu uyguladıysanız, bunu terminalde de göreceksiniz.