TypeScript Öğretici: Nedir, Arayüz, Numaralandırma, Örnekli Dizi

Nedir? TypeScript?

TypeScript bir süper kümesidir JavaSenaryo. TypeScript sınıfları, arayüzleri vb. destekleyen saf nesne yönelimli programlama dilidir. tarafından geliştirilen açık kaynaklı bir dildir. Microsoft kodu statik olarak derleyen JavaScript. Tarayıcıda veya Nodejs'te rahatlıkla çalıştırılabilir.

ECMAScript için yayımlanan en son özelliklerin tümü TypeScript ve buna ek olarak TypeScript arayüzler, ortam bildirimi, sınıf kalıtımı vb. gibi kendi nesne yönelimli özelliklerine sahiptir ve bu, aksi takdirde yapılması zor olacak büyük bir uygulamanın geliştirilmesine yardımcı olur JavaSenaryo.

İ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/ ve işletim sisteminize göre nodejs'i indirip yükleyin. Nodejs'in nasıl indirileceğine ilişkin ayrıntılı talimatı burada bulabilirsiniz: https://www.guru99.com/download-install-node-js.html

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 isteminizdeki sürümü kontrol etmeniz yeterlidir.

D:\typeproject>node --version
V10.15.1

D:\typeproject>npm --version
6.4.1

Yani nodejs v10 ve npm 6 yüklü.

) 3 Adım TypeScript Montaj

Proje dizininizi typeproject/ oluşturun ve aşağıdaki komutta gösterildiği gibi npm init komutunu çalıştırın:

npm init

Adım 4) Kurulumu Başlatın

Şimdi projemizin bağımlılıklarını saklayacak .json paketini oluşturacağız.

Kurulum tamamlandıktan sonra 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ı, kullanabilmenizdir TypeScript tsc Global olarak kurulduğu için herhangi bir dizinden komut. Yüklemek istemiyorsanız TypeScript global olarak aşağıdaki komutu kullanın:

npm --save install typescript

Proje dizininizde src/ klasörü oluşturun ve src/ klasöründe create 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 global olarak kuruluysa aşağıdaki komutu kullanın:

tsc test.ts

If TypeScript projenizde yerel olarak kuruluysa yolunu kullanmanız gerekir TypeScript gösterildiği gibi node_modules'tan:

node_modules/typescript/bin/tsc test.ts

Yukarıdaki komut bir test.js dosyası oluşturacak ve kodun javascript'e derlenmesini sağlayacaktır.

Ö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

Bu TypeScript öğreticide test.js'yi nodejs'de aşağıdaki gibi çalıştıracağız:

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

Konsollanan değer test.js yürütüldüğünde 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 aynısını kullanabilir. Ancak tüm yeni özellikler eski tarayıcılarda desteklenmez, bu nedenle javascript'i eski bir Ecmascript sürümüne derlemeniz gerekir. TypeScript bunu yapabilen derleyici seçenekleri sağlar.

Ö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 hedef ES3'tür. Değiştirmek isterseniz yukarıdaki komutu kullanabilirsiniz.

Şu anda bu konuda ES6'yı kullanacağız TypeScript Hedef olarak öğretici:

tsc --target ES6  test.ts

test.ts'den test.js'ye

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

addnumbers(10, 20);

Kullandığınız ok işlevi bir ES6 özelliği olduğundan ve ES6'ya derlendiğinde de aynı olduğundan kod olduğu gibi kalır.

Varsayılan olarak hedef ES3'tür, dolayısıyla hedef olmadan test.js'yi şu şekilde alırsınız:

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

Yani burada, kalın ok normal bir anonim fonksiyona dönüştürüldü.

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 JavaSenaryo. O halde gelin değişkenlere değer bildirmeyi ve atamayı öğrenelim. TypeScript.

Değişkenler kodda tanımlanmadan kullanılamaz. Kullanabileceğiniz bir değişken bildirmek için

var anahtar kelime,

izin Anahtar kelime

const Anahtar kelime

Değişkenlerle çalışma TypeScript javascript'e benzer ve javascript'e aşina olan kullanıcılar bunu çok kolay bulacaktır. Sadece şu gibi değişkenler izin ve const karşılaştırıldığında pek kullanılmaz var.

Var kullanarak değişkenleri bildirmek

Sözdizimi:

var firstname = "Roy";

Birkaç tanesine göz atalım TypeScript var anahtar sözcüğünün çalışmasını ve ayrıca kullanılarak bildirilen değişkenlerin kapsamını anlamaya yönelik ö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 variable and will be accessible inside function test, it will not be available outside the function.
    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; //variable t is again redeclared inside function with value 10, so here t is local to the function and changes done to it will remain inside the function.
    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(); // the value returned will be undefined. The if-block has the variable which gets executed when I> 0. Over here the if-block is not expected but you are still having a reference to the variable t, and it returns undefined, this is because var defined variables once defined inside a function will have reference to it inside the function.  
