1
TypeScript

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.

TypeScipt Nedir?

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.

TypeScript Ortamını Hazırlama

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.

Yükleme

İ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

Yapılandırma

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.

Çalıştırma

Ş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!

Kaynak Kodlar

Örnek kodlara https://github.com/hasankoroglu/TypeScript/tree/master/ornek1 adresinden ulaşabilirsiniz.

adresinden ulaşabilirsiniz.

Çalışmamızın Videosu

Bu yazımızın sonuna geldik. Diğer makalelerimizde görüşmek üzere.

Comments ( 1 )

Leave a Comment

E-posta hesabınız yayımlanmayacak.