Merhaba,
Bu yazımda size bir web uygulaması için ihtiyacımız olan üç temel yapı olan HTML & CSS & JavaScript kullanımından ve bu üç yapı için JavaScript yerine TypeScript ile geliştirmeyi nasıl yapacağımızdan kısaca bahsedeceğim. İlk olarak bir uygulamayı alt yapısını JavaScript ile oluşturup sonra ise aynı yapıyı TypeScript ile oluşturacağız.
HTML & CSS & JavaScript ile projeye oluşturma
İlk olarak istediğimiz bir yerde projemiz için bir klasör oluşturalım.
mkdir html-css-javascript
Klasörümüz hazır olduğuna göre sırasıyla o klasöre geçip ihtiyacımız olan dosyaları oluşturalım.
cd html-css-javascript
touch index.html
touch style.css
touch app.js
İlgili dosyaları oluşturduktan sonra klasör yapımız aşağıdaki gibi olacaktır.
.
├── app.js
├── index.html
└── style.css
İlgili dosyalarımızın içeriğide aşağıdaki gibi olacaktır.
[index.html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>HTML & CSS & JavaScript</title>
</head>
<body>
<div class="container">
<h1>HTML & CSS & JavaScript</h1>
<button id="counter">Click Me!</button>
</div>
<script src="app.js"></script>
</body>
</html>
[style.css]
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
button {
width: 150px;
height: 150px;
font-size: 25px;
}
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 100%;
max-height: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
[app.js]
let count = 1;
const counterButton = document.getElementById("counter");
counterButton.addEventListener("click", () => {
counterButton.innerText = `Click: ${count++}`;
})
Uygulamamıza ilk baktığımızda aşağıdaki gibi görünecektir.
Tıklama işlemi yaptığımızda da sayının arttığını görebiliriz.
JavaScript ile ilgili olan geliştirmemiz tamamlandı. Şimdi sırada aynı yapıyı TypeScript ile hazırlamakta.
HTML & CSS & TypeScript ile projeye oluşturma
Yine bir önceki javascript kısmında olduğu gibi istediğimiz bir yerde projemiz için bir klasör oluşturalım.
mkdir html-css-typescript
Klasörümüz hazır olduğuna göre sırasıyla o klasöre geçip ihtiyacımız olan dosyaları oluşturalım.
cd html-css-typescript
touch index.html
touch style.css
touch app.ts
Bu aşamadan sonra ilk işlemden farklı olarak yazdığımız TypeScript kodlarının JavaScript e dönüştürülmesi için ve TypeScript ile kodlarımızı yazabilmemiz için projemize TypeScript eklememiz gerekiyor. Bu işlem için ilk olarak package.json dosyasını oluşturmamız ve sonrasında da TypeScript yüklememizi yapmamız gerekiyor. Aşağıdaki komutlarla gerekli düzenlemeyi yapabiliriz.
npm init -y
npm install -D typescript
npx tsc --init
Bu kurulumlardan sonra klasör yapımız aşağıdaki gibi olacaktır.
.
├── app.ts
├── index.html
├── node_modules
├── package-lock.json
├── package.json
├── style.css
└── tsconfig.json
İlgili dosyalarımızın içeriğide aşağıdaki gibi olacaktır.
[index.html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>HTML & CSS & TypeScript</title>
</head>
<body>
<div class="container">
<h1>HTML & CSS & TypeScript</h1>
<button id="counter">Click Me!</button>
</div>
<script src="./lib/app.js"></script>
</body>
</html>
`
[style.css]
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
button {
width: 150px;
height: 150px;
font-size: 25px;
}
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 100%;
max-height: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
[app.ts]
let count = 1;
const counterButton = document.getElementById("counter") as HTMLButtonElement;
counterButton.addEventListener("click", () => {
counterButton.innerText = `Click: ${count++}`;
})
[package.json]
{
"name": "html-css-typescript",
"version": "1.0.0",
"description": "",
"scripts": {
"dev": "tsc"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"typescript": "^4.8.4"
}
}
Yukarıda görebileceğiz gibi TypeScript kodlarımızı derleyip JavaScript haline dönüştürülmesi için scripts bölüme dev isimli bir tanımlama yaptım ve TypeScript derleme işlemi için tsc komutunu çalıştırılmasını sağladım. Bu sayede tsconfig.json içerisinde vereceğimiz outDir değerindeki klasörde bizim için derlenmiş JavaScript dosyamız oluşacaktır. Oluşan bu dosya index.html içerisindeki script bölümünde kullanıldı.
[tsconfig.json]
{
"compilerOptions": {
"target": "es2016",
"module": "commonjs",
"outDir": "./lib",
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"skipLibCheck": true,
"declaration": true
}
}
Tüm düzenlemelerden sonra uygulamızın olduğu terminalde aşağıdaki komut ile TypeScript kodlarımızı derleyip sonucuna bakalım.
npm run dev
Yukarıdaki komutu çalıştırdıktan sonra klasör yapımız aşağıdaki gibi olacaktır.
.
├── app.ts
├── index.html
├── lib
│ ├── app.d.ts
│ └── app.js
├── node_modules
├── package-lock.json
├── package.json
├── style.css
└── tsconfig.json
Uygulamamıza ilk baktığımızda aşağıdaki gibi görünecektir.
Tıklama işlemi yaptığımızda da sayının arttığını görebiliriz.
Yukarıdaki örnekte görebileceğiniz gibi basit bir uygulama için TypeScript kullanımı öğrenmiş olduk. Daha büyük ve kompleks uygulamalarda TypeScript kullanmak için hazırlamış olduğum için farklı farklı bundler içeren aşağıdaki templateleri kullanabilirsiniz.
Eğer istediğiniz an herhangi bir template ile proje geliştirmek isterseniz hazırlamış olduğum TypeScript template CLI ına göz atabilirsiniz.