i++; // here value of i is incremented.
test(); // since i >0 the if block is executed and value returned is 1.

Let kullanarak değişkenleri bildirmek

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

Sözdizimi:

let name="Roy";

Çalışma izin değişken neredeyse aynı var, ancak küçük bir farkla ve aynı şeyi bir kullanarak anlayacaksınız. TypeScript örnek.

Örnek:

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

test(); // throws an error : Uncaught ReferenceError: t is not defined.

Yukarıda TypeScript örnek bir hata veriyor, ancak aynı şey şu şekilde olsaydı iyi sonuç verirdi: var anahtar kelime. Değişkenler kullanılarak izin Bildirilen blok kapsamında kullanılabilir; örneğin, t değişkeni yalnızca if bloğunun içinde kullanılabilir, işlevin tamamında kullanılamaz.

Ayrıca herhangi bir fonksiyonun içinde veya for döngüsünde, while döngüsünde bir değişken bildirirseniz, TypeScript switch bloğu, yalnızca o bloğun içinde kullanımınıza sunulacak ve blok dışında ona referans olmayacak ve değişken bloğun dışında kullanılırsa hata verecektir. Var ve let anahtar sözcüğüyle bildirilen değişkenler arasındaki temel fark budur.

Değişkenleri const kullanarak bildirmek

Const sabit değişkenler anlamına gelir. Let değişkenlerine benzerler ancak tek fark, bir değer atandıktan sonra değiştirilememesidir.

Sözdizimi:

const name;

Örnek:

const age = "25"; 
age="30"; // will throw an error : Uncaught TypeError: Assignment to constant variable.

Böylece kullanıcılar const değişkenlerini yalnızca kendilerine atanan değerleri değiştirmeleri gerekmediğini bildikleri durumlarda kullanabilirler.

Türler TypeScript

TypeScript güçlü bir şekilde yazılmış bir dildir, oysa javascript değildir. Bir dize olarak tanımlanmış bir değere sahip bir değişken, herhangi bir sorun olmadan bir sayıya dönüştürülebilir Javascript. Aynı şeye tolerans gösterilmiyor TypeScript. içinde TypeScript, bir değişkenin türü yalnızca başlangıçta ve yürütme boyunca tanımlanır, aynı türü korumak zorundadır; bunda yapılacak herhangi bir değişiklik, JavaScript'e derleme sırasında derleme zamanı hatasına yol açacaktır.

Türleri şunlardır:

Numara
dizi
Boole
herhangi
Geçersiz

Numara

Yalnızca tam sayıları, kayan sayıları, kesirleri vb. alır.

Sözdizimi:

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

Sayı türlerinde kullanılabilecek bazı önemli yöntemler şunlardır:

tamir edildi() – sayıyı bir dizgeye dönüştürecek ve yönteme verilen ondalık basamakları koruyacaktır.

toString () – bu yöntem sayıyı bir dizgeye 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 String 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";

String türlerinde kullanılabilecek bazı önemli yöntemler şunlardır:

bölmek() – bu yöntem dizeyi bir diziye böler.
karakter() – bu yöntem verilen indeks için ilk karakteri verecektir.
indeksi() – bu yöntem, kendisine verilen değerin ilk oluşumunun konumunu verecektir.
değiştirmek () – bu yöntem 2 dize alır; ilk önce dizede aranacak değer ve eğer mevcutsa, 2. dizenin yerini alacak ve yeni bir dize geri verecektir.
Süs () – bu yöntem dizenin her iki tarafındaki beyaz boşlukları kaldıracaktır.
substr() – bu yöntem, dizenin başlangıç ve bitiş olarak verilen konuma bağlı olan bir kısmını verecektir.
alt dize() – bu yöntem, dizenin başlangıç ve bitiş olarak verilen konuma bağlı olan bir kısmını verecektir. Son konumdaki karakter hariç tutulacaktır.
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 is the value does not exist in the string.
_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

Doğru, yanlış, 0 ve 1 gibi mantıksal değerleri kabul eder.

Sözdizimi:

let bflag :boolean = 1;
let status :boolean = true;

herhangi

Sözdizimi:

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

Kullanılarak bildirilen değişkenler herhangi type değişkeni bir dize, sayı, dizi, boole veya void olarak alabilir. TypeScript herhangi bir derleme zamanı hatası vermeyecektir; bu, içinde bildirilen değişkenlere benzer JavaKomut dosyası. Herhangi bir tür değişkenini yalnızca o değişkenle ilişkilendirilecek değerin türünden emin olmadığınızda kullanın.

Geçersiz

Void türü çoğunlukla döndürülecek hiçbir şeyi olmayan bir işlevde dönüş türü olarak kullanılır.

Sözdizimi:

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

TypeScript Dizi

An Dizi in TypeScript birden fazla değeri depolayabileceğiniz bir veri türüdür. Dizi işlemleri için değerlerin nasıl bildirileceğini ve atanacağını öğrenelim TypeScript.

