Skip to content

Latest commit

 

History

History
101 lines (69 loc) · 3.67 KB

typescript-hello-world.md

File metadata and controls

101 lines (69 loc) · 3.67 KB
Raw

TypeScript "Hello, World!"

Özet: Bu bölümde, en basit typescript uygulamasının nasıl geliştirildiğini öğreneceksiniz.

Ders Videosu

Videolu Ders

Node.js'de TypeScript "Hello World" Programı

  1. Çalışmak için bir klasör oluşturun. Örneğin: helloworld
  2. VSCode'u başlatın ve ilgili klasörü açın.
  3. app.ts adında bir typescript dosyası oluşturun.
  4. Oluşturduğunuz dosyaya aşağıdaki kodları yazın:
let message: string = 'Hello, World!';
console.log(message);
  1. Terminali başlatın. Bunun için Terminal > Yeni Terminal menüsünü kullanabilirsiniz.

  1. TypeScript'i JavaScript'e compile etmek için şu komutu çalıştırın:
tsc app.ts

Eğer her şey yolunda gittiyse, TypeScript Compiler tarafından oluşturulmuş app.js adında yeni bir dosya göreceksiniz.

Node.js'de app.js dosyasını çalıştırmak için:

node app.js

Bir önceki bölümde bahsedilen ts-node paketini yüklediyseniz, TypeScript'i compile eden ve çıktıyı çalıştıran komutu tek satıra indirebilirsiniz:

ts-node app.ts

Web Tarayıcı'da TypeScript "Hello World" Programı

  1. index.html adında bir dosya oluşturun ve app.js dosyanızı sayfaya çağırın.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TypeScript: Hello, World!</title>
</head>
<body>
    <script src="app.js"></script>
</body>
</html>
  1. Üstte oluşturduğunuz app.ts dosyanızı açın ve kodları şöyle değiştirin:
let message: string = 'Hello, World!';
// h1 etiketi oluşturuyoruz
let heading = document.createElement('h1');
heading.textContent = message;
// h1 etiketini dökümana ekliyoruz
document.body.appendChild(heading);
  1. TypeScript dosyanızı JavaScript'e compile edin.
tsc app.ts
  1. Html dosyanıza sağ tıklayıp "Open with Live Server" butonuna basarak local sunucunuzu başlatın.

Açılan tarayıcı aşağıdaki gibi bir çıktı verecek:

app.ts dosyanızıda bir değişiklik yaptığınızda ve bu değişiklikleri tarayıcıda görmek istediğinizde, ilk olarak .ts dosyasını compiler ile .js dosyasına çeviriyoruz yukarıda olduğu gibi. Ve Live Server eklentisi, dosyada bir değişiklik olduğunu anladığı anda sayfayı otomatik yeniliyor ve böylcee son halini ek bir şey yapmadan görebiliyorsunuz tarayıcı üzerinde.

Unutmayın, app.js dosyası compiler tarafından üretiliyor, değişiklikleri bu dosya üzerinde doğrudan yaparsanız bir sonraki compile işleminde bu değişikliklerin üzerine yazılacaktır, bu yüzden her zaman .ts dosyasında geliştirmelerinizi yapın.

Bu bölüde node.js ve web tarayıcısında çalışan bir "hell world" yani en basit bir TypeScript örneğinin nasıl olabileceğini gördük.

👈 Önceki Bölüm Sonraki Bölüm 👉
TypeScript Kurulumu Neden TypeScript