TypeScript Tutorial: Apa itu Interface, Enum, dan Array?

Apa itu TypeScript?

TypeScript adalah superset dari JavaNaskah. TypeScript adalah bahasa pemrograman berorientasi objek yang mendukung kelas, antarmuka, dan banyak lagi. Ini adalah bahasa sumber terbuka yang dikembangkan oleh Microsoft yang mengkompilasi kode secara statis JavaSkrip. Dapat dengan mudah dijalankan di browser atau di Nodejs.

Semua fitur terbaru yang dirilis untuk ECMAScript didukung TypeScript, dan sebagai tambahan TypeScript memiliki fitur berorientasi objek tersendiri seperti antarmuka, deklarasi ambien, dan pewarisan kelas, yang membantu dalam pengembangan.ping sebuah aplikasi besar yang akan sulit dibangun dengan cara lain. JavaNaskah.

Hubungan tersebut bersifat satu arah. Setiap hal yang valid JavaFile skrip sudah valid. TypeScriptNamun, kebalikannya tidak benar, karena anotasi tipe hanya ada di TypeScript dan dihapus selama proses kompilasi.

Mengapa menggunakan TypeScript?

Berikut adalah manfaat penting dari penggunaan TypeScript:

• Proyek-proyek besar dan kompleks di JavaSkrip sulit dikodekan dan dipelihara.
• TypeScript sangat membantu dalam pengorganisasian kode, dan menghilangkan sebagian besar kesalahan selama kompilasi daripada saat runtime.
• TypeScript Mendukung pustaka JS dan dokumentasi API.
• Ini adalah bahasa skrip dengan tipe opsional, sehingga tipe dapat diadopsi secara bertahap.
• TypeScript kode dapat dikonversi menjadi teks biasa JavaKode skrip untuk semua target browser.
• Ini memberikan struktur kode yang lebih baik dan teknik pemrograman berorientasi objek.
• Hal ini memungkinkan dukungan alat yang lebih baik selama pengembangan, termasuk pelengkapan otomatis dan refactoring yang aman.
• Hal ini dapat memperluas kemampuan bahasa di luar standar, dengan fitur-fitur seperti decorator.

Keuntungan praktis terbesar adalah dukungan editor. Karena kompiler mengetahui bentuk setiap nilai, editor dapat mengganti nama properti di seluruh proyek dan melaporkan setiap tempat yang tidak lagi sesuai.

TypeScript Sejarah

Mari kita lihat tonggak-tonggak penting dari sejarah TypeScript:

• Setelah dua tahun pengembangan internal di Microsoft, TypeScript Versi 0.9 dirilis pada tahun 2013.
• TypeScript Versi 1.0, dengan dukungan tambahan untuk generik, dirilis di Build 2014.
• Pada bulan Juli 2014, yang baru TypeScript Compiler baru pun tiba, yang lima kali lebih cepat dari versi sebelumnya.
• Pada Juli 2015, dukungan ditambahkan untuk modul ES6, kata kunci namespace, for…of, dan decorator.
• Pada bulan November 2016, tipe yang dipetakan, tipe kunci dan pencarian, serta sisa dan penyebaran objek ditambahkan.
• Pada tanggal 27 Maret 2018, tipe kondisional dan keyof yang lebih baik dengan tipe irisan ditambahkan.
• TypeScript Versi 5.0, yang dirilis pada Maret 2023, memodernisasi para dekorator dan mengurangi ukuran paket.
• TypeScript Versi 6.0 dirilis pada Maret 2026 sebagai rilis final yang dibangun berdasarkan JavaKode sumber skrip.
• TypeScript Versi 7.0 memindahkan kompiler ke implementasi Go asli, yang Microsoft dilaporkan sekitar sepuluh kali lebih cepat daripada versi 6.0.

Siapa yang menggunakan? TypeScript?

TypeScript Ini bukan lagi pilihan khusus. Ini menjadi dasar dari beberapa alat front-end dan back-end yang paling banyak digunakan, dan daftar di bawah ini menunjukkan di mana seorang pemula kemungkinan besar akan menemukannya.