Dan beri TypeScript güçlü bir şekilde türlendirilmiş bir dildir, bir dizideki değerlerin veri türünün ne olacağını söylemelisiniz. Aksi takdirde, onu herhangi bir tür olarak kabul edecektir.

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 will all numbers

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

let alltypes: Array<any> = [true, false, "Harry", 2000, { "a": "50", "b": "20" }]; //array of all types boolean, string , number , object etc.

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

Bir dizideki elemanları almak için değerler 0 indeksinden başlayıp dizinin uzunluğuna kadar değişir.

Örnek:

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

Ayrıca bir dizideki öğeleri kullanarak da alabilirsiniz. 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]);
}
Output:
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])
}

Output:
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)
}
Output:
2016
2017
2018
2019

Foreach döngüsünü kullanma

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

TypeScript Dizi Yöntemleri

TypeScript Dizi nesnesi, geliştiricilerin dizileri kolay ve verimli bir şekilde işlemesine yardımcı olan birçok özellik ve yönteme sahiptir. Diziadı.özelliğini belirterek bir özelliğin değerini ve dizi adı.method()'u belirterek bir yöntemin çıktısını alabilirsiniz.

uzunluk özelliği

=> Bir dizideki eleman sayısını bilmek istiyorsanız uzunluk özelliğini kullanabilirsiniz.

Revbaşka yöntem

=> Bir dizideki öğelerin sırasını tersine çevirme yöntemini kullanarak tersine çevirebilirsiniz.

Sıralama yöntemi

=> Sıralama yöntemini kullanarak bir dizideki öğeleri sıralayabilirsiniz.

Pop yöntemi

=> Bir dizinin son öğesini pop yöntemini kullanarak kaldırabilirsiniz.

Shift yöntem

=> Shift yöntemini kullanarak bir dizinin ilk öğesini kaldırabilirsiniz.

İtme yöntemi

=> Dizinin son öğesi olarak değer ekleyebilirsiniz.

birleştirme yöntemi

=> İki diziyi tek bir dizi elemanında birleştirebilirsiniz.

Uzunluk özelliği örneği

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

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

Ters yöntem örneği

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

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

Sıralama yöntemi örneği

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

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

Pop yöntemine örnek

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

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

Shift yöntemi örneği

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

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

Push yöntemi örneği

let years: Array<number> = [2015, 2016, 2017, 2018, 2019]; //array will all numbers			
console.log(years.push(2020)); 			
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 JavaKomut dosyası, bu nedenle yapılabilecek her şey JavaKomut dosyası da mümkündür TypeScript. Sınıf, ES6'dan itibaren eklenen yeni bir özelliktir; JavaSınıf türü işlevselliği, kodu yeniden kullanmak için prototip işlevselliğine sahip bir işlev kullanılarak denendi. Sınıfı kullanarak, kodumuzun yeniden kullanılabileceği java, c#, python vb. gibi dillere neredeyse yakın olmasını sağlayabilirsiniz. Sınıf özelliğiyle TypeScript/JavaScript, dili çok güçlü kılar.

Bir Sınıfı Tanımlamak TypeScript

Burada temel bir sınıf sözdizimi verilmiştir. 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. Age, name ve roll_no özelliklerine sahiptir.

Yapıcı bir TypeScript Sınıf

Yukarıda tanımladığımız Students sınıfı örneği aşağıda gösterildiği gibi bir yapıcıya sahiptir:

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

Yapıcı yönteminde yaş, ad ve roll_no parametreleri bulunur. Yapıcı, sınıf çağrıldığında özelliklerin başlatılmasıyla ilgilenecektir. Özelliklere kullanılarak erişilir Re-Tweet anahtar kelime. Örnek: age özelliğine erişim için this.age, roll_no'ya erişim için this.roll_no vb. Aşağıda gösterildiği gibi varsayılan bir kurucunuz da olabilir:

constructor () {}

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

Students sınıfında örneğin getRollNo(), getName(), getAge() gibi roll_no, name ve age özelliklerinin ayrıntılarını vermek için kullanılan yöntemler tanımlanmıştır.

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

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

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

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

Örnek:

In TypeScript Bir sınıfın örneğini oluşturmak için yeni operatörünü kullanmanız gerekir. Yeni operatörünü kullanarak bir sınıfın örneğini oluşturduğumuzda, aşağıda gösterildiği gibi sınıfın özelliklerine ve yöntemlerine erişebilen nesneyi elde ederiz:

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

Derleme TypeScript Sınıfı JavaSenaryo

Derlemek için aşağıda gösterildiği gibi tsc komutunu kullanabilirsiniz. Javascript.

Command: tsc  Students.ts

Çıktısı Javascript derleme kodu aşağıda gösterildiği 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 Javascript, Sınıf kendi kendine çağrılan bir işleve dönüştürülür.

Sınıf Mirası

