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 proje 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ği de 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.

initial-js

Tıklama işlemi yaptığımızda da sayının arttığını görebiliriz.

after-some-click-js

JavaScript ile ilgili olan geliştirmemiz tamamlandı. Şimdi sırada aynı yapıyı TypeScript ile hazırlamakta.

HTML & CSS & TypeScript ile proje 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ği de 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ğiniz gibi TypeScript kodlarımızı derleyip JavaScript haline dönüştürülmesi için scripts bölümüne dev isimli bir tanımlama yaptım ve TypeScript derleme işlemi için tsc komutunun ç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 uygulamanı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.

initial-ts

Tıklama işlemi yaptığımızda da sayının arttığını görebiliriz.

after-some-click-ts

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 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.

tsci