TypeScript Tutorial: Apa itu, Antarmuka, Enum, Array dengan Contoh

Apa itu TypeScript?

TypeScript adalah superset dari JavaNaskah. TypeScript adalah bahasa pemrograman berorientasi objek murni yang mendukung kelas, antarmuka, dll. Ini adalah bahasa sumber terbuka yang dikembangkan oleh Microsoft yang mengkompilasi kode secara statis JavaScript. Dapat dijalankan dengan mudah di browser atau Node.js.

Semua fitur terbaru yang dirilis untuk ECMAScript didukung TypeScript dan sebagai tambahannya TypeScript memiliki fitur berorientasi objek sendiri seperti antarmuka, deklarasi ambient, pewarisan kelas, dll. yang membantu dalam mengembangkan aplikasi besar yang jika tidak akan sulit dilakukan di JavaNaskah.

Cara Mengunduh dan Menginstal TypeScript

Berikut adalah proses langkah demi langkah untuk mengunduh dan menginstal TypeScript:

Langkah 1) Unduh dan Instal Nodejs

Kunjungi situs resmi nodejs : https://nodejs.org/en/download/ dan unduh serta instal nodejs sesuai sistem operasi Anda. Instruksi terperinci tentang cara mengunduh nodejs tersedia di sini: https://www.guru99.com/download-install-node-js.html

Langkah 2) Periksa versi Nodejs dan npm

Untuk memeriksa apakah nodejs dan npm sudah terinstal, cukup periksa versi di command prompt Anda.

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

D:\typeproject>npm --version
6.4.1

Jadi, Anda telah menginstal nodejs v10 dan npm 6.

Langkah 3) TypeScript Instalasi

Buat direktori proyek Anda typeproject/ dan jalankan npm init, seperti yang ditunjukkan pada perintah di bawah ini:

npm init

Langkah 4) Mulai Instalasi

Sekarang, kita akan membuat paket .json yang akan menyimpan dependensi untuk proyek kita.

Setelah selesai instal TypeScript sebagai berikut:

npm -g install typescript

Perintah di atas akan menangani instalasi TypeScriptMenambahkan “-g” ke npm install akan menginstal TypeScript secara global. Keuntungan menggunakan -g adalah Anda dapat menggunakannya TypeScript TSC perintah dari direktori mana pun saat diinstal secara global. Jika Anda tidak ingin menginstal TypeScript secara global gunakan perintah di bawah ini:

npm --save install typescript

Buat folder src/ di direktori proyek Anda dan di folder src/ buat TypeScript file test.ts dan tulis kode Anda.

Contoh : tes.ts

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

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

Menyusun TypeScript kode ke Javascript

Untuk mengkompilasi kode di atas gunakan perintah berikut:

If TypeScript diinstal secara global gunakan perintah di bawah ini:

tsc test.ts

If TypeScript diinstal secara lokal ke proyek Anda, Anda perlu menggunakan jalurnya TypeScript dari node_modules seperti yang ditunjukkan:

node_modules/typescript/bin/tsc test.ts

Perintah di atas akan membuat file test.js dan kode akan dikompilasi ke javascript.

Contoh : tes.js

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

Eksekusi Javascript menggunakan Nodejs

Dalam TypeScript tutorialnya, kita akan mengeksekusi test.js di nodejs sebagai berikut:

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

Nilai yang dihibur ditampilkan pada eksekusi test.js

Eksekusi JavaSkrip di Browser

Contoh:

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

Menyusun TypeScript kode ke Javascript menggunakan versi EcmaScript

TypeScript mendukung semua fitur Ecmascript yang dirilis, dan para pengembang dapat menggunakannya saat membuat kode. Namun, tidak semua fitur baru mendukung peramban lama, sehingga Anda perlu mengompilasi javascript ke versi Ecmascript yang lama. TypeScript menyediakan opsi kompiler yang dapat melakukannya.

Contoh : tes.ts

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

addnumbers(10, 20);

Untuk mengkompilasi ke versi ES pilihan Anda, Anda dapat menggunakan opsi target atau t dalam perintah Anda sebagai berikut:

tsc --target ES6  test.ts

OR

tsc -t ES6 test.ts

Secara default, targetnya adalah ES3. Jika Anda ingin mengubahnya, Anda dapat menggunakan perintah di atas.

Saat ini kami akan menggunakan ES6 dalam hal ini TypeScript tutorial sebagai target:

tsc --target ES6  test.ts

tes.ts ke tes.js

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

addnumbers(10, 20);

Kodenya tetap apa adanya, karena fungsi panah yang Anda gunakan adalah fitur ES6 dan sama ketika dikompilasi ke ES6 tidak berubah.

Secara default targetnya adalah ES3 jadi tanpa target Anda mendapatkan test.js sebagai:

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

Jadi di sini, panah gemuk diubah menjadi fungsi anonim biasa.

Variabel dalam TypeScript

Variabel digunakan untuk menyimpan nilai, dan nilai dapat berupa string, angka, Boolean, atau ekspresi. Ketika berbicara tentang variabel di TypeScript, mereka mirip dengan JavaNaskah. Jadi mari kita belajar mendeklarasikan dan memberikan nilai pada variabel TypeScript.

Variabel tidak dapat digunakan dalam kode tanpa definisi. Untuk mendeklarasikan suatu variabel dapat anda gunakan

adalah kata kunci,

membiarkan kata kunci

const kata kunci