Sınıflar kullanılarak miras alınabilir uzatmak 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şi ve Öğrenci olmak üzere iki sınıfınız var. Öğrenci sınıfı, Person'ı genişletir ve Öğrenci üzerinde oluşturulan nesne, genişlettiği sınıfın yanı sıra kendi yöntemlerine ve özelliklerine de erişebilir.

Şimdi yukarıdaki sınıfa birkaç değişiklik daha 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);
    }
    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 eklediğiniz değişiklikler, Öğrenci sınıfında tanımlanmış bir yapıcının olmasıdır. Yapıcının temel sınıfla aynı parametreleri alması ve varsa kendisine ait ek parametreleri eklemesi gerekir.

In TypeScript içindeki temel parametreler olarak tüm parametreleri super will olarak çağırmanız gerekir. Yapıcının içinde yapılması gereken ilk şey bu olmalı. Super, genişletilmiş sınıfın yapıcısını çalıştıracaktır.

Erişim Değiştiricileri TypeScript

TypeScript yöntemlerinize ve özelliklerinize genel, özel ve korumalı erişim değiştiricileri destekler. Varsayılan olarak, erişim değiştiricileri verilmemişse, yöntem veya özellik genel olarak kabul edilir ve bunlara sınıfın nesnesinden kolayca erişilebilir.

Özel erişim değiştiricileri durumunda, bunlara sınıfın nesnesinden erişilemez ve yalnızca sınıf içinde kullanılması amaçlanır. Miras alınan sınıf için kullanılamazlar.

Korumalı erişim değiştiricileri durumunda, bunların sınıf ve miras alınan sınıf içinde kullanılması amaçlanır ve sınıfın nesnesinden erişilemez.

Ö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

Özel: özelliklere veya yöntemlere sınıfın nesnesi ve ayrıca türetilmiş sınıf tarafından erişilemez, bunların sınıfın içinde dahili olarak kullanılması amaçlanmıştır.
Korumalı: özelliklere ve yöntemlere de oluşturulan nesne tarafından erişilemez. Bunlara sınıfın içinden erişilebilir ve onu genişleten sınıfın kullanımına açıktır.
Halka açık: özellikler ve yöntemler herhangi bir anahtar sözcük olmadan bildirilir. Sınıfın nesnesi kullanılarak dışarıdan kolayca erişilebilirler.

Arayüz TypeScript

temel özelliklerinden biri TypeScript arayüzlerdir. Arayüz, onu kullanan varlık tarafından uygulanması gereken tanımlanmış bir kural kümesidir. Varlık bir sınıf, fonksiyon veya değişken olabilir. Bir arayüz, özelliklerden ve yöntemlerden oluşabilir. Özellikleri, bu özellik veya yöntem için "?" sözdizimini kullanarak isteğe bağlı olarak tanımlayabilirsiniz. Arayüz, arayüzü uygulayan herhangi bir fonksiyon, değişken veya sınıf için güçlü bir tür denetimi ekler.

Bir Arayüzün Söz Dizimi TypeScript

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

Dimension adında, width ve height özelliklerine sahip olan ve her ikisinin de dize olarak türü olan bir arayüz tanımladınız.

Artık bu arayüz bir değişken, bir fonksiyon veya bir sınıf tarafından uygulanabilir. Burada Dimension arayüzünü uygulayan değişkenin örneği verilmiştir.

Örnek:

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

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

Dimension arayüzünün imzasının genişliği ve yüksekliği vardır ve her ikisi de zorunludur. Arayüzü uygularken herhangi bir özelliğin atlanması veya türün değiştirilmesi durumunda, kodun javascript'e derlenmesi sırasında derleme zamanı hatası verecektir.

Yukarıdaki kod javascript'e derlendiğinde aşağıdaki gibi görünür:

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

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

Arayüzü bir işlevde dönüş türü olarak kullanma

Örnek:

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ü, dönüş türü olarak getDimension() fonksiyonuna uygulanmıştır. getDimension() işlevinin dönüş türünün, Arayüz Boyutu için belirtilen özellikler ve türle eşleşmesi gerekir.

Derlenen kod Javascript 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üş tipi arayüzle eşleşmezse hata atar.

Fonksiyon parametresi olarak arayüz

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

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

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

Yukarıdaki örnekte, getDimension() fonksiyonunun parametresi olarak Arayüz Boyutunu kullandınız. İşlevi çağırdığınızda kendisine iletilen parametrenin tanımlanan Arayüz kuralıyla eşleştiğinden emin olmanız gerekir.

Derlenen kod Javascript aşağıdaki gibi olacaktır:

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

Sınıf uygulama Arayüzü

Bir sınıfla arayüzden yararlanmak için anahtar kelimeyi kullanmanız gerekir. uygular.

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

class NameofClass implements InterfaceName {
}