• Sudut: Kerangka kerja Angular ditulis dalam TypeScript, dan kode aplikasi juga diharapkan ditulis di dalamnya.
• Proyek React dan Vue: Kedua ekosistem tersebut mengirimkan secara resmi. TypeScript template, dan sebagian besar starter modern mengaktifkannya secara default.
• Backend Node.js: Kerangka kerja server seperti NestJS dibangun di sekitar TypeScript kelas dan dekorator.
• Alat bantu editor: Visual Studio Code itu sendiri merupakan sesuatu yang besar. TypeScript basis kode, itulah sebabnya dukungan bahasanya sangat lengkap.
• Antarmuka pengguna (front end) perusahaan besar: Tim yang bekerja dengan banyak kontributor mengadopsinya untuk mendeteksi kesalahan integrasi sebelum penerapan.

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 untuk sistem operasi Anda. Instruksi detail tersedia dalam panduan di Cara mengunduh dan menginstal Node.js.

Langkah 2) Periksa versi Nodejs dan npm

Untuk memeriksa apakah Nodejs dan npm sudah terinstal, periksa versinya di command prompt Anda.

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

D:\typeproject>npm --version
10.9.2

Semua rilis Node LTS saat ini dapat digunakan. TypeScript Compiler itu sendiri hanya membutuhkan versi Node yang didukung untuk menjalankannya.

Langkah 3) TypeScript Instalasi

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

npm init

Langkah 4) Mulai Instalasi

Ini akan membuat file package.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 menggunakan TypeScript TSC perintah dari direktori mana pun, karena diinstal secara global. Jika Anda tidak ingin menginstal TypeScript Secara global, gunakan perintah di bawah ini:

npm install --save-dev typescript

Buat folder src\ di direktori proyek Anda, dan di dalam src\ buatlah 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 Jika diinstal secara global, gunakan perintah di bawah ini:

tsc test.ts

If TypeScript Jika terinstal secara lokal di proyek Anda, Anda perlu menggunakan jalur tersebut. TypeScript dari node_modules, seperti yang ditunjukkan, atau jalankan melalui npx:

node_modules\typescript\bin\tsc test.ts

OR

npx tsc test.ts

Perintah di atas akan membuat file test.js yang berisi kode yang telah dikompilasi menjadi JavaNaskah.

Contoh : tes.js

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

Eksekusi Javascript menggunakan Nodejs

Sekarang kita akan menjalankan test.js di Nodejs sebagai berikut:

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

Nilai yang diteruskan ke console.log akan ditampilkan saat test.js dijalankan.

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 telah dirilis, dan pengembang dapat menggunakannya saat melakukan pengkodean. Namun, tidak semua fitur baru didukung pada browser lama, jadi Anda mungkin perlu mengkompilasi ke versi ECMAScript yang lebih lama. TypeScript menyediakan opsi kompiler yang melakukan hal itu.

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 untuk kompiler klasik. Jika Anda ingin mengubahnya, Anda dapat menggunakan perintah di atas.

Saat ini kami akan menggunakan ES6 sebagai target:

tsc --target ES6  test.ts

tes.ts ke tes.js

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

addnumbers(10, 20);

Kode tersebut tetap seperti semula, karena fungsi panah yang Anda gunakan adalah fitur ES6 dan tidak berubah saat dikompilasi ke ES6.

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

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

Jadi di sini, tanda panah tebal 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 JavaNaskahJadi, mari kita pelajari cara mendeklarasikan dan menetapkan nilai pada variabel. TypeScript.

Variabel tidak dapat digunakan dalam kode tanpa didefinisikan terlebih dahulu. Untuk mendeklarasikan variabel, Anda dapat menggunakan

adalah kata kunci,

membiarkan kata kunci

const kata kunci

Bekerja dengan variabel di TypeScript mirip dengan JavaSkrip, dan pengguna yang familiar dengan JavaScript akan menganggapnya sangat mudah. ​​Dalam kode modern, membiarkan ke const lebih disukai daripada adalah, karena cakupan bloknya mencegah seluruh kelas bug.

Mendeklarasikan variabel menggunakan var

sintaks:

var firstname = "Roy";

Mari kita lihat beberapa di antaranya. TypeScript Contoh-contoh untuk memahami cara kerja kata kunci `var` dan juga cakupan variabel yang dideklarasikan menggunakan kata kunci tersebut. adalah kata kunci.