Bekerja dengan variabel di TypeScript mirip dengan javascript, dan pengguna yang terbiasa dengan javascript akan merasa sangat mudah. Hanya variabel seperti membiarkan dan const tidak banyak digunakan dibandingkan dengan adalah.

Mendeklarasikan variabel menggunakan var

sintaks:

var firstname = "Roy";

Mari kita lihat beberapa TypeScript contoh untuk memahami cara kerja kata kunci var dan juga cakupan variabel yang dideklarasikan adalah kata kunci.

Contoh 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

Contoh 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.

Contoh 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.

Mendeklarasikan variabel menggunakan let

TypeScript sintaks untuk let adalah seperti yang diberikan di bawah ini:

sintaks:

let name="Roy";

Pekerjaan membiarkan variabelnya hampir sama dengan adalah, tetapi dengan perbedaan kecil dan akan memahami hal yang sama menggunakan an TypeScript contoh.

Contoh:

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

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

Atas TypeScript contoh menimbulkan kesalahan, tetapi hal yang sama akan berfungsi dengan baik jika dilakukan dengan adalah kata kunci. Variabel menggunakan membiarkan tersedia dalam cakupan blok yang dideklarasikan, misalnya, variabel t hanya tersedia di dalam blok if dan tidak untuk seluruh fungsi.

Juga jika Anda mendeklarasikan variabel di dalam fungsi apa pun, atau for-loop, while-loop, TypeScript beralih blok, itu akan tersedia untuk Anda hanya di dalam blok itu dan tidak ada referensi ke sana di luar blok, dan itu akan menimbulkan kesalahan jika variabel digunakan di luar blok. Inilah perbedaan utama antara variabel yang dideklarasikan kata kunci var dan let.

Mendeklarasikan variabel menggunakan const

Const berarti variabel konstan. Mereka mirip dengan variabel let, dengan satu-satunya perbedaan adalah bahwa sekali suatu nilai ditetapkan padanya, nilai tersebut tidak dapat diubah.

sintaks:

const name;

Contoh:

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

Jadi pengguna dapat menggunakan variabel const hanya jika mereka tahu bahwa mereka tidak perlu mengubah nilai yang ditetapkan padanya.

Ketik TypeScript

TypeScript adalah bahasa yang diketik dengan kuat, sedangkan javascript tidak. Variabel yang memiliki nilai yang didefinisikan sebagai string dapat diubah menjadi angka tanpa masalah apa pun Javascript. Hal yang sama tidak ditoleransi TypeScript. di TypeScript, tipe suatu variabel didefinisikan di awal saja dan selama eksekusi, tipe harus dipertahankan sama. Setiap perubahan pada variabel tersebut akan menyebabkan kesalahan waktu kompilasi selama kompilasi ke javascript.

Berikut ini adalah jenis-jenisnya :

Jumlah
String
Boolean
Apa saja
Kosong

Jumlah

Hanya membutuhkan bilangan bulat, float, pecahan, dll.

sintaks:

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

Berikut adalah beberapa metode penting yang dapat digunakan pada tipe Number:

untukDiperbaiki() – ini akan mengubah angka menjadi string dan tetap memberikan tempat desimal pada metode tersebut.

toString () – metode ini akan mengubah angka menjadi string.

Nilai dari() – metode ini akan mengembalikan nilai primitif dari angka tersebut.

kePresisi() – metode ini akan memformat angka dengan panjang tertentu.

Contoh : dengan semua metode String

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

String

String: hanya nilai string

sintaks:

let str :string = "hello world";

Berikut adalah beberapa metode penting yang dapat digunakan pada tipe String:

membagi() – metode ini akan membagi string menjadi sebuah array.
karakter() – metode ini akan memberikan karakter pertama untuk indeks yang diberikan.
Indeks() – metode ini akan memberikan posisi kemunculan pertama untuk nilai yang diberikan padanya.
menggantikan () – metode ini membutuhkan 2 string, pertama nilai yang akan dicari dalam string tersebut dan jika ada akan menggantikannya akan menjadi nilai ke-2 dan akan mengembalikan string baru.
Memangkas () – metode ini akan menghilangkan spasi putih di kedua sisi string.
substr() – metode ini akan memberikan bagian dari string yang bergantung pada posisi yang diberikan sebagai awal dan akhir.
BERGANTI() – metode ini akan memberikan bagian dari string yang bergantung pada posisi yang diberikan sebagai awal dan akhir. Karakter di posisi akhir akan dikecualikan.
keUpperCase() -akan mengubah string menjadi huruf besar
ke Huruf Kecil() – akan mengubah string menjadi huruf kecil.

Contoh:

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"

Boolean

Akan menerima nilai logika seperti benar, salah, 0, dan 1.

sintaks:

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

Apa saja

sintaks:

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

Variabel dideklarasikan menggunakan Apa pun tipe dapat mengambil variabel sebagai string, angka, array, boolean, atau batal. TypeScript tidak akan menimbulkan kesalahan waktu kompilasi; ini mirip dengan variabel yang dideklarasikan di JavaSkrip. Gunakan variabel jenis apa pun hanya jika Anda tidak yakin tentang jenis nilai yang akan dikaitkan dengan variabel tersebut.

Kosong

Tipe void sebagian besar digunakan sebagai tipe pengembalian pada fungsi yang tidak memiliki apa pun untuk dikembalikan.

sintaks:

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

TypeScript susunan