Aşağıdaki örnek, arayüzün sınıf ile çalışması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 string türünde width ve height özelliklerine sahip, hem de string olarak dönüş değeri olan getWidth() adı verilen bir yönteme sahip Dimension arayüzünü tanımladınız.

Derlenen kod Javascript 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 gerçekleştirmek için gerçekleştirilen talimatlar dizisidir. İçinde Javascript, kodun çoğu işlevler biçiminde yazılmıştır ve önemli bir rol oynar. İçinde TypeScript, mevcut sınıfınız, arayüzleriniz, modülleriniz, ad alanlarınız var, ancak yine de işlevler önemli bir rol oynuyor. Fonksiyon arasındaki fark javascript ve TypeScript işlev, kullanılabilen dönüş türüdür 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 fonksiyonlarda fonksiyonun adı eklenir, parametreler a1, ve b1 her ikisinin de sayı olarak bir türü vardır ve dönüş türü de bir sayıdır. Eğer fonksiyona bir string iletirseniz, fonksiyon onu derlerken bir derleme zamanı hatası verecektir. JavaSenaryo.

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

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

Paramlar a1 ve b1 zorunlu parametrelerdir ve bu şekilde alınmadığı takdirde hata verir. Ayrıca parametre türü ve dönüş türü de çok önemlidir ve tanımlandıktan sonra değiştirilemez.

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

JavaScript'te, fonksiyonlara ait tüm parametreler isteğe bağlıdır ve geçilmezse tanımsız olarak kabul edilir. Ancak durum şu şekilde değildir: TypeScript, parametreleri tanımladıktan sonra onları da göndermeniz gerekir, ancak herhangi bir parametreyi isteğe bağlı tutmak istiyorsanız bunu? aşağıda gösterildiği gibi parametre adına karşı:

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

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

İsteğe bağlı parametrelerin yalnızca sonda bir fonksiyonda tanımlanması gerektiğini unutmayın, ilk parametreyi isteğe bağlı, ikinci parametreyi zorunlu olarak alamazsınız. Fonksiyonu bir parametre derleyicisi ile çağırdığınızda hata verir. Bu yüzden isteğe bağlı parametrelerin sonda tutulması gerekir.

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, burada da varsayılan olarak başlatılan parametreler bir fonksiyonun 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ğerle başlatılan parametreleri yönetir. Şimdi dinlenme parametrelerine bir göz atacağız. Geri kalan parametreler, birlikte tanımlanan bir grup isteğe bağlı parametredir ve üç kullanılarak tanımlanırlar. 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, geri kalan parametreler (…param-name); kullanılarak tanımlanır; dinlenme parametresi, önünde üç nokta bulunan bir dizidir. Dizi kendisine iletilen tüm parametrelere sahip olacaktır. Aşağıdaki örnekte gösterildiği gibi işlevi çağırabilirsiniz:

Örnek:

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

Ok İşlevleri

Ok işlevi, ES6'da yayımlanan önemli özelliklerden biridir ve şu sürümlerde mevcuttur: TypeScript fazla. Ok işlevi söz diziminde, işleve ok işlevi adı verilmesinden dolayı kalın bir ok bulunur.

Ok işlevi Sözdizimi:

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

Ok Fonksiyonu ne işe yarar?

Arrow fonksiyonunun kullanım durumunu anlamak için örneğe bir göz atalı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();

This özelliğine sahip anonim bir işlev yarattınız. Puan 0 olarak başlatılır ve dahili olarak setTimeout'a sahip olan getScore yöntemi 1 saniye içinde this.score'u konsolide eder. Bu.score'u tanımlamış ve başlatmış olsanız bile, konsol değeri tanımsız değerini verir. Buradaki sorun şuis anahtar kelime. setTimeout'un içindeki fonksiyonun kendine ait this'i var ve skoru dahili olarak yönlendirmeye çalışıyor ve tanımlı olmadığı için tanımsız veriyor.

Aynı durum aşağıda gösterildiği gibi Ok işlevi kullanılarak da halledilebilir:

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

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

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

setTimeout içindeki işlevi aşağıda gösterildiği gibi bir ok işleviyle değiştirdiniz:

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

Bir ok fonksiyonunun kendine ait bir işlevi yoktur. Re-Tweet tanımlı ve ebeveynini paylaşıyor Re-Tweet, böylece dışarıda bildirilen değişkenlere this içinde bir ok işlevi kullanılarak kolayca erişilebilir. Daha kısa söz dizimi nedeniyle ve ayrıca geri aramalar, olay işleyicileri, iç zamanlama işlevleri vb. için kullanışlıdırlar.

TypeScript Sıralamalar

TypeScript Enum, bir arada saklanan ilgili değerlerin koleksiyonuna sahip bir nesnedir. Javascript numaralandırmayı desteklemez. Çoğu Programlama dili sevmek Java, C, C++ destekler TypeScript Enum ve ayrıca mevcut TypeScript fazla. Enum'lar, enum anahtar sözcüğü 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, Directions adında bir numaralandırma tanımladınız. Verilen değer Kuzey, Güney, Doğu, Batı'dır. Değerler, numaralandırmadaki ilk değer için 0'dan numaralandırılır ve ardından sonraki değer için 1'er artırılır.

