Samet ÇELİKBIÇAK
Samet ÇELİKBIÇAK

Samet ÇELİKBIÇAK

HTML & CSS & TypeScript

HTML & CSS & TypeScript

Samet ÇELİKBIÇAK
·Oct 23, 2022·

4 min read

Subscribe to my newsletter and never miss my upcoming articles

Table of contents

  • HTML & CSS & JavaScript ile projeye oluşturma
  • HTML & CSS & TypeScript ile projeye oluşturma

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.

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

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

tsci

 
Share this