Contoh 1:

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

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

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

Contoh 2:

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

Contoh 3:

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

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

Mendeklarasikan variabel menggunakan let

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

sintaks:

let name = "Roy";

Bekerjanya membiarkan variabel hampir sama dengan adalahNamun dengan satu perbedaan penting, yang ditunjukkan oleh contoh di bawah ini.

Contoh:

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

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

Atas TypeScript Contoh tersebut menimbulkan kesalahan, tetapi kode yang sama akan berfungsi dengan baik. adalah kata kunci. Variabel dideklarasikan menggunakan membiarkan Variabel `t` hanya tersedia di dalam blok tempat variabel tersebut dideklarasikan. Dalam contoh ini, `t` hanya ada di dalam blok `if`, bukan di seluruh fungsi.

Hal yang sama berlaku di dalam fungsi apa pun, perulangan for, perulangan while, atau blok switch. Variabel let hanya tersedia di dalam blok tersebut, dan merujuknya di luar blok akan menimbulkan kesalahan. Inilah perbedaan utama antara var dan let.

Mendeklarasikan variabel menggunakan const

Const berarti variabel konstan. Variabel ini mirip dengan variabel let, dengan perbedaan bahwa setelah suatu nilai ditetapkan, nilainya tidak dapat diubah. Oleh karena itu, deklarasi const harus diinisialisasi pada baris yang sama.

sintaks:

const name = "Roy";

Contoh:

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

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

Jadi gunakan `const` setiap kali Anda tahu bahwa nilai yang ditetapkan tidak akan ditetapkan ulang. Perhatikan bahwa `const` mencegah penetapan ulang pengikatan, bukan modifikasi objek yang ditunjuknya.

Ketik TypeScript

TypeScript adalah bahasa yang bertipe kuat, sedangkan JavaSkrip tidak demikian. Variabel yang nilainya didefinisikan sebagai string dapat diubah menjadi angka tanpa masalah apa pun. JavaNaskah. Hal yang sama tidak ditoleransi di TypeScript. di TypeScriptTipe suatu variabel didefinisikan di awal, dan selama eksekusi variabel tersebut harus mempertahankan tipe tersebut. Setiap perubahan akan menyebabkan kesalahan kompilasi selama proses kompilasi. JavaNaskah.

Berikut ini adalah tipe-tipe dasarnya:

Jumlah

Hanya menerima bilangan bulat, bilangan pecahan, angka desimal, dan nilai numerik serupa.

sintaks:

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

Berikut beberapa metode penting yang dapat digunakan pada tipe data angka:

untukDiperbaiki() – ini akan mengubah angka menjadi string dan mempertahankan jumlah desimal yang diberikan ke 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 angka

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 beberapa metode penting yang dapat digunakan pada tipe data string:

• membagi() – metode ini akan membagi string menjadi sebuah array.
• karakter() – metode ini akan memberikan karakter pada indeks yang diberikan.
• Indeks() – metode ini akan memberikan posisi kemunculan pertama dari nilai yang diberikan kepadanya.
• menggantikan() – metode ini menerima 2 string. Metode ini mencari nilai pertama dalam string dan, jika ada, menggantinya dengan nilai kedua, menghasilkan string baru.
• memangkas() – metode ini akan menghapus spasi kosong dari kedua sisi string.
• substr() – metode ini akan memberikan sebagian dari string, tergantung pada posisi awal dan panjang yang diberikan.
• BERGANTI() – metode ini akan memberikan sebagian dari string, tergantung pada posisi awal dan akhir. Karakter pada posisi akhir tidak akan disertakan.
• 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 if the value does not exist
_str.replace("Type", "Coffee"); // "Coffeescript"
_str.trim();                    // "Typescript"
_str.substr(4, _str.length);   // "script"
_str.substring(4, 10);         // "script"
_str.toUpperCase();             // "TYPESCRIPT"
_str.toLowerCase();             // "typescript"

Boolean

Tipe data boolean hanya menerima nilai logis true dan false. Tidak seperti tipe data biasa. JavaDalam skrip, angka 0 dan 1 tidak diterima karena termasuk tipe angka.