An susunan in TypeScript adalah tipe data yang dapat menyimpan beberapa nilai. Mari kita pelajari cara mendeklarasikan dan menetapkan nilai untuk operasi Array di TypeScript.

Sejak TypeScript adalah bahasa yang diketik dengan kuat, Anda harus menentukan tipe data apa yang akan digunakan dalam array. Jika tidak, array akan dianggap bertipe apa pun.

Deklarasikan dan Inisialisasi Array

sintaks:

let nameofthearray : Array<typehere>

Example

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.

Berbagai Cara untuk mengakses elemen dari Array

Untuk mendapatkan elemen dari sebuah array, nilainya dimulai dari indeks 0 hingga panjang array.

Contoh:

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

Anda juga bisa mendapatkan elemen dari array menggunakan TypeScript untuk lingkaran seperti yang ditunjukkan di bawah ini:

Menggunakan TypeScript untuk loop

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

Menggunakan loop for-in

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

Output:
2016
2017
2018
2019

Menggunakan loop for-of

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

Menggunakan loop depan

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

TypeScript Metode Array

TypeScript Objek array memiliki banyak properti dan metode yang membantu pengembang menangani array dengan mudah dan efisien. Anda bisa mendapatkan nilai properti dengan menentukan nama array.property dan output dari suatu metode dengan menentukan nama array.metode().

properti panjang

=> Jika Anda ingin mengetahui jumlah elemen dalam array, Anda dapat menggunakan properti panjang.

Revmetode lain

=> Anda dapat membalikkan urutan item dalam array menggunakan metode terbalik.

Metode pengurutan

=> Anda dapat mengurutkan item dalam array menggunakan metode pengurutan.

Metode pop

=> Anda dapat menghapus item terakhir dari array menggunakan metode pop.

Shift metode

=> Anda dapat menghapus item pertama dari array menggunakan metode shift.

Metode dorong

=> Anda dapat menambahkan nilai sebagai item terakhir dari array.

metode concat

=> Anda dapat menggabungkan dua array menjadi satu elemen array.

Contoh untuk properti panjang

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

Contoh untuk metode terbalik

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"]

Contoh untuk metode pengurutan

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"]

Contoh untuk metode pop

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

Contoh untuk metode shift

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

Contoh untuk metode push

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

Contoh untuk metode concat

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]

Kelas masuk TypeScript

TypeScript adalah superset dari JavaScript, jadi apa pun yang mungkin dilakukan di JavaScript juga bisa di TypeScript. Kelas adalah fitur baru yang ditambahkan mulai dari ES6 dan seterusnya, jadi sebelumnya JavaScript fungsionalitas tipe kelas dicoba menggunakan fungsi dengan fungsionalitas prototipe untuk menggunakan kembali kode. Dengan menggunakan kelas, Anda dapat membuat kode kita hampir mirip dengan bahasa seperti java, c#, python, dll., di mana kode dapat digunakan kembali. Dengan fitur kelas di TypeScript/JavaSkrip, itu membuat bahasa menjadi sangat kuat.

Mendefinisikan Kelas di TypeScript

Berikut adalah sintaks kelas dasar TypeScript:

class nameofclass {
     //define your properties here

    constructor() {
     // initialize your properties here
    }
 
   //define methods for class
}

Contoh: Contoh kerja di Kelas

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;
    }
}

Dalam contoh di atas, Anda memiliki kelas bernama Siswa. Ia memiliki properti umur, nama, dan roll_no.

Konstruktor di a TypeScript Kelas

Contoh kelas Siswa yang telah kita definisikan di atas, memiliki konstruktor seperti yang ditunjukkan di bawah ini:

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

Metode konstruktor memiliki parameter age, name, dan roll_no. Konstruktor akan mengurus inisialisasi properti ketika kelas dipanggil. Properti diakses menggunakan ini kata kunci. Contoh this.age untuk mengakses properti age, this.roll_no untuk mengakses roll_no, dll. Anda juga dapat memiliki konstruktor default, seperti yang ditunjukkan di bawah ini:

constructor () {}

Metode di dalam a TypeScript Kelas

Contoh kelas Students ada metode yang didefinisikan misalnya getRollNo(), getName(), getAge() yang digunakan untuk memberikan rincian properti roll_no, nama dan usia.

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

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

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

Membuat Instance Kelas di TypeScript

Contoh:

In TypeScript untuk membuat instance dari sebuah class, Anda perlu menggunakan operator new. Ketika kita membuat instance dari sebuah class menggunakan operator new, kita akan mendapatkan objek yang dapat mengakses properti dan metode dari class tersebut seperti yang ditunjukkan di bawah ini:

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

kompilasi TypeScript Kelas ke JavaNaskah

Anda dapat menggunakan perintah tsc seperti yang ditunjukkan di bawah ini untuk mengkompilasinya Javascript.

Command: tsc  Students.ts

Output dari Javascript kode pada kompilasi adalah seperti yang ditunjukkan di bawah ini:

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, Kelas diubah menjadi fungsi yang dipanggil sendiri.

Warisan Kelas

Kelas dapat diwarisi menggunakan memperpanjang kata kunci dalam TypeScript.

Sintaks Warisan Kelas:

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

}

kelas B akan dapat berbagi kelas A metode dan properti.

Berikut adalah contoh kerja kelas yang menggunakan Warisan

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

Anda memiliki dua kelas, Orang dan Siswa. Kelas Student memperluas Person, dan objek yang dibuat pada Student dapat mengakses metode dan propertinya sendiri serta kelas yang diperluas.

