Çalışma alanı için klasör oluşturuyoruz.Klasör içerisine index.html oluşturuyoruz.
index.html içerisinden .js uzantılı bir sayfa çağırıyoruz.(Bu sayfa .ts uzantılı sayfamızın derlenmesi ile oluşacaktır.) ".json" sayfası için "npm init" komutunu çalıştırıyoruz.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TypeScript</title>
</head>
<body>
<script src="app.js"></script>
</body>
</html>
app.ts
class UrunBilgi {
adet:number;
urunAdi:string;
urunTuru:string;
constructor (adet:number, urunAdi:string, urunTuru:string)
{
this.adet = adet;
this.urunAdi = urunAdi;
this.urunTuru = urunTuru;
}
}
let urungetir = new UrunBilgi(10, 'Kalem', 'Kırtasiye');
console.log(urungetir);
TypeScript kodlarımızın derlenmesi için sanal sunucuya ihtiyacımız var.
Sanal sunucu kurulumu için "npm install --save-dev lite-server" komutunu kullanıyoruz.
".json" sayfamızın içerisine sunucu ayarı için script kısmına "start": "lite-server" kodunu yapıştırıyoruz.
TypeScript kodlarımızı yazmak için .ts uzantılı bir sayfa oluşturuyoruz.
TypeScript kodlarımızın olguğu sayfayı derlemek için "tsc app.ts" yazıyoruz.(app.ts TypeScript sayfama verdiğim isim
sizin oluşturduğunuz sayfa ismini girmeniz gerekmektedir.)
Bu komuttan sonra TypeScript kodlarının olguğu sayfa ismi ile ".js" sayfası derlenmiş oluyor.
app.js
var UrunBilgi = /** @class */ (function () {
function UrunBilgi(adet, urunAdi, urunTuru) {
this.adet = adet;
this.urunAdi = urunAdi;
this.urunTuru = urunTuru;
}
return UrunBilgi;
}());
var urungetir = new UrunBilgi(10, 'Kalem', 'Kırtasiye');
console.log(urungetir);
TypeScript kodlarının otomatik derlenmesi için "tsc app.ts -w" komutunu çalıştırıyorum.
Çıktıyı tarayıcıda görmek için "npm start" komutu ile projeyi çalıştırıyoruz.
Tarayıcı ekran görüntüsü
Sosyal