TypeScript Eğitim: Arayüz, Enum, Dizi Nedir?

Nedir? TypeScript?

TypeScript bir süper kümesidir JavaSenaryo. TypeScript Nesne yönelimli bir programlama dilidir ve sınıfları, arayüzleri ve daha fazlasını destekler. Açık kaynaklı bir dildir ve tarafından geliştirilmiştir. Microsoft kodu statik olarak derleyen JavaBu betik, tarayıcıda veya Node.js'de kolayca çalıştırılabilir.

ECMAScript için yayımlanan en son özelliklerin tümü TypeScript, ve buna ek olarak TypeScript Arayüzler, ortam bildirimleri ve sınıf kalıtımı gibi nesne yönelimli özelliklere sahiptir ve bu özellikler geliştirme sürecine yardımcı olur.ping aksi takdirde oluşturulması zor olacak büyük bir uygulama JavaSenaryo.

İlişki tek yönlüdür. Her geçerli JavaKomut dosyası zaten geçerli. TypeScriptAncak bunun tersi doğru değildir, çünkü tür açıklamaları yalnızca şurada mevcuttur: TypeScript ve derleme sırasında silinirler.

Neden kullanım TypeScript?

İşte kullanmanın önemli faydaları TypeScript:

• Büyük ve karmaşık projelerde JavaScriptlerin kodlanması ve bakımı zordur.
• TypeScript Kod organizasyonuna büyük ölçüde yardımcı olur ve hataların çoğunu çalışma zamanında değil, derleme sırasında ortadan kaldırır.
• TypeScript JS kütüphanelerini ve API dokümantasyonunu destekler.
• İsteğe bağlı olarak tip tanımlanabilen bir betik dilidir, bu nedenle tipler kademeli olarak benimsenebilir.
• TypeScript kod düz metne dönüştürülebilir JavaHerhangi bir tarayıcı hedefi için komut dosyası kodu.
• Daha iyi kod yapısı ve nesne yönelimli programlama teknikleri sunar.
• Bu, otomatik tamamlama ve güvenli yeniden düzenleme de dahil olmak üzere, geliştirme süresi boyunca daha iyi araç desteği sağlar.
• Dekoratörler gibi özelliklerle dili standartın ötesine taşıyabilir.

En büyük pratik kazanım editör desteğidir. Derleyici her değerin şeklini bildiği için, bir editör bir özelliği tüm proje genelinde yeniden adlandırabilir ve artık eşleşmeyen her yeri rapor edebilir.

TypeScript Tarihçe

Gelin, tarihin önemli dönüm noktalarına bir göz atalım. TypeScript:

• İki yıllık dahili geliştirme sürecinin ardından Microsoft, TypeScript 0.9 sürümü 2013 yılında yayınlandı.
• TypeScript Jenerik türler için ek destek içeren 1.0 sürümü, Build 2014'te yayınlandı.
• Temmuz 2014'te yeni bir TypeScript Önceki sürüme göre beş kat daha hızlı olan bir derleyici geldi.
• Temmuz 2015'te ES6 modülleri, namespace anahtar kelimesi, for…of ve decorator'lar için destek eklendi.
• Kasım 2016'da eşlenmiş türler, anahtar ve arama türleri ile nesne tabanlı geri kalan ve yayılan işlemler eklendi.
• 27 Mart 2018'de koşullu tipler ve kesişim tipleriyle geliştirilmiş keyof eklendi.
• TypeScript Mart 2023'te yayınlanan 5.0 sürümü, dekoratörleri modernize etti ve paket boyutunu küçülttü.
• TypeScript 6.0 sürümü, önceki sürümlerin üzerine inşa edilmiş nihai sürüm olarak Mart 2026'da yayınlandı. JavaKomut dosyası kod tabanı.
• TypeScript 7.0 sürümü, derleyiciyi yerel bir Go uygulamasına taşıyor, bu da Microsoft Raporlara göre 6.0'dan yaklaşık on kat daha hızlı.

Kimler kullanır? TypeScript?

TypeScript Artık niş bir tercih değil. En yaygın kullanılan ön uç ve arka uç araçlarının birçoğunun temelini oluşturuyor ve aşağıdaki liste, bir acemi kullanıcının buna en çok nerede rastlayacağını gösteriyor.

• Açısal: Angular çerçevesi şu dilde yazılmıştır: TypeScriptUygulama kodunun da bu dilde yazılması bekleniyor.
• React ve Vue projeleri: Her iki ekosistem de resmi gemiyi gönderiyor. TypeScript Şablonlar ve çoğu modern başlangıç ​​paketi bunu varsayılan olarak etkinleştirir.
• Node.js arka uçları: NestJS gibi sunucu çerçeveleri şu temeller üzerine kurulmuştur: TypeScript sınıflar ve dekoratörler.
• Editör araçları: Visual Studio Code kendi başına büyük bir TypeScript Bu nedenle dil desteği bu kadar eksiksiz olan bir kod tabanıdır.
• Büyük ölçekli kurumsal ön uçlar: Birçok katılımcıyla çalışan ekipler, dağıtımdan önce entegrasyon hatalarını yakalamak için bu yöntemi kullanıyor.

İndirme ve Yükleme TypeScript

İşte indirme ve yükleme işlemi adım adım TypeScript:

Adım 1) Nodejs'i indirin ve yükleyin

Nodejs'in resmi sitesine gidin, https://nodejs.org/en/download/Ardından, işletim sisteminiz için Node.js'i indirip kurun. Ayrıntılı talimatlar kılavuzda mevcuttur. Node.js nasıl indirilir ve kurulur?.

Adım 2) Nodejs ve npm sürümünü kontrol edin

Nodejs ve npm'nin kurulu olup olmadığını kontrol etmek için komut isteminde sürümlerini kontrol edin.

D:\typeproject>node --version
v22.14.0

D:\typeproject>npm --version
10.9.2

Node LTS'nin mevcut tüm sürümleri çalışır. TypeScript Derleyiciyi çalıştırmak için yalnızca desteklenen bir Node sürümüne ihtiyaç duyar.

) 3 Adım TypeScript Montaj

Aşağıdaki komutta gösterildiği gibi, proje dizininizi (typeproject\) oluşturun ve `npm init` komutunu çalıştırın:

npm init

Adım 4) Kurulumu Başlatın

Bu işlem, projemizin bağımlılıklarını saklayacak olan package.json dosyasını oluşturur.

Bittiğinde, yükleyin TypeScript aşağıdaki gibidir:

npm -g install typescript

Yukarıdaki komut kurulumla ilgilenecektir TypeScript. Npm install'a “-g” eklemek kurulumu yapacaktır TypeScript Küresel olarak. -g kullanmanın avantajı, şunları kullanabilmenizdir: TypeScript tsc Bu komut, global olarak yüklendiği için herhangi bir dizinden çalıştırılabilir. Yüklemek istemiyorsanız... TypeScript Küresel olarak, aşağıdaki komutu kullanın:

npm install --save-dev typescript

