Merhaba arkadaşlar,
Yakın zamanda TypeScript öğrenmeye başladım. Hem öğrendiklerimi pekiştirmek hem de sizlerle paylaşmak adına tecrübelerimi buradan sizlerle paylaşmak istiyorum. Vira Bismillah!
Yazımızın sonunda aynı işlemlerin nasıl yapıldığına dair bir video da olacaktır. Ve bu yazıda kaynak olarak https://medium.com/@equisept/simplest-typescript-with-visual-studio-code-e42843fe437 adresinden faydalanılmıştır.
Bu konu üzerinde çok durmayacağım, elimden geldiğince sizlere anlatmaya çalışacağım. JavaScript dilinde tip tanımı yoktur. TypeScript tip tanımlamada JS’nin eksiğini tamamlamaktadır. TS; static typing, class ve interface yapısını destekler.
http://www.typescriptlang.org/play/ adresinden bazı örnek kodlara ulaşabilirsiniz.
TypeScript yazdığınız kodları transpile ederek JS koduna dönüştürür. Sonuç olarak yine projenize JS kodları eklemiş olursunuz.
Daha detaylı bilgi için http://devnot.com/2019/typescript-nedir/ adresini ziyaret edebilirsiniz. (Sayfanın kaybolmasına karşın bir kopyasına https://collabtr.com/typescript-nedir/ adresinden ulaşabilirsiniz.) Bu güzel yazı için vesile olan Umut Uğurluoğlu (😋) hocama ve makalenin yazarı Kaan Akdeniz kardeşime teşekkür ederim.
Bu çalışmayı yaparken Visual Studio Code kullanacağım. Visual Studio Code hakkında bilgi almak için https://collabtr.com/2017/08/21/visual-studio-codea-hizli-bir-giris/ adresindeki yazımıza bakabilirsiniz.
İlk olarak Node.js ‘in son versiyonunu yükleyin. Adres.
Node.js npm paket yöneticisi ile beraber gelir. npm ile TypeScript’in en son sürümünü bilgisayarımıza yükleyelim. npm paketlerini proje klasörünün içerisine de yükleyebilirsiniz ama ben sık kullanacağım ve her seferinde ayrı ayrı yüklemek yerine global parametresi ile yükleyeceğim. Komut satırını yönetici olarak çalıştırdıktan sonra aşağıdaki komutu çalıştıralım.
npm install -g typescript
Boş bir klasör açalım. VSCode içerisinde bu klasörü açalım.
CTRL+” tuşuna basarak terminali açalım ve aşağıdaki komutu çalıştıralım.
tsc --init
Bu komut bizlere tsconfig.json dosyasını oluşturacaktır. tsconfig.json dosyası projemizdeki TS ayarlarını yapmamıza olanak sağlar.
Aynı klasörde app.ts adında bir dosya oluşturalım.
app.ts dosyamızın içeriği aşağıdaki gibi olabilir.
interface Person {
age: number,
name: string,
say(): string
}
let mike = {
age: 25,
name:"Mike",
say: function() {
return "My name is " + this.name +
" and I'm " + this.age + " years old!"
}
}
function sayIt(person: Person) {
return person.say();
}
document.body.innerHTML = sayIt(mike)
Şimdi build işlemi için task oluşturmamız gerekiyor.
VSCode ekranında F1 tuşuna basarak command palette’yi açalım.
Tasks: Configure Task seçeneğini seçelim. Çıkan ekranda tsc:build – tsconfig.json seçeneğini seçelim. Bu işlem bize çalışma klasörümüz altında .vscode klasörünü ve tasks.json dosyamızı oluşturuyor.
Tasks: Configure Task komutunu seçince gelen diğer seçenek olan tsc:watch – tsconfig.json’ı seçtiğiniz zaman kodlarınız anlık olarak transpile olur. Yani app.ts içerisinde yaptığınzı değişiklik anında transpile edilerek app.js içerisine kaydedilir.
Şimdide aynı klasörde bir index.html dosyası oluşturalım. İçeriği aşağıdaki gibi olabilir.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<script src="app.js"></script>
</body>
</html>
Dikkat ederseniz html dosyamız içerisine app.js dosyasını da dahil ediyoruz.
Şimdi VSCode içerisinde CTRL+Shift+B tuşlarına basalım ve tsc:built – tsconfig.json seçeneğini seçelim. Bu işlem bizlere app.ts dosyamızın transpile edilerek js dosyasına dönüşmesini sağlayacak. Artık herşey hazır.
index.html dosyamızı çalıştırdığımızda aşağıdaki çıktıyı almanız gerekmektedir.
My name is Mike and I’m 25 years old!
Örnek kodlara https://github.com/hasankoroglu/TypeScript/tree/master/ornek1 adresinden ulaşabilirsiniz.
adresinden ulaşabilirsiniz.
Bu yazımızın sonuna geldik. Diğer makalelerimizde görüşmek üzere.
Microsoft SharePoint Technet ve MSDN forumları yerini Microsoft Q&A tartışma panolarına yerini bırakıyor. 10 Ağustos…
Biliyorum, başlık çok garip, ilk bakışta anlaşılması zor. Ama şöyle tarif etmeye çalışayım. Bildiğiniz üzere…
Merhaba Arkadaşlar, Bu yazımızda sizlere TypeScript geliştirme ortamının (TypeScript Development Environment) nasıl hazırlanacağından bahsedeceğim. Öncelikle…
Merhabalar, bu yazımızda sizlere bir TypeScript projesinde farklı ts dosyaları içerisindeki function, class veya interface'lerin,…
Merhaba Arkadaşlar, Bu yazımızda sizlere mevcut SharePoint portalimizin, tablet, cep telefonu gibi farklı çözünürlükteki cihazlarda…
Merhaba Arkadaşlar, Bu yazımızda sizlere SharePoint güzel özelliklerinden bir tanesi olan Image Rendition'dan bahsedeceğim. Image…
View Comments