Sekarang mari kita tambahkan beberapa perubahan lagi pada kelas di atas.

Contoh:

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

Perubahan yang Anda tambahkan dibandingkan dengan contoh sebelumnya adalah terdapat konstruktor yang didefinisikan di kelas Siswa. Konstruktor harus mengambil parameter yang sama dengan kelas dasar dan menambahkan parameter tambahannya sendiri jika ada.

In TypeScript Anda perlu memanggil super will semua param sebagai param dasar di dalamnya. Ini harus menjadi hal pertama yang dilakukan di dalam konstruktor. Super akan mengeksekusi konstruktor kelas yang diperluas.

Akses Pengubah di TypeScript

TypeScript mendukung pengubah akses publik, pribadi, dan terlindungi ke metode dan properti Anda. Secara default, jika pengubah akses tidak diberikan, metode atau properti dianggap publik, dan mereka akan mudah diakses dari objek kelas.

Dalam hal pengubah akses pribadi, mereka tidak tersedia untuk diakses dari objek kelas dan dimaksudkan untuk digunakan di dalam kelas saja. Mereka tidak tersedia untuk kelas yang diwarisi.

Dalam hal pengubah akses yang dilindungi, mereka dimaksudkan untuk digunakan di dalam kelas dan kelas yang diwarisi dan tidak akan dapat diakses dari objek kelas.

Contoh:

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

Pribadi: properti atau metode tidak dapat diakses oleh objek kelas dan juga kelas turunannya, properti atau metode tersebut dimaksudkan untuk digunakan secara internal di dalam kelas.
Terlindung: properti dan metode juga tidak dapat diakses oleh objek yang dibuat. Mereka dapat diakses dari dalam kelas dan tersedia untuk kelas yang memperluasnya.
Publik: properti dan metode dideklarasikan tanpa kata kunci apa pun. Mereka mudah diakses menggunakan objek kelas dari luar.

Antarmuka dalam TypeScript

Salah satu fitur inti dari TypeScript adalah antarmuka. Antarmuka adalah serangkaian aturan yang ditetapkan yang perlu diimplementasikan oleh entitas yang menggunakannya. Entitas dapat berupa kelas, fungsi, atau variabel. Antarmuka dapat terdiri dari properti dan metode. Anda dapat mendefinisikan properti sebagai opsional menggunakan sintaksis “?” untuk properti atau metode tersebut. Antarmuka menambahkan pemeriksaan tipe yang kuat untuk setiap fungsi, variabel, atau kelas yang mengimplementasikan antarmuka.

Sintaks Antarmuka di TypeScript

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

Anda telah mendefinisikan antarmuka bernama Dimensi yang memiliki properti lebar dan tinggi, dan keduanya bertipe sebagai string.

Sekarang antarmuka ini dapat diimplementasikan oleh variabel, fungsi, atau kelas. Berikut adalah contoh implementasi variabel pada antarmuka Dimensi.

Contoh:

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

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

Tanda tangan dari antarmuka Dimensi memiliki lebar dan tinggi, dan keduanya wajib. Jika saat mengimplementasikan antarmuka, salah satu properti terlewatkan, atau tipenya diubah, maka akan terjadi kesalahan waktu kompilasi saat mengkompilasi kode ke javascript.

Kode di atas jika dikompilasi ke javascript akan terlihat seperti berikut:

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

Sekarang mari kita lihat cara menggunakan antarmuka dengan suatu fungsi.

Menggunakan Antarmuka pada suatu fungsi sebagai tipe pengembalian

Contoh:

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

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

Dalam contoh di atas, antarmuka Dimension diimplementasikan pada fungsi getDimension() sebagai tipe kembaliannya. Tipe kembalian getDimension() harus cocok dengan properti dan tipe yang disebutkan untuk Dimensi Antarmuka.

Kode yang dikompilasi ke Javascript akan menjadi sebagai berikut:

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

Selama kompilasi, jika tipe kembalian tidak cocok dengan antarmuka, maka akan muncul kesalahan.

Antarmuka sebagai parameter fungsi

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"

Jadi contoh di atas, Anda telah menggunakan Dimensi Antarmuka sebagai parameter fungsi getDimension(). Saat Anda memanggil fungsi tersebut, Anda perlu memastikan parameter yang diteruskan ke fungsi tersebut cocok dengan aturan Antarmuka yang ditentukan.

Kode yang dikompilasi ke Javascript akan menjadi sebagai berikut:

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

Antarmuka implementasi kelas

Untuk memanfaatkan antarmuka dengan kelas, Anda perlu menggunakan kata kunci mengimplementasikan.

Sintaks untuk Kelas yang mengimplementasikan antarmuka:

class NameofClass implements InterfaceName {
}

Contoh berikut menunjukkan cara kerja antarmuka dengan kelas.

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;
    }
}

Dalam contoh di atas, Anda telah mendefinisikan Dimensi antarmuka dengan properti lebar dan tinggi baik bertipe string dan metode yang disebut getWidth() yang memiliki nilai kembalian sebagai string.

Kode yang dikompilasi ke Javascript akan menjadi sebagai berikut:

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

Fungsi dalam TypeScript

