Merhabalar, bu yazımızda sizlere bir TypeScript projesinde farklı ts dosyaları içerisindeki function, class veya interface’lerin, farklı dosyalar içerisinde referans olarak çağrılması işleminden bahsedeceğim.
Bu işlem için ilk olarak kendimize demo ortamı hazırlayalım. Tabi ki TypeScript’in bilgisayarınıza kurulu olduğu varsayıyorum. TypeScript kurulumu hakkında bu makalemize göz atabilirsiniz.
SystemJS isminde boş bir klasör açıyorum. Bu klasörü vscode içerisinde açıyorum. Klasör içerisinde app.ts , funcs.ts , index.html dosyaları oluşturuyorum. Bir de systemjs dosyasını bu klasöre kopyalıyorum. Ben küçültülmüş halini kullanacağım. İlgili dosyanın adresi: https://github.com/systemjs/systemjs/blob/master/dist/s.min.js . Klasör görünümümüz aşağıdaki gibidir.
Dosya içerikleri aşağıdaki gibidir.
app.ts
import { sayIt } from "./funcs.js";
let mike = {
age: 25,
name:"Mike",
say: function() {
return "My name is " + this.name +
" and I'm " + this.age + " years old!"
}
}
document.body.innerHTML = sayIt(mike)
funcs.ts
interface Person {
age: number,
name: string,
say(): string
}
export function sayIt(person: Person) {
return person.say();
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="./s.min.js"></script>
</head>
<body>
<script>
System.import("./app.js");
</script>
</body>
</html>
Şimdi tsconfig.json dosyasını oluşturmak için terminalden tsc –init komutunu çalıştıralım.
Klasörümüz içerisinde göreceğiniz üzere tsconfig.json dosyamız oluştu. tsconfig.json dosyamız içerisinde ufak değişiklikler yapalım.
compilerOptions nodunun altında yer alan module kısmının değerini system olarak değiştirelim.
Bu işlem sonrası build işlemine başlayalım. Bunun için ctrl+shift+b tuşlarına basalım ve build seçeneğini seçelim.
Görebileceğiniz üzere klasörümüzde ts dosyalarına ait js dosyaları oluşmuş durumdadır. Şimdi index.html dosyamızı çalıştıralım ve sonucu görelim. Sayfamızda aşağıdaki mesaj yazmalıdır.
My name is Mike and I’m 25 years old!
Dikkat edeceğimiz hususlar şu şekilde sıralayabiliriz:
Örnek kodlar için https://github.com/hasankoroglu/TypeScript/tree/master/ornek2.SystemJS adresini kullanabilirsiniz.
Umarım faydalı olmuştur. Bir sonraki makalemizde 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…
Merhaba arkadaşlar, Yakın zamanda TypeScript öğrenmeye başladım. Hem öğrendiklerimi pekiştirmek hem de sizlerle paylaşmak adına…
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…