sintaks:

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

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

Apa saja

sintaks:

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

Variabel dideklarasikan menggunakan Apa pun Tipe data dapat berisi string, angka, array, boolean, atau void. TypeScript tidak akan menimbulkan kesalahan kompilasi, yang mirip dengan variabel di JavaSkrip. Gunakan tipe apa pun hanya jika Anda tidak yakin tentang tipe nilai yang akan dikaitkan dengan variabel tersebut, karena ini akan menonaktifkan semua pengecekan pada nilai tersebut.

Kosong

Tipe void umumnya digunakan sebagai tipe kembalian dari fungsi yang tidak mengembalikan apa pun.

sintaks:

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

TypeScript susunan

An susunan in TypeScript adalah tipe data di mana Anda dapat menyimpan banyak nilai. Mari kita pelajari cara mendeklarasikan dan menetapkan nilai untuk operasi array di TypeScript.

Sejak TypeScript Karena ini adalah bahasa pemrograman yang sangat ketat dalam hal tipe data, Anda harus menyatakan tipe data dari nilai-nilai dalam sebuah array. Jika tidak, array tersebut akan diperlakukan sebagai tipe data 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 with all numbers

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

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

Berbagai Cara untuk mengakses elemen dari Array

Untuk mendapatkan elemen dari sebuah array, nilai-nilai dimulai dari indeks 0 hingga panjang array dikurangi satu.

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

Anda juga bisa mendapatkan elemen dari sebuah 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]);
}

Keluaran:

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

Keluaran:

2016
2017
2018
2019

Menggunakan loop for-of

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

Keluaran:

2016
2017
2018
2019

Menggunakan perulangan forEach

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

Keluaran:

2016
2017
2018
2019

TypeScript Metode Array

The TypeScript Objek array memiliki banyak properti dan metode yang membantu pengembang menangani array dengan mudah dan efisien. Anda dapat memperoleh nilai suatu properti dengan menentukan arrayname.property, dan hasil dari suatu metode dengan menentukan arrayname.method().

Contoh untuk properti panjang

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

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

Contoh untuk metode terbalik

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

Contoh untuk metode pengurutan

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

Contoh untuk metode pop

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

Contoh untuk metode shift

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

Contoh untuk metode push

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

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 JavaSkrip, jadi apa pun yang memungkinkan di JavaScript juga bisa di TypeScript. Class adalah fitur yang ditambahkan mulai dari ES6 dan seterusnya. Sebelumnya di JavaFungsionalitas mirip kelas dalam skrip dicapai dengan menggunakan fungsi dengan metode prototipe untuk menggunakan kembali kode. Dengan menggunakan kelas, kode Anda dapat mendekati bahasa seperti... Java, C#, dan Python, di mana kode mudah digunakan kembali.

Mendefinisikan Kelas di TypeScript

Berikut adalah sintaks kelas dasar di 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;
    }
}

Pada contoh di atas, Anda memiliki kelas bernama Students. Kelas ini memiliki properti age, name, dan roll_no.

Konstruktor di a TypeScript Kelas

Kelas Students yang didefinisikan 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 usia, nama, dan nomor urut. Konstruktor bertugas menginisialisasi properti saat kelas diinstansiasi. Properti diakses menggunakan ini kata kunci, misalnya this.age untuk mengakses usia dan this.roll_no untuk mengakses nomor urut. Anda juga dapat memiliki konstruktor default, seperti yang ditunjukkan di bawah ini:

constructor () {}

Metode di dalam a TypeScript Kelas

Di dalam kelas Students terdapat metode-metode yang didefinisikan, misalnya getRollNo(), getName(), dan getAge(), yang mengembalikan nilai dari properti roll_no, name, dan age.

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

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

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

Membuat Instance dari sebuah Kelas di TypeScript

In TypeScriptUntuk membuat instance dari sebuah kelas, Anda menggunakan operator `new`. Saat Anda membuat instance dengan `new`, Anda akan mendapatkan objek yang dapat mengakses properti dan metode kelas 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

Menyusun sebuah TypeScript Kelas ke JavaNaskah

Anda dapat menggunakan perintah tsc seperti yang ditunjukkan di bawah ini untuk mengkompilasi ke JavaNaskah.