Fungsi adalah sekumpulan instruksi yang dilakukan untuk melaksanakan suatu tugas. Di dalam Javascript, sebagian besar kode ditulis dalam bentuk fungsi dan memainkan peran utama. Di dalam TypeScript, Anda memiliki kelas, antarmuka, modul, namespace yang tersedia, namun tetap saja, fungsi memainkan peran penting. Perbedaan antara fungsi di javascript dan TypeScript fungsi adalah tipe pengembalian yang tersedia TypeScript fungsi.

JavaFungsi skrip:

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

TypeScript fungsi:

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

Pada fungsi di atas, nama fungsi ditambahkan, parameternya adalah a1, dan b1 keduanya memiliki tipe sebagai angka, dan tipe kembaliannya juga berupa angka. Jika Anda meneruskan string ke fungsi tersebut, itu akan menimbulkan kesalahan waktu kompilasi saat mengkompilasinya JavaNaskah.

Melakukan panggilan ke fungsi: tambahkan

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'.

Param a1 dan b1 adalah parameter wajib dan akan menimbulkan kesalahan jika tidak diterima dengan cara itu. Selain itu, tipe param dan tipe pengembalian sangat penting dan tidak dapat diubah setelah ditentukan.

Parameter opsional untuk suatu fungsi

Dalam javascript, semua parameter pada fungsi bersifat opsional dan dianggap tidak terdefinisi jika tidak dilewatkan. Namun tidak demikian halnya dengan TypeScript, setelah Anda menentukan param, Anda perlu mengirimkannya juga, tetapi jika Anda ingin membiarkan param apa pun opsional, Anda dapat melakukannya dengan menggunakan? terhadap nama param seperti yang ditunjukkan di bawah ini:

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.

Harap dicatat bahwa param opsional harus didefinisikan dalam suatu fungsi pada bagian terakhir saja, Anda tidak dapat menjadikan param pertama sebagai opsional dan param kedua sebagai wajib. Ketika Anda memanggil fungsi dengan satu kompiler param akan menimbulkan kesalahan. Jadi perlu untuk menjaga params opsional di akhir.

Tetapkan Nilai Default ke Params

Anda dapat menetapkan nilai default ke params seperti yang ditunjukkan di bawah ini:

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

Mirip dengan param opsional, di sini juga param yang diinisialisasi default harus disimpan di akhir suatu fungsi.

Parameter Istirahat

Anda telah melihat caranya TypeScript menangani param wajib, param opsional, dan param yang diinisialisasi nilai default. Sekarang, kita akan melihat parameter istirahat. Parameter lainnya adalah sekelompok parameter opsional yang didefinisikan bersama, dan ditentukan menggunakan tiga parameter titik (…) diikuti dengan nama param yang berupa array.

Sintaks untuk parameter Istirahat:

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

Seperti yang ditunjukkan di atas, parameter lainnya didefinisikan menggunakan (…param-name); parameter sisanya adalah array yang diawali dengan tiga titik. Array akan meneruskan semua parameter ke dalamnya. Anda dapat memanggil fungsi tersebut, seperti yang ditunjukkan pada contoh di bawah ini:

Contoh:

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

Fungsi Panah

Fungsi panah adalah salah satu fitur penting yang dirilis di ES6, dan tersedia di TypeScript juga. Sintaks fungsi panah memiliki panah gemuk di dalamnya sehingga fungsi tersebut disebut fungsi panah.

Sintaks fungsi panah:

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

Apa gunanya Fungsi Panah?

Mari kita lihat contoh untuk memahami kasus penggunaan fungsi Panah:

Contoh:

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

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

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

Anda telah membuat fungsi anonim yang memiliki properti this. Inisialisasi skor ke 0 dan metode getScore yang secara internal memiliki setTimeout, dan dalam 1 detik konsol ini.score. Nilai konsol memberikan undefinisi meskipun Anda telah menentukan dan menginisialisasi this.score. Masalahnya di sini adalah dengan this kata kunci. Fungsi di dalam setTimeout memiliki thisnya sendiri, dan mencoba merujuk skor secara internal, dan karena tidak ditentukan, ia memberikan nilai yang tidak ditentukan.

Hal yang sama dapat dilakukan dengan menggunakan fungsi Panah seperti yang ditunjukkan di bawah ini:

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

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

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

Anda telah mengubah fungsi di dalam setTimeout menjadi fungsi panah seperti yang ditunjukkan di bawah ini:

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

Fungsi panah tidak memiliki fungsi sendiri ini didefinisikan dan berbagi induknya ini, sehingga variabel yang dideklarasikan di luar mudah diakses menggunakan fungsi panah di dalam ini. Mereka berguna karena sintaksisnya yang lebih pendek serta untuk callback, event handler, fungsi pengaturan waktu di dalam, dll.

TypeScript Enum

TypeScript Enum adalah objek yang memiliki kumpulan nilai terkait yang disimpan bersama. Javascript tidak mendukung enum. Sebagian besar bahasa pemrograman 'like' Java, C, C++ mendukung TypeScript Enum dan juga tersedia dengan TypeScript juga. Enum didefinisikan menggunakan kata kunci enum.

Bagaimana cara mendeklarasikan Enum?

sintaks:

enum NameofEnum {
   value1,
   value2,
    ..
}

Contoh: Enum

enum Directions {
North,
South,
East,
West
}

Dalam contoh di atas, Anda telah mendefinisikan enum bernama Directions. Nilai yang diberikan adalah Utara, Selatan, Timur, Barat. Nilai diberi nomor mulai dari 0 untuk nilai pertama dalam enum dan selanjutnya bertambah 1 untuk nilai berikutnya.

Deklarasikan Enum dengan nilai numerik

Secara default, jika suatu enum tidak diberi nilai apa pun, maka ia akan menganggapnya sebagai angka yang dimulai dari 0. Contoh berikut menunjukkan suatu enum dengan nilai numerik.

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

Anda juga dapat menetapkan nilai awal ke enum dan nilai enum berikutnya akan mendapatkan nilai yang bertambah. Misalnya:

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

Sekarang nilai enum Utara dimulai dengan 5, sehingga Selatan akan mendapat nilai 6, Timur = 7 dan Barat = 8.

Anda juga dapat menetapkan nilai pilihan Anda alih-alih mengambil nilai default. Misalnya:

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

Bagaimana cara mengakses Enum?

Contoh berikut menunjukkan cara menggunakan Enum dalam kode Anda:

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

Kode yang dikompilasi ke javascript adalah sebagai berikut:

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

Sejak Javascript tidak mendukung enum, ini mengubah enum menjadi fungsi yang dipanggil sendiri seperti yang ditunjukkan di atas.

Deklarasikan Enum dengan nilai string

Anda dapat menetapkan nilai string pilihan Anda, seperti yang ditunjukkan pada contoh di bawah ini:

Contoh:

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

Kode yang dikompilasi ke javascript adalah sebagai berikut:

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

Apa saja Modul yang ada di dalamnya TypeScript?

File yang dibuat di TypeScript memiliki akses global, artinya variabel yang dideklarasikan dalam satu file mudah diakses di file lain. Sifat global ini dapat menyebabkan konflik kode dan dapat menyebabkan masalah pada eksekusi saat run-time. Anda memiliki fungsionalitas modul ekspor dan impor yang dapat digunakan untuk menghindari variabel global, konflik fungsi. Fitur ini tersedia di JavaSkrip dengan rilis ES6 dan juga didukung di TypeScript.

Mengapa Anda memerlukan Modul di TypeScript?

Contoh berikut menunjukkan masalah tanpa modul:

Contoh tes1.ts

let age : number = 25;

Anda telah menentukan usia variabel dengan tipe nomor di test1.ts.

Contoh tes2.ts

Dalam file test2.ts Anda dapat dengan mudah mengakses variabel usia didefinisikan di test1.ts dan juga memodifikasinya seperti yang ditunjukkan di bawah ini:

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

Jadi kasus di atas dapat menimbulkan banyak masalah karena variabel tersedia secara global dan dapat dimodifikasi.

Dengan Modul, kode yang ditulis tetap bersifat lokal pada file dan tidak dapat diakses di luarnya. Untuk mengakses apa pun dari file tersebut, file tersebut harus diekspor menggunakan kata kunci ekspor. It digunakan ketika Anda ingin variabel, kelas, fungsi, atau antarmuka digunakan di file lain. impor digunakan ketika Anda ingin mengakses variabel, kelas, atau antarmuka atau fungsi yang diekspor juga. Dengan melakukan hal ini, kode yang ditulis tetap utuh di dalam file, dan bahkan jika Anda mendefinisikan nama variabel yang sama, mereka tidak tercampur dan berperilaku lokal pada file tempat mereka dideklarasikan.

Menggunakan Ekspor dan Impor

Ada banyak cara untuk mengekspor dan mengimpor. Jadi di sini akan membahas sintaksis yang paling banyak digunakan.

Sintaks untuk impor dan ekspor 1:

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"

Berikut adalah contoh kerja menggunakan ekspor dan impor.

Contoh:

tes1.ts

export let age: number = 25;

Kata kunci ekspor digunakan untuk membagikan variabel usia di file lain.

tes2.ts

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

Kata kunci impor digunakan untuk mengakses usia variabel, dan Anda perlu menentukan lokasi file seperti yang ditunjukkan di atas.

Sintaks untuk impor dan ekspor 2:

Ada cara lain untuk mengekspor dan mengimpor dan sintaksnya adalah seperti yang ditunjukkan di bawah ini:

export = classname;

import classname = require(“file path of modulename”)

Saat Anda menggunakan ekspor = untuk mengekspor modul Anda, impor harus menggunakan require(“jalur file nama modul”) untuk mengimpornya.

Berikut adalah contoh kerja yang menunjukkan kasus di atas:

Pelanggan.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;

tesPelanggan.ts

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

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

Pemuat Modul

Modul tidak dapat bekerja sendiri, jadi Anda memerlukan pemuat modul untuk menemukan dependensi impor seperti yang Anda lihat di TypeScript contoh yang ditunjukkan di atas. Pemuat modul yang tersedia adalah CommonJS untuk nodejs dan Require.js untuk dijalankan di browser.

Untuk mengkompilasi kode menggunakan modul CommonJS gunakan perintah berikut:

tsc --module commonjs testCustomer.ts

Untuk mengkompilasi kode menggunakan modul Requirejs gunakan perintah berikut:

tsc --module amd testCustomer.ts

File dependen akan dikonversi ke file js dengan perintah di atas.

Contoh testCustomer.ts ke testCustomer.js menggunakan Requirejs

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

Contoh Customer.ts ke Customer.js menggunakan Requirejs

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

Untuk mengujinya menggunakan require.js, Anda perlu membuat file bernama main.js, yang memiliki referensi ke dependensi seperti yang ditunjukkan.

Berikut struktur foldernya:

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

main.js

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

tes.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>

Ruang nama di TypeScript

Namespace pada dasarnya memiliki kumpulan kelas, antarmuka, variabel, fungsi bersama-sama dalam satu file.

Sintaks Ruang Nama

namespace name{

export class {
}

export interface {
}

export const constname;

}

Kode terkait tersedia dalam satu namespace.

Contoh kerja namespace: 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;
        }
    }
}

Nama namespacenya adalah Pengaturan Siswa, Anda telah menambahkan antarmuka StudDetails, fungsi addSpace dan kelas bernama Student.

Mengakses Ruang Nama

Berikut adalah kode tempat Anda menggunakan namespace Pengaturan Siswa.

tesStudentSetup.ts

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

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

Kelas, antarmuka, fungsi yang tersedia di dalam namespace harus dirujuk menggunakan nama contoh namespace StudentSetup.addSpace untuk mengakses fungsi tersebut, Pengaturan Siswa. Siswa untuk mengakses kelas.

Anda dapat mengkompilasi kedua file menjadi satu js seperti yang ditunjukkan di bawah ini:

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

Periksa output di command prompt menggunakan perintah di bawah ini:

node namespace.js

Ini akan menampilkan output sebagai:

The name is: H a r r y

Deklarasi Ambien di TypeScript

TypeScript memungkinkan Anda menggunakan file javascript pihak ketiga menggunakan deklarasi ambient. Keuntungan dari fitur ini adalah Anda tidak perlu menulis ulang dan tetap menggunakan semua fitur pustaka di TypeScript.

Sintaks Sekitar

Untuk mendeklarasikan modul ambient:

declare module moduleName {
   //code here
}

File ambient harus disimpan sebagai:

filename.d.ts

Untuk menggunakan file nama file.d.ts di .ts Anda, Anda perlu merujuknya sebagai:

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

Deklarasi tipe ambient di TypeScript akan memiliki referensi ke pustaka pihak ketiga dan akan mendeklarasikan ulang fungsi yang diperlukan dengan tipenya sendiri. Misalnya, anggap Anda memiliki pustaka javascript kecil, seperti yang ditunjukkan di bawah ini:

Pihak ketiga JavaBerkas skrip: testString.js

Contoh: tesString.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();
    }
};

Anda memiliki objek bernama StringChecks yang memiliki fungsi seperti isString, convertToUpperCase, convertToLowerCase, dan converToStringBold.

Membuat Modul Ambient di TypeScript

Sekarang akan membuat modul ambient yang akan memiliki referensi ke fungsi js di atas dan juga menambahkan pemeriksaan tipe sesuai kebutuhan kita.

Nama file : 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;

Anda harus mendefinisikan nama modul sebagai TestString dan mengekspor antarmuka StringsFunc.

isString(str: string): boolean

=> Ini akan mengambil param sebagai string dan tipe pengembaliannya akan menjadi boolean. Saat menggunakan file .ts Anda jika Anda meneruskan param sebagai angka atau apa pun selain string, itu akan memberi Anda kesalahan tipe kompilasi.

convertToUpperCase(str:string): string

=> Ini akan mengambil argumen sebagai string dan mengembalikan string. Hal yang sama berlaku convertToLowerCase(str: string)
: rangkaian; Dan convertToStringBold(str: string): string
;

Karena di file javascript Anda memiliki nama objek sebagai StringChecks, akhirnya kita perlu merujuk hal yang sama di file .d.ts yang dilakukan sebagai:

declare var StringChecks: TestString.StringsFunc;

Menggunakan modul Ambient di TypeScript

Sekarang inilah file test.ts yang akan menggunakan file ambient tstring.d.ts

Contoh: tes.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);

Menyusun TypeScript tsc test.ts ke test.js

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

Sekarang Anda dapat menggunakan test.js dalam file html dan juga file perpustakaan testString.js

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

Ini adalah keluaran yang terlihat di konsol:

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

TypeScript Sejarah

Mari kita lihat landmark penting dari sejarah TypeScript:

Setelah dua tahun pengembangan internal di Microsoft. TypeScript 0.9, dirilis pada tahun 2013
Dukungan tambahan untuk obat generik TypeScript 1.0 dirilis pada Build 2014
Pada bulan Juli 2014, yang baru TypeScript kompilator yang lima kali lebih cepat dari versi sebelumnya.
Pada bulan Juli 2015, dukungan untuk modul ES6, kata kunci namespace, untuk, dukungan, dekorator.
Pada bulan November 2016, fitur tambahan seperti tipe kunci dan pencarian tipe yang dipetakan, dan sisanya.
Pada tanggal 27 Maret 2018, tipe kondisional, kunci yang ditingkatkan dengan dukungan tipe persimpangan ditambahkan di TypeScript.

Mengapa menggunakan TypeScript?

Di sini, ada kelebihan/manfaat penting dalam penggunaan TypeScript

Proyek besar dan kompleks di JavaSkrip sulit dikodekan dan dipelihara.
TypeScript banyak membantu dalam pengorganisasian kode namun menghilangkan sebagian besar kesalahan selama kompilasi.
TypeScript mendukung perpustakaan JS & Dokumentasi API
Ini adalah bahasa skrip yang diketik secara opsional
TypeScript Kode dapat diubah menjadi biasa JavaKode Skrip
Penataan kode yang lebih baik dan teknik pemrograman berorientasi objek
Memungkinkan dukungan alat waktu pengembangan yang lebih baik
Ini dapat memperluas bahasa di luar dekorator standar, async/await

Siapa yang menggunakan? TypeScript?

Berikut adalah beberapa aplikasi yang paling umum TypeScript:

Tim sudut menggunakan TypeScript.
Instalasi NodeJS dan NPM
TypeScript Instalasi
Menyusun TypeScript kode ke Javascript
Jalankan Kode menggunakan Nodejs
Eksekusi Javascript di Peramban
Menyusun TypeScript kode ke Javascript menggunakan versi EcmaScript
Anda dapat dengan mudah mengkompilasi kode yang ditulis TypeScript untuk JavaSkrip menggunakan NodeJS.
Jadi untuk diajak bekerja sama TypeScript Anda harus mengunduh dan menginstal NodeJS terlebih dahulu.

Ringkasan

TypeScript adalah superset dari JavaNaskah. TypeScript adalah bahasa pemrograman berorientasi objek murni yang mendukung kelas, antarmuka, dll.
TypeScript mendukung semua fitur Ecmascript yang dirilis, dan pengembang dapat menggunakannya saat membuat kode.
Variabel digunakan untuk menyimpan nilai, dan nilai dapat berupa string, angka, Boolean, atau ekspresi.
In TypeScript, tipe suatu variabel didefinisikan di awal saja dan selama eksekusi, tipe harus dipertahankan sama. Setiap perubahan pada variabel tersebut akan menyebabkan kesalahan waktu kompilasi selama kompilasi ke javascript.
Sebuah Array di TypeScript adalah tipe data di mana Anda dapat menyimpan banyak nilai.
Kelas adalah fitur baru yang ditambahkan mulai dari ES6 dan seterusnya, jadi sebelumnya JavaSkrip fungsionalitas tipe kelas dicoba menggunakan fungsi dengan fungsionalitas prototipe untuk menggunakan kembali kode.
TypeScript mendukung pengubah akses publik, pribadi, dan terlindungi ke metode dan properti Anda.
Salah satu fitur inti dari TypeScript adalah antarmuka. Antarmuka adalah seperangkat aturan yang ditentukan yang perlu diterapkan oleh entitas yang menggunakannya.
Fungsi adalah sekumpulan instruksi yang dilakukan untuk melaksanakan suatu tugas.
TypeScript Enum adalah objek yang memiliki kumpulan nilai terkait yang disimpan bersama.

Anda mungkin ingin:

Apa itu TypeScript?

Cara Mengunduh dan Menginstal TypeScript

Menyusun TypeScript kode ke Javascript

Eksekusi Javascript menggunakan Nodejs

Menyusun TypeScript kode ke Javascript menggunakan versi EcmaScript

ARTIKEL TERKAIT

Variabel dalam TypeScript

Mendeklarasikan variabel menggunakan var

Mendeklarasikan variabel menggunakan let

Mendeklarasikan variabel menggunakan const

Ketik TypeScript

Jumlah

String

Boolean

Apa saja

Kosong

TypeScript susunan

Deklarasikan dan Inisialisasi Array

Berbagai Cara untuk mengakses elemen dari Array

Menggunakan TypeScript untuk loop

Menggunakan loop for-in

Menggunakan loop for-of

Menggunakan loop depan

TypeScript Metode Array

properti panjang

Revmetode lain

Metode pengurutan

Metode pop

Shift metode

Metode dorong

metode concat

Contoh untuk properti panjang

Contoh untuk metode terbalik

Contoh untuk metode pengurutan

Contoh untuk metode pop

Contoh untuk metode shift

Contoh untuk metode push

Contoh untuk metode concat

Kelas masuk TypeScript

Mendefinisikan Kelas di TypeScript

Contoh: Contoh kerja di Kelas

Konstruktor di a TypeScript Kelas

Metode di dalam a TypeScript Kelas

Membuat Instance Kelas di TypeScript

kompilasi TypeScript Kelas ke JavaNaskah

Warisan Kelas

Sintaks Warisan Kelas:

Akses Pengubah di TypeScript

Antarmuka dalam TypeScript

Sintaks Antarmuka di TypeScript

Menggunakan Antarmuka pada suatu fungsi sebagai tipe pengembalian

Antarmuka sebagai parameter fungsi

Antarmuka implementasi kelas

Fungsi dalam TypeScript

Melakukan panggilan ke fungsi: tambahkan

Parameter opsional untuk suatu fungsi

Tetapkan Nilai Default ke Params

Parameter Istirahat

Fungsi Panah

Apa gunanya Fungsi Panah?

TypeScript Enum

Bagaimana cara mendeklarasikan Enum?

Deklarasikan Enum dengan nilai numerik

Bagaimana cara mengakses Enum?

Deklarasikan Enum dengan nilai string

Apa saja Modul yang ada di dalamnya TypeScript?

Mengapa Anda memerlukan Modul di TypeScript?

Menggunakan Ekspor dan Impor

Sintaks untuk impor dan ekspor 1:

Sintaks untuk impor dan ekspor 2:

Pemuat Modul

Contoh testCustomer.ts ke testCustomer.js menggunakan Requirejs

Contoh Customer.ts ke Customer.js menggunakan Requirejs

Ruang nama di TypeScript

Sintaks Ruang Nama

Mengakses Ruang Nama

Deklarasi Ambien di TypeScript

Sintaks Sekitar

Untuk mendeklarasikan modul ambient:

File ambient harus disimpan sebagai: