Bu yazımızda type script projesi nedir , bir typescript projesi nasıl başlatılır onu ele alacağız.
TypeScript, JavaScript’in statik tipli, superset (üst küme) bir programlama dilidir.
Superset demek:
Geçerli olan her JavaScript kodu, geçerli bir TypeScript kodudur.
TypeScript kodu doğrudan çalıştırılmaz.
Önce JavaScript’e transpile edilir, sonra JS runtime (browser / Node.js) tarafından çalıştırılır.
- TypeScript’in Çalışma Modeli
TypeScript compile-time seviyesinde çalışır.
Tip denetimi → compile-time
Tip bilgisi → runtime’a taşınmaz
Çıktı → saf JavaScript
- JavaScript ile Temel Fark (Statik vs Dinamik)
JavaScript
Dinamik tipli
Tipler runtime’da belirlenir
Hatalar çoğunlukla runtime error
Şimdi bir typescript projesi kurup, çalıştırmayı inceleyelim.
Projede ilk olarak node js kurulu olması gerekmektedir. Resmi sitesinden indirme yapıp sisteme kurabilirsiniz.
Node js versiyonu öğrenmek için,
node -v
npm –v komutları kullanılır.
npm init –y ile package.json oluşturulur.
npm install typescript –save-dev komutu ile typescript kurulumu yapılır.
npx tsc –v ile typescript version kontrolü yapılabilir.
npx tsc –init komutu tsconfig.json dosyasını oluşturur. Bu dosya içerisinde typescript ayarları yapılır.
Örnek olarak önemli kısımlar aşağıda yer almaktadır.
{
“compilerOptions”: {
“target”: “ES6”,
“module”: “ES6”,
“rootDir”: “./src”,
“outDir”: “./dist”,
“strict”: true,
“lib”: [“DOM”, “ES2015”],
}
}
Bir ts projesinde genellikle dosya yapısı aşağıdaki gibidir. dist klasöründe ts dosyasının derlenip js dosyası olarak çıktısı yer almaktadır.
ts-proje
│
├─ src
│ └─ index.ts
│
├─ dist
├─ package.json
└─ tsconfig.json
npx tsc komutu ile ts dosyaları derlenir ve dist klasörüne js çıktıları hazırlanır. Projeyi çalıştırmak için
node dist/index.js komutu yeterli olacaktır.
Projeyi otomatik olarak npm komutlarıyla çalıştırmak için package.json içerisine aşağıdaki komutlar yazılabilir.
“scripts”: {
“build”: “tsc”,
“start”: “node dist/index.js”
}
Bu sayede proje
npm run build
npm start komutları ile çalışabilir.
Örnek bir proje oluşturabiliriz. İlk olarak bir html dosyası oluşturup, bu html form içerisindeki alanlara ts dosyalarında nasıl erişebileceğimizi ve nasıl çalıştıracağımızı yapabiliriz.
Html dosyaları tarayıcıda direk açılırsa ts dosyaları hata verir. Bu yüzden liveserver kullanmak gerekir. Vscode ile çalışılıyorsa extensions sekmesinden liveserver pack yüklenir.
Artık local adreste proje açılabilir.
http://127.0.0.1:5500/index.html
Veya alternatif olarak şu komutlarla html dosyası çalışabilir.
npx serve . veya
npx http-server .
daha sonra http://localhost:3000 adresinde açılabilir.
Comments are closed.