Sayısal bir değere sahip bir Enum Bildirin

Varsayılan olarak, bir enum'a herhangi bir değer verilmezse, onu 0'dan başlayan bir sayı olarak kabul eder. Aşağıdaki örnek, sayısal bir değere sahip bir enum'u göstermektedir.

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

Ayrıca numaralandırmaya bir başlangıç değeri atayabilirsiniz; sonraki numaralandırma değerleri artan değerleri alacaktır. Örneğin:

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

Artık Kuzey enum değeri 5 ile başlar, dolayısıyla Güney 6, Doğu = 7 ve Batı = 8 değerini alacaktır.

Varsayılan değerleri almak yerine istediğ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'un nasıl kullanılacağını gösterir:

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

Javascript'e derlenmiş kod aşağıdaki gibidir:

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 Javascript numaralandırmaları desteklemez, yukarıda gösterildiği gibi numaralandırmayı kendi kendine çağrılan işlevlere dönüştürür.

Dize değeriyle bir Enum bildirin

Aşağıdaki örnekte gösterildiği gibi istediğiniz dize 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 North

Javascript'e derlenmiş kod aşağıdaki gibidir:

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?

İçinde oluşturulan dosyalar TypeScript küresel erişime sahiptir; bu, bir dosyada bildirilen değişkenlere başka bir dosyada kolayca erişilebileceği anlamına gelir. Bu genel yapı, kod çakışmalarına neden olabilir ve çalışma zamanında yürütmeyle ilgili sorunlara neden olabilir. Genel değişken ve işlev çakışmalarını önlemek için kullanılabilecek dışa aktarma ve içe aktarma modülü işlevine sahipsiniz. Bu özellik şurada mevcuttur: JavaES6 sürümüyle birlikte gelen komut dosyası ve ayrıca şu şekilde destekleniyor: TypeScript.

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

Aşağıdaki örnekte modüller olmadan sorun gösterilmektedir:

Ö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 kolayca erişebilirsiniz yaş test1.ts'de tanımlayın ve aşağıda gösterildiği gibi değiştirin:

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

Dolayısıyla yukarıdaki durum, değişkenler global olarak mevcut olduğundan ve değiştirilebildiğinden pek çok sorun yaratabilir.

İle Modüller, yazılan kod dosyanın yerel ayarı olarak kalır ve dosyanın dışından erişilemez. Dosyadaki herhangi bir şeye erişmek için, bu dosyanın Export anahtar sözcüğü kullanılarak dışa aktarılması gerekir. It Değişkenin, sınıfın, işlevin veya arayüzün başka bir dosyada kullanılmasını istediğinizde kullanılır. ithalat Dışa aktarılan değişkene, sınıfa veya arayüze veya işleve de erişmek istediğinizde kullanılır. Bunu yaptığınızda, kod yazılırken dosya içinde bozulmadan kalır ve aynı değişken adlarını tanımlasanız bile, bunlar karışmaz ve bildirildikleri dosyada yerel olarak davranmazlar.

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

İhracat ve ithalat yapmanın birçok yolu vardır. Burada çoğunlukla kullanılan sözdizimini tartışacağız.

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

export  nameofthevariable or class name or interface name etc

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

Import {nameof thevariable or class name or interfacename} from "file path here without.ts"

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

Örnek:

test1.ts

export let age: number = 25;

Export anahtar sözcüğü, yaş değişkenini başka bir dosyada paylaşmak için kullanılır.

test2.ts

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

İçe aktarma anahtar sözcüğü 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 2 için sözdizimi:

Dışa aktarmanın ve içe aktarmanın başka bir yolu vardır ve bunun söz dizimi aşağıda gösterilmiştir:

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 aktarmanın onu içe aktarmak için require(“modül adının dosya yolu”) kullanması gerekir.

Yukarıdaki durumu gösteren çalışan bir örnek aşağıdadır:

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ışamaz, bu nedenle, yukarıda gördüğünüz gibi içe aktarma bağımlılıklarını bulmak için modül yükleyiciye ihtiyacınız vardır. TypeScript yukarıda gösterilen örnekler. Mevcut modül yükleyici, nodejs ve Require.js'nin tarayıcıda çalıştırılması için CommonJS'dir.

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

tsc --module commonjs testCustomer.ts

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

tsc --module amd testCustomer.ts

Bağımlı dosyalar yukarıdaki komutla js dosyası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.t'lerden 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ıklara referansı olan 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

Ad alanı temel olarak sınıfların, arayüzlerin, değişkenlerin ve işlevlerin tek bir dosyada bir araya getirilmesinden oluşur.

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 Kurulumu, StudDetails isimli bir arayüz, addSpace isimli bir fonksiyon ve Student isimli bir sınıf eklediniz.