Command: tsc  Students.ts

Output dari JavaKode skrip setelah 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 JavaDalam skrip, kelas tersebut diubah menjadi fungsi yang dipanggil sendiri.

Warisan Kelas

Kelas dapat diwarisi menggunakan Meluas 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 kelas yang menggunakan pewarisan:

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, Person dan Student. Student mewarisi Person, dan objek yang dibuat dari Student dapat mengakses metode dan propertinya sendiri serta metode dan properti dari kelas yang diwarisinya.

Sekarang mari kita tambahkan beberapa perubahan 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);
        this.tmarks = tmarks; // the derived property must be assigned too
    }
    getMarks(): number {
        return this.tmarks;
    }

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

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

Perubahan dibandingkan dengan contoh sebelumnya adalah adanya konstruktor yang didefinisikan dalam kelas Student. Konstruktor tersebut menerima parameter yang sama dengan kelas dasar, ditambah parameter tambahan apa pun yang dimilikinya sendiri.

In TypeScript Anda perlu memanggil `super` dengan semua parameter kelas dasar. Ini harus menjadi pernyataan pertama di dalam konstruktor, karena `super` mengeksekusi konstruktor kelas turunan. Setiap properti yang dideklarasikan oleh kelas turunan, seperti `tmarks`, kemudian harus diberi nilai secara eksplisit, jika tidak, `getMarks` akan mengembalikan `undefined`.

Akses Pengubah di TypeScript

TypeScript Mendukung pengubah akses public, private, dan protected pada metode dan properti Anda. Secara default, jika tidak ada pengubah akses yang diberikan, metode atau properti dianggap public dan mudah diakses dari objek kelas.

Dalam kasus pengubah akses privat, anggota tidak tersedia dari objek kelas dan dimaksudkan untuk digunakan hanya di dalam kelas. Anggota tersebut tidak tersedia untuk kelas yang diwariskan.

Dalam kasus pengubah akses terlindungi, anggota dimaksudkan untuk digunakan di dalam kelas dan kelas yang diwariskan, dan tidak dapat diakses dari objek kelas tersebut.

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

Antarmuka dalam TypeScript

Salah satu fitur inti dari TypeScript Salah satu hal yang terkait dengan antarmuka adalah aturan yang harus diimplementasikan oleh entitas yang menggunakannya. Entitas tersebut dapat berupa kelas, fungsi, atau variabel. Antarmuka dapat terdiri dari properti dan metode. Anda dapat menandai properti atau metode sebagai opsional menggunakan sintaks "?". Antarmuka menambahkan pemeriksaan tipe yang kuat untuk setiap fungsi, variabel, atau kelas yang mengimplementasikannya.

Sintaks Antarmuka di TypeScript

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

Anda telah mendefinisikan sebuah antarmuka bernama Dimension yang memiliki properti width dan height, keduanya bertipe string.

Antarmuka ini sekarang dapat diimplementasikan oleh variabel, fungsi, atau kelas. Berikut adalah contoh variabel yang mengimplementasikan antarmuka Dimension.

Contoh:

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

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

Tanda tangan antarmuka Dimension memiliki lebar dan tinggi, dan keduanya wajib. Jika ada properti yang hilang, atau tipe diubah, akan muncul kesalahan kompilasi saat mengkompilasi kode. JavaNaskah.

Kode di atas, ketika dikompilasi menjadi JavaSkripnya terlihat seperti berikut:

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

Sekarang mari kita lihat cara menggunakan antarmuka dengan suatu fungsi.

Menggunakan antarmuka pada fungsi sebagai tipe kembalian.

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

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

Pada contoh di atas, antarmuka Dimension digunakan sebagai tipe kembalian dari fungsi getDimension(). Nilai kembalian harus sesuai dengan properti dan tipe yang dideklarasikan dalam antarmuka.

yang dikompilasi JavaKode skripnya akan sebagai berikut:

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

Selama proses kompilasi, jika tipe nilai kembalian tidak sesuai 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"}); // "300px-250px"

