3. TypeScript – Syntax

3. TypeScript Syntax

0 298

Syntax yani sözdizimi, program yazma kurallarıdır. Her dilin kendine özgü bir syntax bulunmaktadır. TypeScript’in ise:

  • Modules (Modüller)
  • Functions (Fonksiyonlar)
  • Variables (Değişkenler)
  • Comments (Yorumlar)
  • Statements and Expressions

İlk kodumuzu yazalım 🙂

var message:string="Merhaba Dünya";
console.log(message)

Yukarıda yazmış olduğumuz kodu TSC aracılığı ile compile ettiğimizde JavaScript çıktısı aşağıdaki gibi olacaktır.

var message = "Merhaba Dünya"; 
console.log(message);
  • Yeni başlayanlar için açıklamak gerekirse, ilk satırımızda “message” isimli bir değişken oluşturduk ve “Merhaba Dünya” değerini verdik.
  • İkinci satırda ise console ekranına değişkenimizi paratmetre olarak verip değeri yazdırmasını istedik. F12 yapıp console tabına geldiğinizde çıktıyı görebilirsiniz.

Şimdi kodumuzu yazdık, artık nasıl compile edeceğimizi ve çalıştıracağımızı öğrenelim.

TypeScript Compile ve Execute (Derleme ve Çalıştırma) İşlemleri

Visual Studio ile yazmış olduğunuz TypeScript kodumuzu compile ve execute etmek için aşağıdaki adımları takip edip ilerleyelim:

  1. İlk olarak Visual Studio üzerinde TypeScript dosyası oluşturmalısınız ya da .ts uzantılı bir dosya oluşturup kaydedin. Ardından yukarıdaki kodu ya da kendi yazmış olduğunuz kodu ekleyin.
  2. Ardından Visual Studio üzerindeyken .ts uzantılı dosyaya sağ tıklayıp “Open in command prompt” ibaresine tıklayalım. Bu işlemi command prompt açıp .ts uzantılı dosyanın bulunduğu klasöre giderekte gerçekleştirebilirsiniz.
  3. Açılan command prompta aşağıdaki kodu çalıştırıp compile edilmesini sağlayabilirsiniz.
    tsc Test.ts
  4. .js uzantılı bir dosyanın oluştuğunu göreceksiniz. Bu işlem aslında tsc’nin TypeScript kodunuzu compile ettiği anlamına gelmektedir. Şimdi execute etmek için aşağıdaki kodu çalıştırmanız yeterli olacaktır.  İsterseniz ilgili javascript dosyasını html üzerinden çağırmanızda yeterli olacaktır.
    node Test.js

Compiler Flags (Derleyici Bayrakları)

TypeScript’in compile edilen bir dil olduğundan bahsettik ve yukarıdaki örneğimizde de yazmış olduğumuz kodu JavaScript’e compile ettik. Fakat bu compile işlemine müdahale etmemiz mümkün mü diye düşünebilirsiniz.  Evet bu mümkün, tsc aşağıdaki flagları kullanarak ya da tsconfig gibi JSON ile nasıl compile etmesi gerektiğini belirleyebilirsiniz. Örneğin; method içerisinde bir değişken tanımladınız ve tanımlamış olduğunuz değişkeni hiç bir yerde kullanmadınız, bu durumda JavaScript’e compile etmemesini, hata vermesini sağlayabilirsiniz.  Bu flaglerin tamamına aşağıdaki linke tıklayarak ulaşabilirsiniz.

https://www.typescriptlang.org/docs/handbook/compiler-options.html

TypeScrip’teki Tanımlayıcılar (Identifiers)

Identifiers yani tanımlayıcı aslında değişken veya methodlara verdiğimiz isimlerdir. Ve bu isimlerin tanımlaması yapılırken belli kurallara yapıyor olmamız gerekli.

  • Tanımlama yaparken hem rakam hem de sayı kullanabilirsiniz. Fakat kullanmak istediğiniz isim sayı ile başlamamalıdır.
  • _” veya “$” dışında herhangi bir özel karakter kullanmamalısınız.
  • Keyword olarak kullanılan “var“, “any” vs. gibi tanımlama yapmamalısınız.
  • Benzersiz olmalıdır.
  • Identifiers case-sensitive yani büyük küçük harfe duyarlıdır. Yani “num” ile  “Num” birbirinden farklıdır.
  • Boşluk içerlememelidir.

Yukarıda Keyword içermemesi gerektiğini belirtmiştik. TypeScript içerisinde yer alan tüm keywordlere aşağıdaki linke tıklayarak ulaşabilirsiniz.

https://github.com/Microsoft/TypeScript/issues/2536

TypeScript Comments (Yorumlar)

TypeScript ya da JavaScript içerisinde kullanmış olduğumuz function, variable vs gibi işlemlerin tam olarak ne yaptığını anlatmak için comment kullanmaktayız. Bu durumda tek satır ya da çoklu bir şekilde comment ekliyor olabiliriz.

  • Tek satır için: //
  • Çoklu satır için: /*     */
// yorum :)

/* 

Çoklu satır yorum :)

*/

TypeScript ve Object Orientation

TypeScript object oriented bir JavaScript olduğundan bahsetmiştik. Peki bunu tam olarak nasıl yapabiliyoruz, hangi keywordleri kullanmalıyız? Bu gibi sorularınız var çok ufak syntax kısmında bunada değinelim. Sonrasın bu kısım ile ilgili github üzerinden örnek paylaşıyor olacağım.

  • Object, her hangi entity’nin real timeda gösterimidir. Grady Booch‘e göre objectin 3 özelliği olması gerektiğini belirtir. Bunlar state, behavior ve identity’dir.
  • Class, OOP içerisinde class terimi yeni nesneler yani object oluşturmamızı sağlamaktadır.
  • Methods, methods  ise şimdilikobject ile iletişimi kolaylaştırmayı sağlamaktadır diyebiliriz.

Örnek:

class Greeting { 
  greet():void 
  { 
    console.log("Merhaba!!!") 
  } 
} 

var obj= new Greeting(); 
obj.greet();

Compile edildiğinde JavaScript çıktısı aşağıdaki gibi olacaktır.

var Greeting = (function () { 
  function Greeting() { 
  }
  Greeting.prototype.greet = function () { 
    console.log("Hello World!!!"); 
  }; 
  return Greeting; 
}()); 

var obj = new Greeting(); 
obj.greet()

Yukarıdaki örneğimizde bir class tanımladık. Ve sınıf içerisinde greet() isimli bir method yer almaktadır. Ve bu method new keywordu ile bir instance yaratılarak çağrılıp tarayıcının console ekranına “Merhaba!!!” yazdırılmaktadır.

Bunları da beğenebilirsin Yazarın diğer kitapları

Themetf