Ad Alanına Erişim

Aşağıda namespace'i kullandığınız kod bulunmaktadır Öğ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 mevcut olan sınıf, arayüz ve fonksiyona, ad alanı örneğinin adı kullanılarak başvurulmalıdır. ÖğrenciSetup.addSpace fonksiyona erişmek için, ÖğrenciSetup.Öğrenci sınıfa erişmek için.

Her iki dosyayı da aşağıda gösterildiği gibi tek bir js'de derleyebilirsiniz:

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

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

node namespace.js

Çıktıyı şu şekilde gösterecektir:

The name is: H a r r y

Ortam Bildirimleri TypeScript

TypeScript üçüncü taraf javascript dosyalarını ortam bildirimi kullanarak kullanmanıza olanak tanır. Bu özelliğin avantajı, yeniden yazmak zorunda olmamanız ve yine de kütüphanenin tüm özelliklerini kullanmanızdır. TypeScript.

Ortam Söz Dizimi

Ortam modülünü bildirmek için:

declare module moduleName {
   //code here
}

Ortam dosyasının şu şekilde kaydedilmesi gerekir:

filename.d.ts

Dosyayı kullanmak için dosyaadı.d.ts .ts dosyanızda bunu şu şekilde belirtmeniz gerekir:

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

Ortam türü bildirimi TypeScript üçüncü taraf kütüphaneye bir referansı olacak ve kendi türüyle gerekli işlevleri yeniden bildirecektir. Örneğin, aşağıda gösterildiği gibi küçük bir javascript kütüphaneniz olduğunu düşünün:

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

Örnek: 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 isString, convertToUpperCase, convertToLowerCase ve converToStringBold gibi fonksiyonlara sahip bir nesneniz var.

Ortam Modülünün Oluşturulması TypeScript

Şimdi yukarıdaki js fonksiyonlarına referans verecek ve ayrıca gereksinimlerimize göre tip kontrolü ekleyecek bir ortam modülü oluşturacağız.

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;

Bir modül adını TestString olarak tanımlamanız ve StringsFunc arayüzünü dışa aktarmış olmanız gerekir.

isString(str: string): boolean

=> Bu, param'ı bir dize olarak alacak ve dönüş türü boolean olacaktır. .ts dosyanızda kullanırken, parametreyi sayı olarak veya dize dışında herhangi bir şey olarak iletmeniz durumunda, bu size derleme türü hatası verecektir.

ConvertToUpperCase(str:string): dize

=> Bu, argümanı string olarak alacak ve bir string döndürecektir. Aynı şey için de geçerli ConvertToLowerCase(str: dize)
: sicim; Ve ConvertToStringBold(str: dize): dize
;

Javascript dosyasında nesne adı StringChecks olduğundan, son olarak .d.ts dosyasında da aynı şeye başvurmamız gerekir, bu da şu şekilde yapılır:

declare var StringChecks: TestString.StringsFunc;

Ortam modülünü kullanma TypeScript

Şimdi burada tstring.d.ts ortam dosyasının kullanılacağı test.ts dosyası var

Örnek: test.ts

/// <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);

Derlemek TypeScript tsc test.ts'den test.js'ye

/// <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'yi html dosyasında ve ayrıca testString.js kütüphane dosyasını kullanabilirsiniz.

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

Konsolda görülen çıktı budur:

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

TypeScript Tarihçe

Tarihin önemli yerlerini görelim TypeScript:

İki yıllık dahili geliştirme sürecinin ardından Microsoft. TypeScript 0.9, 2013'te piyasaya sürüldü
Jenerikler için ek destek TypeScript 1.0 Build 2014'te yayınlandı
Temmuz 2014'te yeni bir TypeScript Önceki versiyona göre beş kat daha hızlı bir derleyici geldi.
Temmuz 2015'te, dekoratörler için ad alanı anahtar sözcüğü olan ES6 modülleri desteği.
Kasım 2016'da, eşlenen türlerin anahtar ve arama türleri ve geri kalanı gibi bir özellik eklendi.
27 Mart 2018'de, koşullu türler, kavşak türleri destekleriyle geliştirilmiş anahtar eklendi. TypeScript.

Neden kullanım TypeScript?

Burada, kullanmanın önemli artıları/yararları verilmiştir. TypeScript

Büyük ve karmaşık bir proje JavaScriptlerin kodlanması ve bakımı zordur.
TypeScript Kod organizasyonunda çok yardımcı olur ve derleme sırasındaki hataların çoğundan kurtulur.
TypeScript JS kitaplıklarını ve API Belgelerini destekler
İsteğe bağlı olarak yazılan betik dilidir
TypeScript Kod düz hale dönüştürülebilir JavaKomut dosyası kodu
Daha iyi kod yapılandırması ve nesne yönelimli programlama teknikleri
Daha iyi geliştirme süresi aracı desteği sağlar
Dili standart dekoratörlerin, async/await'in ötesine genişletebilir