Pada contoh di atas, Anda telah menggunakan antarmuka Dimension sebagai parameter untuk fungsi getDimension(). Saat Anda memanggil fungsi tersebut, parameter yang diteruskan ke fungsi tersebut harus sesuai dengan aturan yang didefinisikan oleh antarmuka.

yang dikompilasi JavaKode skripnya akan sebagai berikut:

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

Kelas yang mengimplementasikan sebuah Antarmuka

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

Sintaks untuk kelas yang mengimplementasikan sebuah antarmuka:

class NameofClass implements InterfaceName {
}

Contoh berikut menunjukkan antarmuka yang bekerja dengan sebuah 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;
    }
}

Pada contoh di atas, Anda telah mendefinisikan antarmuka Dimension dengan properti width dan height, keduanya bertipe string, dan sebuah metode bernama getWidth() yang mengembalikan sebuah string.

yang dikompilasi JavaKode skripnya akan 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 serangkaian instruksi yang dijalankan untuk melaksanakan suatu tugas. Dalam JavaDalam skrip, sebagian besar kode ditulis dalam bentuk fungsi dan fungsi-fungsi tersebut memainkan peran utama. Dalam TypeScript Anda memiliki kelas, antarmuka, modul, dan namespace yang tersedia, tetapi fungsi tetap memainkan peran penting. Perbedaan antara fungsi dalam JavaNaskah dan TypeScript apakah tipe parameter dan nilai kembalian tersedia dengan a 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 fungsinya adalah add, parameternya adalah a1 ke b1, keduanya bertipe angka, dan tipe kembaliannya juga berupa angka. Jika Anda memberikan string ke fungsi tersebut, akan muncul kesalahan kompilasi saat mengkompilasi ke JavaNaskah.

Melakukan panggilan ke fungsi: tambah

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

Parameternya a1 ke b1 Parameter-parameter tersebut wajib diisi dan akan menyebabkan kesalahan jika tidak diberikan. Tipe parameter dan tipe nilai kembalian sama pentingnya dan tidak dapat diubah setelah didefinisikan.

Parameter opsional untuk suatu fungsi

In JavaDalam skrip, semua parameter fungsi bersifat opsional dan dianggap tidak terdefinisi jika tidak diberikan. Hal yang sama tidak berlaku dalam TypeScriptSetelah Anda menentukan parameter, Anda harus menyediakannya. Jika Anda ingin suatu parameter bersifat opsional, tambahkan tanda tanya setelah nama parameter, seperti yang ditunjukkan di bawah ini:

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

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

Harap dicatat bahwa parameter opsional harus didefinisikan terakhir. Anda tidak dapat membuat parameter pertama opsional dan parameter kedua wajib, karena kompiler tidak akan tahu nilai mana yang diberikan.

Tetapkan Nilai Default ke Params

Anda dapat menetapkan nilai default untuk parameter 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

Sama seperti parameter opsional, parameter yang diinisialisasi secara default juga harus tetap berada di akhir daftar parameter.

Parameter Istirahat

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

Sintaks untuk parameter Istirahat:

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

Seperti yang ditunjukkan di atas, parameter rest adalah sebuah array yang diawali dengan tiga titik. Array ini akan menyimpan semua argumen yang tersisa yang diteruskan ke fungsi tersebut.

Contoh:

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

Fungsi Panah

Fungsi panah adalah salah satu fitur penting yang dirilis di ES6, dan tersedia di TypeScript juga. Sintaksnya memiliki tanda panah tebal di dalamnya, dari situlah nama tersebut berasal.

Sintaks fungsi panah:

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

Apa kegunaan dari fungsi panah (arrow function)?

Mari kita lihat sebuah contoh untuk memahami kegunaan fungsi panah (arrow function).

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 dengan properti `score` yang diinisialisasi ke 0, dan metode `getScore` yang secara internal menggunakan `setTimeout` dan, setelah satu detik, mencatat `this.score`. Nilai yang dicatat adalah `undefined` meskipun `this.score` telah didefinisikan dan diinisialisasi. Masalahnya terletak pada... ini kata kunci. Fungsi di dalam setTimeout memiliki this-nya sendiri, dan karena score tidak didefinisikan di dalamnya, hasilnya tidak terdefinisi.

Hal yang sama dapat ditangani 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();

Fungsi panah tidak memiliki fungsi sendiri ini, dan sebagai gantinya berbagi yang dari cakupan induknya, sehingga variabel yang dideklarasikan di luar dapat diakses dengan ini di dalam fungsi panah. Fungsi ini berguna karena sintaksnya yang lebih pendek serta untuk fungsi callback, penanganan event, dan fungsi pengaturan waktu.

TypeScript Enum

A TypeScript Enum adalah objek yang menyimpan kumpulan nilai-nilai terkait yang tersimpan bersama. JavaScript tidak mendukung enum secara bawaan. Sebagian besar bahasa pemrograman seperti Java, C, dan C++ mendukung enum, dan TypeScript juga membuatnya tersedia. Enum didefinisikan menggunakan kata kunci enum.

Bagaimana cara mendeklarasikan Enum?

sintaks:

enum NameofEnum {
   value1,
   value2,
    ..
}

Contoh: Enum

enum Directions {
    North,
    South,
    East,
    West
}

Pada contoh di atas, Anda telah mendefinisikan enum bernama Directions dengan nilai North, South, East, dan West. Nilai-nilai tersebut diberi nomor mulai dari 0 untuk entri pertama dan bertambah 1 untuk setiap entri berikutnya.

Deklarasikan Enum dengan nilai numerik

Secara default, jika anggota enum tidak diberi nilai, maka nilainya berupa angka yang dimulai dari 0. Contoh berikut menunjukkan enum dengan nilai numerik eksplisit.

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

Anda juga dapat menetapkan nilai awal, dan anggota berikutnya akan menerima nilai yang bertambah. Misalnya:

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

Sekarang arah Utara dimulai dari 5, jadi Selatan adalah 6, Timur adalah 7, dan Barat adalah 8.

Anda juga dapat menetapkan nilai pilihan Anda sendiri sebagai pengganti 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

yang dikompilasi JavaBerikut adalah skripnya:

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, compiler mengkonversi enum menjadi fungsi yang dipanggil sendiri, seperti yang ditunjukkan di atas. Penugasan ganda itulah yang menciptakan peta terbalik.ping dari angka kembali ke nama.

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 undefined

yang dikompilasi JavaBerikut adalah skripnya:

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?

Berkas yang dibuat di TypeScript Variabel memiliki akses global, yang berarti variabel yang dideklarasikan dalam satu file dapat diakses di file lain. Sifat global ini dapat menyebabkan konflik kode dan masalah saat runtime. Fungsionalitas ekspor dan impor modul dapat digunakan untuk menghindari konflik variabel dan fungsi global. Fitur ini hadir pada JavaSkrip dengan rilis ES6 dan juga didukung di TypeScript.

Mengapa Anda memerlukan Modul di TypeScript?

Contoh berikut menunjukkan masalah tersebut tanpa modul.

Contoh tes1.ts

let age : number = 25;

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

Contoh tes2.ts

Di test2.ts Anda dapat mengakses variabel tersebut. usia didefinisikan dalam test1.ts dan juga dimodifikasi, seperti yang ditunjukkan di bawah ini:

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

Hal ini dapat menimbulkan banyak masalah, karena variabel-variabel tersebut tersedia secara global dan dapat dimodifikasi dari mana saja.

Dengan modulKode yang ditulis tetap berada di dalam file dan tidak dapat diakses di luar file tersebut. Untuk berbagi sesuatu dari sebuah file, file tersebut harus diekspor menggunakan kata kunci `export`. Ekspor Digunakan ketika Anda ingin sebuah variabel, kelas, fungsi, atau antarmuka digunakan di file lain. impor Digunakan saat Anda ingin mengakses item yang diekspor. Dengan melakukan ini, kode tetap utuh di dalam file, dan meskipun Anda mendefinisikan nama variabel yang sama, variabel tersebut tidak akan tercampur.

Menggunakan Ekspor dan Impor

Ada banyak cara untuk mengekspor dan mengimpor. Kita akan membahas sintaks yang paling umum digunakan.

Sintaks untuk impor dan ekspor 1:

export  nameofthevariable or class name or interface name etc

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

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

Berikut adalah contoh kerja menggunakan ekspor dan impor.

tes1.ts

export let age: number = 25;

Kata kunci export digunakan untuk berbagi variabel usia dengan file lain.

tes2.ts

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

Kata kunci import 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 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(“file path of modulename”)`.

Berikut adalah contoh praktis yang menunjukkan kasus tersebut.

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 berfungsi sendiri, jadi Anda memerlukan pemuat modul untuk menemukan dependensi impor, seperti yang terlihat pada TypeScript Contoh di atas. Loader modul yang tersedia adalah CommonJS untuk Nodejs dan Require.js untuk dijalankan di browser.

Untuk mengkompilasi kode menggunakan format modul CommonJS, gunakan perintah berikut:

tsc --module commonjs testCustomer.ts

Untuk mengkompilasi kode menggunakan format modul Requirejs, gunakan perintah berikut:

tsc --module amd testCustomer.ts

File-file dependen akan dikonversi menjadi file js dengan perintah di atas.

Contoh konversi 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 Konversi 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 merujuk pada 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 menampung kumpulan kelas, antarmuka, variabel, dan fungsi 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, dan Anda telah menambahkan antarmuka StudDetails, fungsi addSpace, dan kelas bernama Student.

Mengakses Namespace

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, atau fungsi yang tersedia di dalam sebuah namespace harus dirujuk menggunakan nama namespace tersebut, misalnya StudentSetup.addSpace untuk mengakses fungsi dan Pengaturan Siswa. Siswa untuk mengakses kelas.

Anda dapat menggabungkan kedua file tersebut menjadi satu file 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

Keluaran:

The name is :H a r r y

Deklarasi Ambien di TypeScript

TypeScript memungkinkan Anda untuk menggunakan pihak ketiga JavaFile skrip menggunakan deklarasi ambient. Keuntungan dari fitur ini adalah Anda tidak perlu menulis ulang pustaka, namun Anda tetap dapat menggunakan semua fiturnya dengan pemeriksaan tipe. 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 dalam file .ts Anda, Anda perlu merujuknya sebagai berikut:

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

Deklarasi tipe ambient di TypeScript mengacu pada pustaka pihak ketiga dan mendeklarasikan ulang fungsi-fungsi yang dibutuhkan dengan tipe masing-masing. Misalnya, pertimbangkan yang kecil JavaPustaka skrip ditampilkan di bawah ini.

Pihak ketiga JavaBerkas skrip: 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();
    }
};

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

Membuat Modul Ambient di TypeScript

Sekarang kita akan membuat modul ambient yang merujuk pada JavaSkrip ini menjalankan fungsi-fungsi di atas dan menambahkan pemeriksaan tipe sesuai kebutuhan.

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 mendefinisikan modul bernama TestString dan mengekspor antarmuka StringsFunc. Setiap tanda tangan menyatakan apa yang diterima dan dikembalikan oleh fungsi tersebut:

• isString(str: string): boolean – menerima string dan mengembalikan nilai boolean. Memberikan angka atau tipe data lain akan menghasilkan kesalahan kompilasi.
• convertToUpperCase(str: string): string – menerima sebuah string dan mengembalikan sebuah string.
• convertToLowerCase(str: string): string – menerima sebuah string dan mengembalikan sebuah string.
• convertToStringBold(str: string): string – menerima sebuah string dan mengembalikan sebuah string.

Karena JavaFile skrip mengekspos nama objek StringChecks, dan akhirnya kita merujuk pada nama yang sama di file .d.ts:

declare var StringChecks: TestString.StringsFunc;

Menggunakan modul Ambient di TypeScript

Berikut adalah file test.ts yang menggunakan file ambient tstring.d.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);

Kompilasi dengan tsc test.ts untuk menghasilkan 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 bersama dengan file pustaka testString.js.

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

Keluaran:

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

Untuk melanjutkan, bandingkan kedua bahasa tersebut secara langsung dalam TypeScript vs JavaNaskah, kunjungi kembali JavaMetode array skrip untuk padanan yang tidak diketik yang digunakan di sini, dan pelajari lingkaran di JavaNaskah ke internal dan eksternal JavaNaskah untuk dasar-dasar browser yang menjadi acuan keluaran yang dikompilasi.

Pertanyaan Umum Demo Slot