Proje dizininizde bir `src\` klasörü oluşturun ve `src\` klasörünün içine aşağıdaki dosyayı oluşturun. TypeScript test.ts dosyasını açın ve kodunuzu yazın.

Örnek: test.ts

function add(x:number, y:number) {
	return x+y;
}

let sum = add(5,10);
console.log(sum);

Derlemek TypeScript kodlamak Javascript

Yukarıdaki kodu derlemek için aşağıdaki komutu kullanın.

If TypeScript Aşağıdaki komutu kullanarak global olarak yükleyin:

tsc test.ts

If TypeScript Eğer projenize yerel olarak yüklenmişse, yolunu kullanmanız gerekir. TypeScript Gösterildiği gibi node_modules'tan veya npx aracılığıyla çalıştırabilirsiniz:

node_modules\typescript\bin\tsc test.ts

OR

npx tsc test.ts

Yukarıdaki komut, derlenmiş kodu içeren bir test.js dosyası oluşturacaktır. JavaSenaryo.

Örnek: test.js

function add(x, y) {
    return x + y;
}
var sum = add(5, 10);
console.log(sum);

Gerçekleştirmek Javascript Nodejs'i kullanma

Şimdi test.js dosyasını Nodejs'te aşağıdaki gibi çalıştıracağız:

D:\typeproject\src>node test.js
15

`console.log`'a iletilen değer, `test.js` çalıştırıldığında görüntülenir.

Gerçekleştirmek JavaTarayıcıdaki Komut Dosyası

Örnek:

<html>
<head></head>
<body>
<script type="text/javascript" src="test.js"></script>
</body>
</html>

Derlemek TypeScript kodlamak Javascript EcmaScript sürümünü kullanma

TypeScript Yayınlanan tüm ECMAScript özelliklerini destekler ve geliştiriciler kodlama yaparken bunları kullanabilirler. Ancak tüm yeni özellikler eski tarayıcılarda desteklenmediğinden, daha eski bir ECMAScript sürümüne derleme yapmanız gerekebilir. TypeScript Tam olarak bunu yapan derleyici seçenekleri sunar.

Örnek: test.ts

var addnumbers = (a, b) => {
    return a+b;
}

addnumbers(10, 20);

İstediğiniz ES sürümüne derlemek için komutunuzdaki target veya t seçeneğini aşağıdaki gibi kullanabilirsiniz:

tsc --target ES6  test.ts

OR

tsc -t ES6 test.ts

Varsayılan olarak, klasik derleyici için hedef ES3'tür. Bunu değiştirmek isterseniz, yukarıdaki komutu kullanabilirsiniz.

Şu an için hedef olarak ES6'yı kullanacağız:

tsc --target ES6  test.ts

test.ts'den test.js'ye

var addnumbers = (a, b) => {
    return a+b;
}

addnumbers(10, 20);

Kod olduğu gibi kalıyor çünkü kullandığınız ok fonksiyonu bir ES6 özelliğidir ve ES6'ya derlendiğinde değişmez.

Varsayılan olarak hedef ES3'tür, bu nedenle hedef belirtmezseniz test.js şu şekilde görünür:

var addnumbers = function (a, b) {
    return a + b;
};
addnumbers(10, 20);

Burada, kalın ok normal bir anonim fonksiyona dönüştürülüyor.

içindeki değişkenler TypeScript

Değişkenler değerleri depolamak için kullanılır ve değer bir dize, sayı, Boolean veya bir ifade olabilir. Değişkenlere gelince TypeScript, onlar benzer JavaSenaryoO halde, değişkenlere değer atamayı ve bunları tanımlamayı öğrenelim. TypeScript.

Değişkenler tanımlanmadan kodda kullanılamaz. Bir değişkeni tanımlamak için şunu kullanabilirsiniz:

var anahtar kelime,

izin Anahtar kelime

const Anahtar kelime

Değişkenlerle çalışma TypeScript benzer JavaKomut dosyası ve bu komut dosyasına aşina olan kullanıcılar. JavaBetik bunu çok kolay bulacaktır. Modern kodda, izin hem de const tercih edilir varÇünkü blok kapsamları, bir tür hatayı tamamen önler.

Var kullanarak değişkenleri bildirmek

Sözdizimi:

var firstname = "Roy";

Birkaçına göz atalım. TypeScript `var` anahtar kelimesinin çalışma şeklini ve bu anahtar kelime kullanılarak tanımlanan değişkenlerin kapsamını anlamak için örnekler. var Anahtar kelime.

Örnek 1:

var k = 1; // variable k will have a global scope

function test() {
    var c = 1; // variable c is local and accessible only inside function test
    return k++;
}

test(); // output as 1
test(); // output as 2
alert(c); // will throw error, Uncaught ReferenceError: c is not defined

Örnek 2:

var t = 0; // variable t is declared in global scope
function test() {
    var t = 10; // t is redeclared inside the function, so changes stay local
    return t;
}
test(); // will return 10
console.log(t); // will console 0

Örnek 3:

var i = 0;
function test() {
    if (i > 0) {
      var t = 1;
    }
    return t;
}

test(); // returns undefined. The if block did not run, yet t is still declared
        // because var declarations are hoisted to the whole function.
i++;    // value of i is incremented
test(); // since i > 0 the if block runs and the value returned is 1

Let kullanarak değişkenleri bildirmek

MKS TypeScript let'in sözdizimi aşağıda verilmiştir:

Sözdizimi:

let name = "Roy";

Çalışması izin değişken neredeyse aynıdır varAncak, aşağıdaki örnekte gösterildiği gibi, önemli bir fark vardır.

Örnek:

let i = 1;
function test() {
    if (i > 0) {
	  let t = 1;
    }
    return t;
}

test(); // throws an error: Cannot find name 't'

Yukarıdaki TypeScript Örnek bir hata veriyor, ancak aynı kod şu şekilde çalışırdı: var Anahtar kelime. Değişkenler şu şekilde tanımlanır: izin t değişkenleri yalnızca tanımlandıkları blok içinde kullanılabilirler. Bu örnekte, t değişkeni yalnızca if bloğu içinde mevcuttur, fonksiyonun tamamında değil.

Aynı durum herhangi bir fonksiyon, for döngüsü, while döngüsü veya switch bloğu içinde de geçerlidir. `let` değişkeni yalnızca o blok içinde kullanılabilir ve dışarıda referans verilmesi hata verir. `var` ve `let` arasındaki temel fark budur.

Değişkenleri const kullanarak bildirmek

`const` ifadesi sabit değişkenler anlamına gelir. `let` değişkenlerine benzerler, ancak bir değer atandıktan sonra değiştirilemezler. Bu nedenle, `const` bildirimi aynı satırda başlatılmalıdır.

Sözdizimi:

const name = "Roy";

Örnek:

const age = "25";
age = "30"; // error: Cannot assign to 'age' because it is a constant

const total; // error: 'const' declarations must be initialized

Dolayısıyla, atanan değerin yeniden atanmayacağını bildiğiniz her durumda `const` kullanın. `const`'un, işaret ettiği nesnenin değiştirilmesini değil, bağlamanın yeniden atanmasını engellediğini unutmayın.

Türler TypeScript

TypeScript güçlü tipli bir dildir, oysa JavaKomut dosyası böyle değil. Değeri bir dize olarak tanımlanan bir değişken, herhangi bir sorun olmadan sayıya dönüştürülebilir. JavaSenaryo. Aynı durum burada hoş görülmez. TypeScript. içinde TypeScriptBir değişkenin türü başlangıçta tanımlanır ve yürütme boyunca bu türü korumalıdır. Herhangi bir değişiklik, derleme sırasında derleme zamanı hatasına yol açar. JavaSenaryo.

Aşağıda temel türler verilmiştir:

Numara

Yalnızca tamsayıları, ondalık sayıları, kesirli sayıları ve benzer sayısal değerleri kabul eder.

Sözdizimi:

let a :number = 10;
let marks :number = 150;
let price :number = 10.2;

İşte sayı türlerinde kullanılabilecek bazı önemli yöntemler:

tamir edildi() – Bu işlem, sayıyı bir metin dizisine dönüştürecek ve yönteme verilen ondalık basamak sayısını koruyacaktır.

toString () – Bu yöntem sayıyı bir metin dizisine dönüştürecektir.

değeri() – bu yöntem sayının ilkel değerini geri verecektir.

toPrecision() – bu yöntem sayıyı belirli bir uzunluğa biçimlendirecektir.

Örnek: tüm sayı yöntemleriyle

let _num :number = 10.345;
_num.toFixed(2);      // "10.35"
_num.valueOf();      // 10.345
_num.toString();     // "10.345"
_num.toPrecision(2); // "10"

dizi

Dize: yalnızca dize değerleri.

Sözdizimi:

let str :string = "hello world";

İşte dize türleri üzerinde kullanılabilecek bazı önemli yöntemler:

• bölmek() – bu yöntem, dizeyi bir diziye bölecektir.
• karakter() – bu yöntem, verilen dizindeki karakteri verecektir.
• indeksi() – bu yöntem, kendisine verilen değerin ilk geçtiği yerin konumunu verecektir.
• değiştirmek() – Bu yöntem 2 dize alır. Dizede ilk değeri arar ve eğer varsa, onu ikinci değerle değiştirir ve yeni bir dize döndürür.
• süs() – bu yöntem, dizenin her iki tarafındaki boşlukları kaldıracaktır.
• substr() – bu yöntem, verilen başlangıç ​​konumuna ve uzunluğa bağlı olarak dizenin bir bölümünü verecektir.
• alt dize() – bu yöntem, başlangıç ​​ve bitiş konumlarına bağlı olarak dizenin bir bölümünü verir. Bitiş konumundaki karakter hariç tutulur.
• toBüyük Harf() – dizeyi büyük harfe dönüştürür.
• toKüçük Harf() – dizeyi küçük harfe dönüştürür.

Örnek:

let _str:string = "Typescript";

_str.charAt(1);                // y
_str.split("");                // ["T","y","p","e","s","c","r","i","p","t"]
_str.indexOf("s");             // 4, gives -1 if the value does not exist
_str.replace("Type", "Coffee"); // "Coffeescript"
_str.trim();                    // "Typescript"
_str.substr(4, _str.length);   // "script"
_str.substring(4, 10);         // "script"
_str.toUpperCase();             // "TYPESCRIPT"
_str.toLowerCase();             // "typescript"

Boole

Boolean türü yalnızca true ve false mantıksal değerlerini kabul eder. Düz metinden farklı olarak JavaBu betikte, 0 ve 1 rakamları sayı türünde oldukları için kabul edilmez.

Sözdizimi:

let status :boolean = true;
let isDone :boolean = false;

let bflag :boolean = 1;
// error: Type 'number' is not assignable to type 'boolean'

Farketmez

Sözdizimi:

let a :any = 123
a = "hello world"; // changing type will not give any error.

Değişkenler, aşağıdaki yöntem kullanılarak tanımlanır: herhangi `type` bir dize, sayı, dizi, boolean veya void tutabilir. TypeScript Derleme sırasında herhangi bir hata vermeyecektir; bu, değişkenlere benzer bir durumdur. JavaKomut dosyası. Herhangi bir türü yalnızca o değişkene atanacak değerin türünden emin olmadığınız durumlarda kullanın, çünkü bu, o değer üzerindeki tüm kontrolleri devre dışı bırakır.

Geçersiz

Void tipi çoğunlukla hiçbir şey döndürmeyen fonksiyonların dönüş tipi olarak kullanılır.

Sözdizimi:

function testfunc():void{
 //code here
}

TypeScript Dizi

An Dizi in TypeScript Birden fazla değeri saklayabileceğiniz bir veri türü olan dizilerde, dizi işlemleri için değerleri nasıl tanımlayacağımızı ve atayacağımızı öğrenelim. TypeScript.

Dan beri TypeScript Güçlü tipli bir dil olduğundan, bir dizideki değerlerin veri türünü belirtmeniz gerekir. Aksi takdirde, herhangi bir türdeymiş gibi işlem görür.

Bir Diziyi Bildirin ve Başlatın

Sözdizimi:

let nameofthearray : Array<typehere>

Örnek E-posta

let months: Array<string> = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"]; // array with all string values

let years: Array<number> = [2015, 2016, 2017, 2018, 2019]; // array with all numbers

let month_year: Array<string | number> = ["Jan", 2015, "Feb", 2016]; // mixed

let alltypes: Array<any> = [true, false, "Harry", 2000, { "a": "50", "b": "20" }]; // any type

Bir Dizideki öğelere erişmenin farklı Yolları

Bir dizideki elemanları almak için, değerler 0. indeksten başlayarak dizinin uzunluğunun bir eksiğine kadar olan değerlerdir.

let years: Array<number> = [2016, 2017, 2018, 2019];
years[0]; // output will be 2016
years[1]; // output will be 2017
years[2]; // output will be 2018
years[3]; // output will be 2019

Bir dizideki elemanları aşağıdaki yöntemle de elde edebilirsiniz. TypeScript için döngü, Aşağıda gösterildiği gibi.

kullanma TypeScript döngü için

let years: Array<number> = [2016, 2017, 2018, 2019];
for (let i = 0; i < years.length; i++) {
     console.log(years[i]);
}

Çıktı:

2016
2017
2018
2019

For-in döngüsünü kullanma

let years: Array<number> = [2016, 2017, 2018, 2019];
for (let i in years) {
     console.log(years[i]);
}

Çıktı:

2016
2017
2018
2019

For-of döngüsünü kullanma

let years: Array<number> = [2016, 2017, 2018, 2019];
for (let i of years) {
     console.log(i);
}

Çıktı:

2016
2017
2018
2019

forEach döngüsünü kullanarak

let years: Array<number> = [2016, 2017, 2018, 2019];
years.forEach(function(yrs, i) {
  console.log(yrs);
});

Çıktı:

2016
2017
2018
2019

TypeScript Dizi Yöntemleri

MKS TypeScript Dizi nesnesi, geliştiricilerin dizileri kolay ve verimli bir şekilde yönetmelerine yardımcı olan birçok özelliğe ve metoda sahiptir. Bir özelliğin değerini arrayname.property belirterek, bir metodun çıktısını ise arrayname.method() belirterek alabilirsiniz.

Uzunluk özelliği örneği

let months: Array<string> = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"];

console.log(months.length);  // 12

Ters yöntem örneği

console.log(months.reverse());
// ["Dec","Nov","Oct","Sept","Aug","July","June","May","April","March","Feb","Jan"]

Sıralama yöntemi örneği

console.log(months.sort());
// ["April","Aug","Dec","Feb","Jan","July","June","March","May","Nov","Oct","Sept"]

Pop yöntemine örnek

console.log(months.pop()); // Dec

Shift yöntemi örneği

console.log(months.shift()); // Jan

Push yöntemi örneği

let years: Array<number> = [2015, 2016, 2017, 2018, 2019];
console.log(years.push(2020)); // 6, the new length
years.forEach(function(yrs, i) {
  console.log(yrs); // 2015, 2016, 2017, 2018, 2019, 2020
});

Concat yöntemi için örnek

let array1: Array<number> = [10, 20, 30];
let array2: Array<number> = [100, 200, 300];
console.log(array1.concat(array2)); // [10, 20, 30, 100, 200, 300]

Sınıfta TypeScript

TypeScript bir süper kümesidir JavaSenaryo, yani mümkün olan her şey. JavaKomut dosyası da mümkündür TypeScript.Class özelliği ES6'dan itibaren eklenmiştir. Daha önce JavaKod tekrarını sağlamak için prototip metotlara sahip bir fonksiyon kullanılarak, sınıf benzeri işlevsellik elde edildi. Sınıf kullanımıyla, kodunuz gibi dillere yaklaşabilir. Java, C# ve PythonKodun kolayca yeniden kullanılabildiği yerlerde.

Bir Sınıfı Tanımlamak TypeScript

İşte temel sınıf sözdizimi: TypeScript:

class nameofclass {
     //define your properties here

    constructor() {
     // initialize your properties here
    }

   //define methods for class
}

Örnek: Class'ta çalışan bir örnek

class Students {
    age : number;
    name : string;
    roll_no : number;

    constructor(age: number, name:string, roll_no: number) {
        this.age = age;
        this.name = name;
        this.roll_no = roll_no;
    }

    getRollNo(): number {
        return this.roll_no;
    }

    getName() : string {
        return this.name;
    }

    getAge() : number {
        return this.age;
    }
}

Yukarıdaki örnekte, Öğrenciler adında bir sınıfınız var. Bu sınıfın age, name ve roll_no özellikleri bulunuyor.

Yapıcı bir TypeScript Sınıf

Yukarıda tanımlanan Students sınıfının yapıcı metodu aşağıdaki gibidir:

constructor(age: number, name:string, roll_no: number) {
        this.age = age;
        this.name = name;
        this.roll_no = roll_no;
    }

Yapıcı metot, age, name ve roll_no parametrelerini alır. Yapıcı metot, sınıf örneği oluşturulduğunda özellikleri başlatmayı üstlenir. Özelliklere erişim, aşağıdaki yöntem kullanılarak sağlanır: Re-Tweet Örneğin, yaşa erişmek için `this.age` ve öğrenci numarasına erişmek için `this.roll_no` gibi anahtar kelimeler kullanabilirsiniz. Ayrıca, aşağıda gösterildiği gibi varsayılan bir kurucuya da sahip olabilirsiniz:

constructor () {}

Bir içindeki yöntemler TypeScript Sınıf

Öğrenciler sınıfında, örneğin getRollNo(), getName() ve getAge() gibi, roll_no, name ve age özelliklerinin değerlerini döndüren metotlar tanımlanmıştır.

getRollNo(): number {
        return this.roll_no;
}

getName() : string {
	return this.name;
}

getAge() : number {
	return this.age;
}

Bir Sınıfın Örneğini Oluşturma TypeScript

In TypeScriptBir sınıfın örneğini oluşturmak için `new` operatörünü kullanırsınız. `new` ile bir örnek oluşturduğunuzda, aşağıdaki gibi sınıfın özelliklerine ve yöntemlerine erişebilen bir nesne elde edersiniz:

let student_details = new Students(15, "Harry John", 33);
student_details.getAge();  // 15
student_details.getName(); // Harry John

Derleme TypeScript Sınıfı JavaSenaryo

Aşağıda gösterildiği gibi tsc komutunu kullanarak derleme yapabilirsiniz. JavaSenaryo.

Command: tsc  Students.ts

Çıktısı JavaDerleme sırasında komut dosyası kodu aşağıdaki gibidir:

var Students = /** @class */ (function () {
    function Students(age, name, roll_no) {
        this.age = age;
        this.name = name;
        this.roll_no = roll_no;
    }
    Students.prototype.getRollNo = function () {
        return this.roll_no;
    };
    Students.prototype.getName = function () {
        return this.name;
    };
    Students.prototype.getAge = function () {
        return this.age;
    };
    return Students;
}());

In JavaBu betikte, sınıf kendi kendini çağıran bir fonksiyona dönüştürülür.

Sınıf Mirası

Sınıflar kullanılarak miras alınabilir uzanır anahtar kelime TypeScript.

Sınıf Mirası Söz Dizimi:

class A {
     //define your properties here

    constructor() {
     // initialize your properties here
    }

   //define methods for class

}

class B extends A {
 //define your properties here

    constructor() {
     // initialize your properties here
    }

   //define methods for class

}

B sınıfı paylaşabilecek a sınıfı yöntemler ve özellikler.

İşte kalıtım kullanan bir sınıfın çalışan bir örneği:

class Person {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    getName(): string {
        return this.name;
    }

    getAge(): number {
        return this.age;
    }
}

class Student extends Person {
    tmarks: number;
    getMarks(): number {
        return this.tmarks;
    }

    setMarks(tmarks) {
        this.tmarks = tmarks;
    }
}

let _std1 = new Student('Sheena', 24);
_std1.getAge();      // output is 24
_std1.setMarks(500);
_std1.getMarks();    // output is 500

İki sınıfınız var: Person ve Student. Student, Person sınıfından miras alıyor ve Student'tan oluşturulan nesne, kendi metotlarına ve özelliklerine olduğu kadar miras aldığı sınıfın metotlarına ve özelliklerine de erişebiliyor.

Şimdi yukarıdaki sınıfa bazı değişiklikler ekleyelim.

Örnek:

class Person {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    getName(): string {
        return this.name;
    }

    getAge(): number {
        return this.age;
    }
}

class Student extends Person {
    tmarks: number;
    constructor(name: string, age: number, tmarks: number) {
        super(name, age);
        this.tmarks = tmarks; // the derived property must be assigned too
    }
    getMarks(): number {
        return this.tmarks;
    }

    setMarks(tmarks) {
        this.tmarks = tmarks;
    }
}

let _std1 = new Student('Sheena', 24, 500);
_std1.getAge();   // output is 24
_std1.getMarks(); // output is 500

Önceki örneğe kıyasla değişiklik, Student sınıfında tanımlanan bir kurucu metottur. Bu kurucu metot, temel sınıfla aynı parametreleri alır ve bunlara ek olarak kendi ek parametrelerini de alır.

In TypeScript Temel sınıfın tüm parametreleriyle `super`'ı çağırmanız gerekiyor. Bu, kurucu fonksiyonun içindeki ilk ifade olmalıdır, çünkü `super` genişletilmiş sınıfın kurucusunu çalıştırır. Türetilmiş sınıf tarafından tanımlanan herhangi bir özellik, örneğin `tmarks`, daha sonra açıkça atanmalıdır, aksi takdirde `getMarks` tanımsız değer döndürür.

Erişim Değiştiricileri TypeScript

TypeScript Metotlarınız ve özelliklerinizde public, private ve protected erişim değiştiricilerini destekler. Varsayılan olarak, erişim değiştirici verilmezse, metot veya özellik public olarak kabul edilir ve sınıfın nesnesinden kolayca erişilebilir.

Özel erişim belirleyicileri söz konusu olduğunda, üyeler sınıfın nesnesinden erişilemez ve yalnızca sınıf içinde kullanılmak üzere tasarlanmıştır. Miras alınan bir sınıfa erişilemezler.

Korumalı erişim değiştiriciler söz konusu olduğunda, üyeler sınıf içinde ve miras alınan sınıfta kullanılmak üzere tasarlanmıştır ve sınıfın nesnesinden erişilemezler.

Örnek:

class Person {
    protected name: string;
    protected age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    private getName(): string {
        return this.name;
    }

    getDetails(): string {
        return "Name is " + this.getName();
    }
}

class Student extends Person {
    tmarks: number;
    constructor(name: string, age: number, tmarks: number) {
        super(name, age);
        this.tmarks = tmarks;
    }
    getMarks(): number {
        return this.tmarks;
    }

    getFullName(): string {
        return this.name;
    }

    setMarks(tmarks) {
        this.tmarks = tmarks;
    }
}

let _std1 = new Student('Sheena', 24, 500);
_std1.getMarks();    // output is 500
_std1.getFullName(); // output is Sheena
_std1.getDetails();  // output is Name is Sheena

Arayüz TypeScript

temel özelliklerinden biri TypeScript Arayüzler, onu kullanan varlık tarafından uygulanması gereken bir dizi kuraldır. Varlık bir sınıf, fonksiyon veya değişken olabilir. Bir arayüz, özellikler ve metotlardan oluşabilir. Bir özelliği veya metodu "?" sözdizimiyle isteğe bağlı olarak işaretleyebilirsiniz. Arayüz, onu uygulayan herhangi bir fonksiyon, değişken veya sınıf için güçlü bir tür kontrolü ekler.

Bir Arayüzün Söz Dizimi TypeScript

interface Dimension {
    width: string;
    height: string;
}

"Dimension" adında bir arayüz tanımladınız ve bu arayüzün hem "width" hem de "height" özellikleri string türünde.

Bu arayüz artık bir değişken, bir fonksiyon veya bir sınıf tarafından uygulanabilir. İşte Dimension arayüzünü uygulayan bir değişken örneği.

Örnek:

interface Dimension {
    width: string;
    height: string;
}

let _imagedim: Dimension = {
    width: "100px",
    height: "200px"
};

Dimension arayüzünün imzasında genişlik ve yükseklik bulunur ve her ikisi de zorunludur. Herhangi bir özellik eksikse veya bir tür değiştirilirse, kod derlenirken derleme zamanı hatası verir. JavaSenaryo.

Yukarıdaki kod derlendiğinde JavaSenaryo şu şekildedir:

var _imagedim = {
    width: "100px",
    height: "200px"
};

Şimdi bir arayüzün bir fonksiyonla nasıl kullanılacağını görelim.

Bir fonksiyonun dönüş tipi olarak arayüz kullanılması

interface Dimension {
    width: string;
    height: string;
}

function getDimension() : Dimension {
    let width = "300px";
    let height = "250px";
    return {
        width: width,
        height: height
    }
}

Yukarıdaki örnekte, Dimension arayüzü getDimension() fonksiyonunun dönüş tipi olarak kullanılmıştır. Dönüş değeri, arayüzde tanımlanan özellikler ve tiplerle eşleşmelidir.

derlenmiş JavaKod aşağıdaki gibi olacaktır:

function getDimension() {
    var width = "300px";
    var height = "250px";
    return {
        width: width,
        height: height
    };
}

Derleme sırasında, dönüş türü arayüzle eşleşmezse hata oluşacaktır.

Arayüz, bir fonksiyon parametresi olarak

interface Dimension {
    width: string;
    height: string;
}

function getDimension(dim: Dimension) : string {
    let finaldim  = dim.width + "-" + dim.height;
    return finaldim;
}

getDimension({width:"300px", height:"250px"}); // "300px-250px"

Yukarıdaki örnekte, Dimension arayüzünü getDimension() fonksiyonuna parametre olarak kullandınız. Fonksiyonu çağırdığınızda, ona iletilen parametre, arayüz tarafından tanımlanan kurallara uymalıdır.

derlenmiş JavaKod aşağıdaki gibi olacaktır:

function getDimension(dim) {
    var finaldim = dim.width + "-" + dim.height;
    return finaldim;
}
getDimension({ width: "300px", height: "250px" });

Bir arayüzü uygulayan sınıf

Bir sınıfla birlikte bir arayüz kullanmak için, `interface` anahtar kelimesini kullanmanız gerekir. uygular.

Bir arayüzü uygulayan bir sınıf için sözdizimi:

class NameofClass implements InterfaceName {
}

Aşağıdaki örnek, bir arayüzün bir sınıfla nasıl çalıştığını göstermektedir.

interface Dimension {
    width : string,
    height: string,
    getWidth(): string;
}

class Shapes implements Dimension {
    width: string;
    height: string;
    constructor (width:string, height:string) {
        this.width = width;
        this.height = height;
    }
    getWidth() {
        return this.width;
    }
}

Yukarıdaki örnekte, hem width hem de height özelliklerine sahip, her ikisi de string türünde olan Dimension arayüzünü ve string döndüren getWidth() adlı bir metodu tanımladınız.

derlenmiş JavaKod aşağıdaki gibi olacaktır:

var Shapes = /** @class */ (function () {
    function Shapes(width, height) {
        this.width = width;
        this.height = height;
    }
    Shapes.prototype.getWidth = function () {
        return this.width;
    };
    return Shapes;
}());

İçindeki işlevler TypeScript

Fonksiyonlar, bir görevi yerine getirmek için uygulanan talimatlar kümesidir. JavaBetiklerde kodun büyük kısmı fonksiyonlar şeklinde yazılır ve bu fonksiyonlar önemli bir rol oynar. TypeScript Sınıflar, arayüzler, modüller ve ad alanları mevcut olsa da, fonksiyonlar hala önemli bir rol oynamaktadır. Bir fonksiyonun bir sınıf içindeki diğer bir sınıf içindeki bir fonksiyonla arasındaki fark şudur: JavaSenaryo ve TypeScript Parametre ve dönüş tipleri, bir ile birlikte kullanılabilir mi? TypeScript fonksiyonu.

JavaKomut dosyası işlevi:

function add (a1, b1) {
   return a1+b1;
}

TypeScript işlevi:

function  add(a1 : number, b1: number) : number {
    return a1 + b1;
}

Yukarıdaki fonksiyonda, fonksiyonun adı "add", parametreler ise şunlardır: a1 hem de b1Hem değer hem de dönüş değeri sayı türündedir ve dönüş değeri de sayıdır. Fonksiyona bir dize (string) geçirirseniz, derleme sırasında derleme hatası verecektir. JavaSenaryo.

Fonksiyona çağrı yapılıyor: ekle

let x = add(5, 10);   // will return 15
let b = add(5);       // error TS2554: Expected 2 arguments, but got 1
let c = add(3,4,5);   // error TS2554: Expected 2 arguments, but got 3
let t = add("Harry", "John");
// error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'

Parametreler a1 hem de b1 Parametre türleri ve dönüş türü zorunludur ve belirtilmemesi durumunda hataya neden olur. Parametre türleri ve dönüş türü de aynı derecede önemlidir ve tanımlandıktan sonra değiştirilemez.

Bir işleve ilişkin isteğe bağlı parametreler

In JavaKomut dosyasında, fonksiyonlara verilen tüm parametreler isteğe bağlıdır ve geçirilmedikleri takdirde tanımsız kabul edilirler. Ancak bu durum diğer komut dosyalarında geçerli değildir. TypeScriptParametreleri tanımladıktan sonra bunları sağlamanız gerekir. Bir parametrenin isteğe bağlı olmasını istiyorsanız, aşağıdaki gibi parametre adının sonuna bir soru işareti ekleyin:

function getName(firstname: string, lastname?: string): string {
    return firstname + lastname;
}

let a = getName("John");              // returns Johnundefined
let b = getName("John", "Harry");     // returns JohnHarry
let c = getName("John", "H", "Harry"); // error TS2554: Expected 1-2 arguments, but got 3

Lütfen isteğe bağlı parametrelerin en son tanımlanması gerektiğini unutmayın. İlk parametreyi isteğe bağlı, ikincisini ise zorunlu olarak tanımlayamazsınız, çünkü derleyici hangi değerin verildiğini bilemez.

Paramlara Varsayılan Değerler Atama

Aşağıda gösterildiği gibi parametrelere varsayılan değerler atayabilirsiniz:

function getName(firstname: string, lastname = "Harry"): string {
    return firstname + lastname;
}

let a = getName("John");      // will return JohnHarry
let b = getName("John", "H"); // will return JohnH

İsteğe bağlı parametrelere benzer şekilde, varsayılan olarak başlatılan parametreler de parametre listesinin sonunda tutulmalıdır.

Dinlenme Parametreleri

Nasıl olduğunu gördün TypeScript Zorunlu parametreleri, isteğe bağlı parametreleri ve varsayılan değer parametrelerini ele alır. Şimdi de geri kalan parametrelere bakalım. Geri kalan parametreler, üç farklı yöntem kullanılarak birlikte tanımlanan bir grup isteğe bağlı parametredir. noktalar (…) Ardından, bir dizi olan parametrenin adı gelir.

Dinlenme parametrelerinin sözdizimi:

function testFunc(a: string, ...arr: string[]) :string {
    return a + arr.join("");
}

Yukarıda gösterildiği gibi, "rest" parametresi üç nokta ile başlayan bir dizidir. Bu dizi, fonksiyona iletilen kalan tüm argümanları içerecektir.

Örnek:

let a = testFunc("Monday", "Tuesday", "Wednesday", "Thursday");
// output is MondayTuesdayWednesdayThursday

Ok İşlevleri

Ok işlevi, ES6'da yayımlanan önemli özelliklerden biridir ve şu sürümlerde mevcuttur: TypeScript Aynı şekilde. Söz diziminde kalın bir ok işareti var, ismi de buradan geliyor.

Ok işlevi Sözdizimi:

var nameoffunction = (params) => {
 // code here
}

Ok fonksiyonunun kullanım amacı nedir?

Ok fonksiyonunun kullanım alanını anlamak için bir örneğe bakalım.

Örnek:

var ScoreCard = function () {
    this.score = 0;

    this.getScore = function () {
        setTimeout(function () {
            console.log(this.score);    // gives undefined
        }, 1000);
    }
}

var a = new ScoreCard();
a.getScore();

Bir `score` özelliğine sahip ve bu özelliği 0 olarak başlatmış bir fonksiyon ve `getScore` adında bir metot oluşturdunuz. Bu metot, `setTimeout` kullanarak bir saniye sonra `this.score` değerini yazdırıyor. `this.score` tanımlanmış ve başlatılmış olmasına rağmen, yazdırılan değer tanımsız. Sorun şurada yatıyor: Re-Tweet Anahtar kelime. setTimeout içindeki fonksiyonun kendi this'i var ve score orada tanımlanmadığı için sonuç tanımsız.

Aynı işlem, aşağıda gösterildiği gibi bir ok fonksiyonu kullanılarak da gerçekleştirilebilir:

var ScoreCard = function () {
    this.score = 0;

    this.getScore = function () {
        setTimeout(() => {
            console.log(this.score);   // you get 0
        }, 1000);
    }
}

var a = new ScoreCard();
a.getScore();

Bir ok fonksiyonunun kendine ait bir işlevi yoktur. Re-TweetBunun yerine, üst kapsamdan gelen değişkeni paylaşır; bu nedenle, dışarıda tanımlanan değişkenlere ok fonksiyonu içinde bu şekilde erişilebilir. Daha kısa sözdizimleri ve geri çağırmalar, olay işleyicileri ve zamanlama fonksiyonları için kullanışlıdırlar.

TypeScript Sıralamalar

A TypeScript Enum, birbiriyle ilişkili değerlerin bir arada saklandığı bir nesnedir. JavaScript, enum'ları doğal olarak desteklemiyor. Çoğu programlama dili, örneğin... Java, C ve C++ destek numaralandırmaları ve TypeScript Bunları da kullanılabilir hale getirir. Enum'lar, `enum` anahtar kelimesi kullanılarak tanımlanır.

Enum nasıl ilan edilir?

Sözdizimi:

enum NameofEnum {
   value1,
   value2,
    ..
}

Örnek: Enum

enum Directions {
    North,
    South,
    East,
    West
}

Yukarıdaki örnekte, North, South, East ve West değerlerine sahip Directions adında bir enum tanımladınız. Değerler, ilk giriş için 0'dan başlayarak her sonraki giriş için 1 artarak numaralandırılmıştır.

Sayısal değere sahip bir Enum tanımlayın.

Varsayılan olarak, bir enum üyesine değer atanmazsa, 0'dan başlayarak bir sayı alır. Aşağıdaki örnek, açıkça sayısal değerlere sahip bir enum'u göstermektedir.

enum Directions {
North = 0,
South = 1,
East = 2,
West = 3
}

Ayrıca bir başlangıç ​​değeri atayabilir ve sonraki üyelere artan değerler verebilirsiniz. Örneğin:

enum Directions {
North = 5,
South, // will be 6
East,  // 7
West   // 8
}

Kuzey 5'ten başlıyor, dolayısıyla Güney 6, Doğu 7 ve Batı 8'dir.

Varsayılan değerler yerine kendi seçtiğiniz değerleri de atayabilirsiniz. Örneğin:

enum Directions {
North = 5,
South = 4,
East = 6,
West = 8
}

Bir Enum'a nasıl erişilir?

Aşağıdaki örnek, kodunuzda enum'u nasıl kullanacağınızı göstermektedir:

enum Directions {
    North,
    South,
    East,
    West
}

console.log(Directions.North);      // output is 0
console.log(Directions["North"]); // output is 0
console.log(Directions[0]);       // output is North

derlenmiş JavaSenaryo şu şekildedir:

var Directions;
(function (Directions) {
    Directions[Directions["North"] = 0] = "North";
    Directions[Directions["South"] = 1] = "South";
    Directions[Directions["East"] = 2] = "East";
    Directions[Directions["West"] = 3] = "West";
})(Directions || (Directions = {}));
console.log(Directions.North);
console.log(Directions["North"]);
console.log(Directions[0]);

Dan beri JavaKomut dosyası enum'ları desteklemediği için derleyici, yukarıda gösterildiği gibi enum'u kendi kendini çağıran bir fonksiyona dönüştürüyor. Çift atama, ters eşlemeyi oluşturan şeydir.ping Numaradan isme geri.

Dize değeri olan bir Enum tanımlayın.

Aşağıdaki örnekte gösterildiği gibi, istediğiniz metin değerlerini atayabilirsiniz.

Örnek:

enum Directions {
    North = "N",
    South = "S",
    East = "E",
    West = "W"
}

console.log(Directions.North);      // output is N
console.log(Directions["North"]); // output is N
console.log(Directions[0]);       // output is undefined

derlenmiş JavaSenaryo şu şekildedir:

var Directions;
(function (Directions) {
    Directions["North"] = "N";
    Directions["South"] = "S";
    Directions["East"] = "E";
    Directions["West"] = "W";
})(Directions || (Directions = {}));
console.log(Directions.North);
console.log(Directions["North"]);
console.log(Directions[0]);

Modüller Nelerdir? TypeScript?

Oluşturulan dosyalar TypeScript Küresel erişime sahip olmak, bir dosyada tanımlanan değişkenlere başka bir dosyadan erişilebileceği anlamına gelir. Bu küresel yapı, kod çakışmalarına ve çalışma zamanı sorunlarına neden olabilir. Küresel değişken ve fonksiyon çakışmalarını önlemek için modül dışa aktarma ve içe aktarma işlevleri kullanılabilir. Bu özellik şu sürümde geldi: JavaES6 sürümüyle birlikte gelen ve ayrıca desteklenen bir komut dosyasıdır. TypeScript.

Neden Modüllere ihtiyacınız var? TypeScript?

Aşağıdaki örnek, modüller olmadan sorunu göstermektedir.

Örnek test1.ts

let age : number = 25;

Test1.ts'de yaş tipi numarasının değişkenini tanımladınız.

Örnek test2.ts

test2.ts dosyasında değişkene erişebilirsiniz. yaş test1.ts dosyasında tanımlananı aşağıda gösterildiği gibi değiştirin:

age = 30; // changed from 25 to 30.
let _new_age = age;

Bu durum birçok soruna yol açabilir, çünkü değişkenler küresel olarak erişilebilir ve her yerden değiştirilebilir.

İle modüllerYazılan kod dosya içinde kalır ve dosyanın dışından erişilemez. Bir dosyadan herhangi bir şeyi paylaşmak için, dosyayı `export` anahtar kelimesi kullanarak dışa aktarmanız gerekir. İhracat Bir değişkenin, sınıfın, fonksiyonun veya arayüzün başka bir dosyada kullanılmasını istediğinizde kullanılır. ithalat Bu yöntem, dışa aktarılmış bir öğeye erişmek istediğinizde kullanılır. Bu sayede dosya içindeki kod bozulmadan kalır ve aynı değişken adlarını tanımlasanız bile bunlar birbirine karışmaz.

Dışa Aktarma ve İçe Aktarmayı Kullanma

Dışa aktarma ve içe aktarma için birçok yöntem vardır. Biz burada en yaygın kullanılan sözdizimini ele alacağız.

İçe ve dışa aktarma 1'in sözdizimi:

export  nameofthevariable or class name or interface name etc

//To import the above variable or class name or interface you have to use import as shown below:

import {nameofthevariable or class name or interfacename} from "file path here without .ts"

İşte dışa aktarma ve içe aktarmayı kullanan çalışan bir örnek.

test1.ts

export let age: number = 25;

`export` anahtar kelimesi, yaş değişkenini başka bir dosyayla paylaşmak için kullanılır.

test2.ts

import { age } from "./test1"
let new_age :number = age;

`import` anahtar kelimesi, erişim sağlamak için kullanılır. yaş değişkendir ve dosya konumunu yukarıda gösterildiği gibi belirtmeniz gerekir.

İçe ve dışa aktarma için sözdizimi 2:

Dışa aktarma ve içe aktarma için başka bir yöntem daha vardır ve sözdizimi aşağıda gösterildiği gibidir:

export = classname;

import classname = require("file path of modulename")

Kullanırken dışa aktarma = Modülünüzü dışa aktarmak için, içe aktarma işleminde require(“modül adının dosya yolu”) kullanılması gerekir.

İşte bu durumu gösteren çalışan bir örnek.

Müşteri.ts

class Customer {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    getName(): string {
        return this.name;
    }
}

export = Customer;

testCustomer.ts

import Customer = require("./Customer");

let a = new Customer("Harry", 30);
alert(a.getName());

Modül Yükleyici

Modüller kendi başlarına çalışamazlar, bu nedenle içe aktarma bağımlılıklarını bulmak için bir modül yükleyiciye ihtiyacınız vardır, aşağıdaki resimde görüldüğü gibi. TypeScript Yukarıdaki örneklerde olduğu gibi, Node.js için CommonJS ve tarayıcıda çalıştırmak için Require.js modül yükleyicileri mevcuttur.

CommonJS modül formatını kullanarak kod derlemek için aşağıdaki komutu kullanın:

tsc --module commonjs testCustomer.ts

Requirejs modül formatını kullanarak kod derlemek için aşağıdaki komutu kullanın:

tsc --module amd testCustomer.ts

Yukarıdaki komutla bağımlı dosyalar JavaScript dosyalarına dönüştürülecektir.

Requirejs kullanarak testCustomer.ts'den testCustomer.js'ye örnek

define(["require", "exports", "./Customer"], function (require, exports, Customer) {
    "use strict";
    exports.__esModule = true;
    var a = new Customer("Harry", 30);
    alert(a.getName());
});

Requirejs kullanarak Customer.ts'den Customer.js'ye örnek

define(["require", "exports"], function (require, exports) {
    "use strict";
    var Customer = /** @class */ (function () {
        function Customer(name, age) {
            this.name = name;
            this.age = age;
        }
        Customer.prototype.getName = function () {
            return this.name;
        };
        return Customer;
    }());
    return Customer;
});

Bunu require.js kullanarak test etmek için, gösterildiği gibi bağımlılıkları referans alan main.js adında bir dosya oluşturmanız gerekir.

İşte klasör yapısı:

src/
    Customer.js
    testCustomer.js
    main.js
    require.js  // you can get this file from github or npm install requirejs
    test.html

ana.js

define(function (require) {
    var customer = require("./Customer");
    var testCustomer = require("./testCustomer");
});

test.html

<!DOCTYPE html>
<html>
<head>
    <title>TypeScript Module testing using Requirejs</title>
    <script data-main="main" src="require.js"></script>
</head>
<body>
    <h3>Testing modules using Requirejs</h3>
</body>
</html>

Ad alanları TypeScript

Bir ad alanı, sınıfları, arayüzleri, değişkenleri ve fonksiyonları tek bir dosyada bir araya getirir.

Ad Alanı Söz Dizimi

namespace name{

export class {
}

export interface {
}

export const constname;

}

İlgili kod tek bir ad alanı altında mevcuttur.

Ad alanı çalışma örneği: testnamespace.ts

namespace StudentSetup {

    export interface StudDetails {
        name: string;
        age: number;
    }

    export function addSpace(str) { // will add space to the string given
        return str.split("").join(" ");
    }

    export class Student implements StudDetails {
        name: string;
        age: number;

        constructor(studentdetails: StudDetails) {
            this.name = studentdetails.name;
            this.age = studentdetails.age;
        }

        getName(): string {
            return this.name;
        }
    }
}

Ad alanının adı Öğrenci KurulumuAyrıca StudDetails adında bir arayüz, addSpace adında bir fonksiyon ve Student adında bir sınıf eklediniz.

Bir Ad Alanına Erişim

Aşağıda ad alanını kullandığınız kod örneği verilmiştir. Öğrenci Kurulumu.

testStudentSetup.ts

let a = new StudentSetup.Student({ name: "Harry", age: 20 });

console.log("The name is :" + StudentSetup.addSpace(a.getName()));

Bir ad alanı içinde bulunan sınıf, arayüz veya fonksiyona, örneğin ad alanı adı kullanılarak başvurulmalıdır. ÖğrenciSetup.addSpace fonksiyona erişmek için ve ÖğrenciSetup.Öğrenci sınıfa erişmek için.

Aşağıda gösterildiği gibi, her iki dosyayı da tek bir JavaScript dosyasına derleyebilirsiniz:

tsc --outFile namespace.js testnamespace.ts  testStudentSetup.ts

Aşağıdaki komutu kullanarak komut isteminde çıktıyı kontrol edin:

node namespace.js

Çıktı:

The name is :H a r r y

Ortam Bildirimleri TypeScript

TypeScript üçüncü taraf kullanmanıza olanak tanır JavaOrtam bildirimlerini kullanan betik dosyaları. Bu özelliğin avantajı, kütüphaneyi yeniden yazmanıza gerek kalmadan, tür kontrolüyle birlikte tüm özelliklerini kullanabilmenizdir. TypeScript.

Ortam Söz Dizimi

Ortam modülü tanımlamak için:

declare module moduleName {
   //code here
}

Ortam dosyası şu şekilde kaydedilmelidir:

filename.d.ts

Dosyayı kullanmak için dosyaadı.d.ts .ts dosyanızda şu şekilde referans vermeniz gerekiyor:

/// <reference path="filename.d.ts"/>

Ortam türü bildirimi TypeScript Üçüncü taraf kütüphaneye atıfta bulunur ve gerekli fonksiyonları kendi türleriyle yeniden tanımlar. Örneğin, küçük bir örneği ele alalım. JavaAşağıda komut dosyası kütüphanesi gösterilmektedir.

Üçüncü şahıs JavaKomut dosyası: testString.js

var StringChecks = {
    isString: function (str) {
        return typeof str === "string";
    },

    convertToUpperCase: function (str) {
        return str.toUpperCase();
    },

    convertToLowerCase: function (str) {
        return str.toLowerCase();
    },

    convertToStringBold: function (str) {
        return str.bold();
    }
};

StringChecks adında bir nesneniz var ve bu nesne isString, convertToUpperCase, convertToLowerCase ve convertToStringBold fonksiyonlarına sahip.

Ortam Modülü Oluşturma TypeScript

Şimdi, referans veren bir ortam modülü oluşturacağız. JavaYukarıdaki işlevleri yerine getirir ve gerektiğinde tür kontrolleri ekler.

Dosya adı: tstring.d.ts

declare module TestString {

    export interface StringsFunc {
        isString(str: string): boolean;
        convertToUpperCase(str: string): string;
        convertToLowerCase(str: string): string;
        convertToStringBold(str: string): string;
    }
}

declare var StringChecks: TestString.StringsFunc;

TestString adında bir modül tanımlıyorsunuz ve StringsFunc arayüzünü dışa aktarıyorsunuz. Her bir imza, fonksiyonun neyi kabul ettiğini ve neyi döndürdüğünü belirtir:

• isString(str: string): boolean – Bir metin dizesi alır ve bir boolean değer döndürür. Sayı veya başka bir tür geçirilmesi derleme zamanı hatasına neden olur.
• convertToUpperCase(str: string): string – bir metin dizisi alır ve bir metin dizisi döndürür.
• convertToLowerCase(str: string): string – bir metin dizisi alır ve bir metin dizisi döndürür.
• ConvertToStringBold(str: dize): dize – bir metin dizisi alır ve bir metin dizisi döndürür.

Yana JavaKomut dosyası StringChecks nesne adını ortaya çıkarıyor, biz de .d.ts dosyasında aynı adı kullanıyoruz:

declare var StringChecks: TestString.StringsFunc;

Ortam modülünü kullanma TypeScript

İşte ortam dosyası tstring.d.ts'yi kullanan test.ts dosyası.

/// <reference path="tstring.d.ts"/>
let str1 = StringChecks.isString("Hello World");
console.log(str1);
let str2 = StringChecks.convertToUpperCase("hello world");
console.log(str2);
let str3 = StringChecks.convertToLowerCase("HELLO");
console.log(str3);
let str4 = StringChecks.convertToStringBold("Hello World");
console.log(str4);

`tsc test.ts` komutuyla derleyerek `test.js` dosyasını oluşturun:

/// <reference path="tstring.d.ts"/>
var str1 = StringChecks.isString("Hello World");
console.log(str1);
var str2 = StringChecks.convertToUpperCase("hello world");
console.log(str2);
var str3 = StringChecks.convertToLowerCase("HELLO");
console.log(str3);
var str4 = StringChecks.convertToStringBold("Hello World");
console.log(str4);

Artık test.js dosyasını testString.js kütüphane dosyasıyla birlikte bir HTML dosyasında kullanabilirsiniz.

<html>
<head>
    <title>Test TypeScript Ambient</title>
    <script src="testString.js"></script>
    <script src="test.js"></script>
</head>
<body>
</body>
</html>

Çıktı:

true
HELLO WORLD
hello
<b>Hello World</b>

Devam etmek için, iki dili doğrudan karşılaştırın. TypeScript vs JavaSenaryo, tekrar ziyaret et JavaKomut dosyası dizi yöntemleri Burada kullanılan yazılı olmayan karşılıklar için ve inceleyin. döngüler JavaSenaryo hem de dahili ve harici JavaSenaryo Tarayıcının temel prensipleri, derlenmiş çıktının dayandığı unsurlardır.

SSS