Kimler kullanır? TypeScript?

Burada en yaygın uygulamalardan bazıları verilmiştir. TypeScript:

Açısal ekibin kullandığı TypeScript.
NodeJS ve NPM Kurulumu
TypeScript Montaj
Derlemek TypeScript kodlamak Javascript
Nodejs'i kullanarak Kodu Çalıştırma
Gerçekleştirmek Javascript Tarayıcıda
Derlemek TypeScript kodlamak Javascript EcmaScript sürümünü kullanma
İle yazılan kodu kolayca derleyebilirsiniz. TypeScript için JavaNodeJS kullanarak script.
Yani birlikte çalışmak TypeScript İlk önce NodeJS'yi indirip yüklemeniz gerekir.

ÖZET

TypeScript bir süper kümesidir JavaSenaryo. TypeScript sınıfları, arayüzleri vb. destekleyen saf nesne yönelimli programlama dilidir.
TypeScript yayımlanan tüm Ecmascript özelliklerini destekler ve geliştiriciler kodlama sırasında aynısını kullanabilir.
Değişkenler değerleri depolamak için kullanılır ve değer bir dize, sayı, Boolean veya bir ifade olabilir.
In TypeScript, bir değişkenin türü yalnızca başlangıçta ve yürütme boyunca tanımlanır, aynı türü korumak zorundadır; bunda yapılacak herhangi bir değişiklik, JavaScript'e derleme sırasında derleme zamanı hatasına yol açacaktır.
Bir Dizi TypeScript birden fazla değeri saklayabileceğiniz bir veri türüdür.
Sınıf, ES6'dan itibaren eklenen yeni bir özelliktir; JavaPrototip işlevselliğine sahip bir fonksiyon kullanılarak kod yeniden kullanılarak sınıf türü işlevselliği denendi.
TypeScript yöntemlerinize ve özelliklerinize genel, özel ve korumalı erişim değiştiricileri destekler.
temel özelliklerinden biri TypeScript arayüzlerdir. Arayüz, onu kullanan varlık tarafından uygulanması gereken tanımlanmış bir kural kümesidir.
Fonksiyonlar, bir görevi gerçekleştirmek için gerçekleştirilen talimatlar dizisidir.
TypeScript Enum, bir arada saklanan ilgili değerlerin koleksiyonuna sahip bir nesnedir.

Beğenebilirsin:

Nedir? TypeScript?

İndirme ve Yükleme TypeScript

Derlemek TypeScript kodlamak Javascript

Gerçekleştirmek Javascript Nodejs'i kullanma

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

İLGİLİ MAKALELER

içindeki değişkenler TypeScript

Var kullanarak değişkenleri bildirmek

Let kullanarak değişkenleri bildirmek

Değişkenleri const kullanarak bildirmek

Türler TypeScript

Numara

dizi

Boole

herhangi

Geçersiz

TypeScript Dizi

Bir Diziyi Bildirin ve Başlatın

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

kullanma TypeScript döngü için

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

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

Foreach döngüsünü kullanma

TypeScript Dizi Yöntemleri

uzunluk özelliği

Revbaşka yöntem

Sıralama yöntemi

Pop yöntemi

Shift yöntem

İtme yöntemi

birleştirme yöntemi

Uzunluk özelliği örneği

Ters yöntem örneği

Sıralama yöntemi örneği

Pop yöntemine örnek

Shift yöntemi örneği

Push yöntemi örneği

Concat yöntemi için örnek

Sınıfta TypeScript

Bir Sınıfı Tanımlamak TypeScript

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

Yapıcı bir TypeScript Sınıf

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

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

Derleme TypeScript Sınıfı JavaSenaryo

Sınıf Mirası

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

Erişim Değiştiricileri TypeScript

Arayüz TypeScript

Bir Arayüzün Söz Dizimi TypeScript

Arayüzü bir işlevde dönüş türü olarak kullanma

Fonksiyon parametresi olarak arayüz

Sınıf uygulama Arayüzü

İçindeki işlevler TypeScript

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

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

Paramlara Varsayılan Değerler Atama

Dinlenme Parametreleri

Ok İşlevleri

Ok Fonksiyonu ne işe yarar?

TypeScript Sıralamalar

Enum nasıl ilan edilir?

Sayısal bir değere sahip bir Enum Bildirin

Bir Enum'a nasıl erişilir?

Dize değeriyle bir Enum bildirin

Modüller Nelerdir? TypeScript?

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

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

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

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

Modül Yükleyici

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

Requirejs kullanarak Customer.t'lerden Customer.js'ye örnek

Ad alanları TypeScript

Ad Alanı Söz Dizimi

Ad Alanına Erişim

Ortam Bildirimleri TypeScript

Ortam Söz Dizimi

Ortam modülünü bildirmek için:

Ortam dosyasının şu şekilde kaydedilmesi gerekir: