Tutorial TypeScript: Ketahui Mengenai Asas TypeScript

TypeScript adalah superset JavaScript yang sangat ditaip. Dalam Tutorial TypeScript ini, kita akan mendalami dan memahami asasnya.

TypeScript adalah superset yang sangat ditaip yang menyusun ke JavaScript biasa. Anda dapat menggunakan bahasa ini untuk pengembangan JavaScript skala aplikasi. Juga, ia dapat dijalankan pada penyemak imbas, host mana pun, dan Sistem Operasi mana pun. Dalam Tutorial TypeScript ini, kita akan memasuki kedalaman TypeScript dan memahami asas-asasnya dalam urutan berikut:

Pengenalan kepada TypeScript

TypeScript adalah superset JavaScript yang ditaip yang menyusun untuk JavaScript biasa. TypeScript berorientasikan objek murni dengan kelas, antara muka dan bahasa pengaturcaraan yang ditaip secara statik seperti C # atau . Ia memerlukan penyusun untuk menyusun dan menghasilkan dalam fail JavaScript. Pada dasarnya, TypeScript adalah versi ES6 JavaScript dengan beberapa ciri tambahan.





Kod TypeScript ditulis dalam fail dengan lanjutan dan kemudian disusun ke dalam JavaScript menggunakan penyusun. Anda boleh menulis fail di mana-mana penyunting kod dan penyusun perlu dipasang di platform anda. Selepas pemasangan, arahan tsc .ts menyusun kod TypeScript ke dalam fail JavaScript biasa.

Sintaks:



var message: string = 'Selamat datang ke Edureka!' console.log (mesej)

Semasa menyusunnya, ia menghasilkan kod JavaScript berikut:

// Dihasilkan oleh typcript 1.8.10 var message = 'Selamat Datang di Edureka!' console.log (mesej)

Ciri-ciri TypeScript

ciri - tutorial taip - edureka

  • Merentas Platform: Penyusun TypeScript boleh dipasang di mana-mana Sistem Operasi seperti Windows, MacOS dan Linux.



  • Bahasa Berorientasikan Objek : TypeScript menyediakan ciri seperti Kelas , Antara Muka, dan Modul. Oleh itu, ia dapat menulis kod berorientasikan objek untuk sisi pelanggan dan juga pengembangan sisi pelayan.

  • Pemeriksaan jenis statik : TypeScript menggunakan penaipan statik dan membantu memeriksa jenis pada waktu kompilasi. Oleh itu, anda boleh menemui kesilapan semasa menulis kod tanpa menjalankan skrip.

  • Penaipan Statik Pilihan : TypeScript juga membenarkan penaipan statik pilihan sekiranya anda menggunakan penaipan dinamik JavaScript.

  • Manipulasi DOM : Anda boleh menggunakan TypeScript untuk memanipulasi DOM untuk menambahkan atau menghapus elemen.

  • Ciri ES 6 : TypeScript merangkumi kebanyakan ciri ECMAScript 2015 yang dirancang (ES 6, 7) seperti kelas, antara muka, fungsi Arrow, dll.

Kelebihan Menggunakan TypeScript

  • Jenis Skrip adalah cepat, ringkas, senang dipelajari dan berjalan di mana-mana penyemak imbas atau mesin JavaScript.

  • Ia adalah serupa ke JavaScript dan menggunakan sintaksis dan semantik yang sama.

  • Ini membantu pembangun backend menulis bahagian depan kod lebih pantas .

  • Kod TypeScript boleh dipanggil dari kod JavaScript yang ada . Ia juga berfungsi dengan kerangka kerja dan perpustakaan JavaScript yang ada tanpa masalah.

  • Fail Definisi, dengan lanjutan .d.ts, memberikan sokongan untuk perpustakaan JavaScript yang ada seperti Jquery, D3.js Oleh itu, kod TypeScript boleh ditambah Perpustakaan JavaScript menggunakan definisi jenis untuk memanfaatkan faedah pemeriksaan jenis, pelengkapan automatik kod, dan dokumentasi di perpustakaan JavaScript yang ditaip secara dinamik yang ada.

  • Ia merangkumi ciri dari ES6 dan ES7 yang boleh dijalankan dalam enjin JavaScript peringkat ES5 seperti Node.js .

Sekarang setelah anda memahami apa itu TypeScript, mari kita lanjutkan dengan Tutorial TypeScript ini dan lihat jenisnya.

Jenis Jenis Skrip

Jenis Sistem mewakili pelbagai jenis nilai yang disokong oleh bahasa. Ia memeriksa kesahan dari yang dibekalkan nilai sebelum mereka disimpan atau dimanipulasi oleh program.

Ia boleh dikelaskan kepada dua jenis seperti:

  • Terbina dalam : Ini merangkumi nombor, rentetan, boolean, batal, null dan tidak ditentukan.
  • Ditentukan oleh pengguna : Ini termasuk Enumerasi (enum), kelas, antaramuka, tatasusunan, dan tuple.

Sekarang mari kita lanjutkan dengan Tutorial TypeScript ini dan fahami lebih banyak mengenai pemboleh ubah.

Tutorial Jenis Skrip: Pemboleh ubah

Pemboleh ubah adalah ruang bernama dalam memori yang digunakan untuk menyimpan nilai.

Sintaks jenis untuk menyatakan pemboleh ubah dalam TypeScript merangkumi titik dua (:) selepas nama pemboleh ubah, diikuti dengan jenisnya. Sama seperti JavaScript, kami menggunakan kata kunci var untuk menyatakan pemboleh ubah.

Terdapat empat pilihan ketika kita menyatakan pemboleh ubah:

var [pengecam]: [type-anotation] = nilai
var [pengecam]: [jenis-anotasi]
var [pengecam] = nilai
var [kenalpasti]

Contoh:

var name: string = 'Daisy' var empid: number = 1001 console.log ('name' + name) console.log ('id pekerja' + empid)

Semasa menyusunnya, ia akan menghasilkan kod JavaScript berikut:

// Dihasilkan oleh naskhah 1.8.10 var name = 'Daisy' var empid = 1001 console.log ('name' + name) console.log ('id pekerja:' + empid)

Pengeluaran:

nama: Daisy
id pekerja: 1001

Sekarang mari kita beralih ke topik seterusnya dari Tutorial TypeScript kami.

Pengendali

Operator digunakan untuk menentukan fungsi yang akan dilakukan pada data. Data di mana pengendali bekerja dipanggil operand. Terdapat pelbagai jenis pengendali dalam TypeScript seperti:

  • Pengendali aritmetik
  • Pengendali logik
  • Pengendali hubungan
  • Pengendali bitwise
  • Pengendali tugasan

Pengendali Aritmetik

Pengendali Penerangan

Penambahan (+)

mengembalikan jumlah operasi

Penolakan (-)

mengembalikan perbezaan nilai

Pendaraban (*)

mengembalikan produk nilai

Bahagian (/)

melakukan operasi pembahagian dan mengembalikan hasil bagi

Modulus (%)

melakukan operasi pembahagian dan mengembalikan baki

Kenaikan (++)

Menambah nilai pemboleh ubah satu

Penurunan (-)

Menurunkan nilai pemboleh ubah satu

Contoh:

var num1: number = 10 var num2: number = 2 var res: number = 0 res = num1 + num2 console.log ('Sum:' + res) res = num1 - num2 console.log ('Perbezaan:' + res) res = num1 * num2 console.log ('Product:' + res)

Pengeluaran:

Jumlah: 12
Perbezaan: 8
Produk: 20

Pengendali Logik

Pengendali Penerangan

DAN (&&)

Ia kembali benar hanya jika semua ungkapan yang dinyatakan kembali benar

ATAU (||)

Ini kembali benar jika sekurang-kurangnya salah satu ungkapan yang dinyatakan mengembalikan benar

BUKAN (!)

Ia mengembalikan kebalikan hasil ungkapan.

Contoh:

var avg: number = 20 var peratusan: number = 90 console.log ('Nilai avg:' + avg + ', nilai peratusan:' + peratusan) var res: boolean = ((purata> 50) && (peratusan> 80 )) console.log ('(purata> 50) && (peratusan> 80):', res)

Pengeluaran:

Nilai purata: 20, nilai peratusan: 90
(purata> 50) && (peratusan> 80): salah

Pengendali Perhubungan

Pengendali Penerangan

>

Lebih besar daripada

<

Kurang daripada

> =

Lebih besar daripada atau sama dengan

<=

Kurang daripada atau sama dengan

==

Kesaksamaan

! =

Tidak sama

Contoh:

var num1: number = 10 var num2: number = 7 console.log ('Value of num1:' + num1) console.log ('Value of num2:' + num2) var res = num1> num2 console.log ('num1 lebih besar daripada num2: '+ res) res = num1

Pengeluaran:

Nilai num1: 10
Nilai num2: 7
num1 lebih besar daripada num2: benar
num1 lebih rendah daripada num2: false

Pengendali Bitwise

Pengendali Penerangan

Sedikit demi sedikit DAN (&)

melakukan operasi Boolean AND pada setiap bit argumen integernya.

Bitwise ATAU (|)

Ia melakukan operasi Boolean ATAU pada setiap bit argumen integernya.

Bitwise XOR (^)

Ia melakukan operasi ATAU eksklusif Boolean pada setiap bit argumen integernya.

Sedikit demi sedikit TIDAK (~)

Ini adalah pengendali yang tidak berfungsi dan beroperasi dengan membalikkan semua bit dalam operan.

Pergeseran kiri (<<)

Ia menggerakkan semua bit pada operan pertamanya ke kiri dengan bilangan tempat yang dinyatakan dalam operan kedua.

Pergeseran Kanan (>>)

Nilai operan kiri dipindahkan ke kanan dengan jumlah bit yang ditentukan oleh operan kanan.

Pergeseran Kanan dengan Nol (>>>)

Ia serupa dengan pengendali >>, kecuali bahawa bit yang beralih di sebelah kiri selalu sifar.

Contoh:

var a: number = 2 // Persembahan bit 10 var b: number = 3 // Persembahan bit 11 hasil keputusan var = (a & b) console.log ('(a & b) =>', hasil) hasil = ( a | b) console.log ('(a | b) =>', hasil)

Pengeluaran:

(a & b) => 2
(a | b) => 3

Pengendali Tugasan

Pengendali Penerangan

Tugasan Ringkas (=)

Menetapkan nilai dari operan sisi kanan ke operan sisi kiri

Tambah dan tugasan (+ =)

Ia menambah operan kanan ke operan kiri dan memberikan hasilnya ke operan kiri.

Kurangkan dan tugaskan (- =)

Ia mengurangkan operan kanan dari operan kiri dan memberikan hasilnya ke operan kiri.

Gandakan dan tugasan (* =)

Ia mengalikan operan kanan dengan operan kiri dan memberikan hasilnya ke operan kiri.

Bahagikan dan tugaskan (/ =)

Ia membahagikan operan kiri dengan operan kanan dan memberikan hasilnya ke operan kiri.

Contoh:

var a: number = 12 var b: number = 10 a = b console.log ('a = b:' + a) a + = b console.log ('a + = b:' + a) a - = b konsol .log ('a- = b:' + a)

Pengeluaran:

a = b: 10
a + = b: 20
a - = b: 10

Ini adalah operator yang berbeza. Sekarang mari kita lanjutkan dengan Tutorial TypeScript kami dan belajar mengenai gelung.

Gelung

Mungkin ada situasi ketika sekumpulan kod perlu dilaksanakan beberapa kali. A gelung penyataan membolehkan kita melaksanakan penyataan atau kumpulan penyataan berkali-kali.

Gelung TypeScript boleh dikelaskan sebagai:

Untuk Gelung

The untuk gelung adalah pelaksanaan gelung pasti.

Sintaks:

untuk (ungkapan pertama ungkapan kedua ungkapan ketiga) {// pernyataan akan dilaksanakan berulang kali}

Di sini, ungkapan pertama dilaksanakan sebelum gelung bermula. Ungkapan kedua adalah syarat untuk gelung dilaksanakan. Dan ungkapan ketiga dilaksanakan setelah pelaksanaan setiap blok kod.

Contoh:

untuk (let i = 0 i<2 i++) { console.log ('Execute block statement' + i) }

Pengeluaran:

Laksanakan penyataan blok 0
Laksanakan penyataan blok 1

Semasa Gelung

The while loop melaksanakan arahan setiap kali keadaan yang ditentukan dinilai benar.

Sintaks:

sementara (ungkapan keadaan) {// blok kod yang akan dilaksanakan}

Contoh:

let i: number = 1 sambil (i<3) { console.log( 'Block statement execution no.' + i ) i++ }

Pengeluaran:

Blok penyataan pelaksanaan no.1
Blok penyataan pelaksanaan no.2

Lakukan..Sambil Gelung

Gelung do & hellip sementara serupa dengan gelung sementara kecuali bahawa ia tidak menilai keadaan untuk pertama kalinya gelung dijalankan.

Sintaks:

lakukan {// blok kod yang akan dilaksanakan} sementara (ungkapan keadaan)

Contoh:

let i: number = 1 do {console.log ('Blok penyataan penyataan eksekusi.' + i) i ++} semasa (i<3)

Pengeluaran:

Blok penyataan pelaksanaan no.1
Blok penyataan pelaksanaan no.2

Selain daripada ini, terdapat pernyataan rehat dan lanjutan dalam TypeScript yang digunakan dalam satu gelung.

Penyataan Rehat

Pernyataan rehat digunakan untuk mengawal dari konstruk. Menggunakan pernyataan putus dalam gelung membantu program keluar dari gelung.

Contoh:

var i: nombor = 1 sambil (i<=10) { if (i % 5 == 0) { console.log ('The first multiple of 5 between 1 and 10 is : '+i) break //exit the loop if the first multiple is found } i++ } //outputs 5 and exits the loop

Pengeluaran:

mencantumkan pokok keputusan keputusan 4 elemen

Gandaan pertama dari 5 antara 1 dan 10 adalah: 5

Teruskan Penyataan

Pernyataan terus melangkau pernyataan berikutnya dalam lelaran semasa dan mengambil kawalan kembali ke permulaan gelung.

Contoh:

var num: number = 0 var count: number = 0 untuk (num = 0num<=10num++) { if (num % 2==0) { continue } count++ } console.log (' The count of odd values between 0 and 10 is: '+count)

Pengeluaran:

Kiraan nilai ganjil antara 0 dan 10 adalah: 5

Ini adalah gelung yang berbeza dalam TypeScript. Sekarang, mari kita teruskan dengan Tutorial TypeScript kami dan fahami fungsinya.

Fungsi

Dalam JavaScript, fungsi adalah salah satu bahagian yang paling penting kerana ia adalah bahasa pengaturcaraan yang berfungsi. Fungsi memastikan bahawa program dapat dikekalkan dan dapat digunakan kembali, dan disusun menjadi blok yang dapat dibaca. Walaupun TypeScript menyediakan konsep kelas dan modul, fungsi tetap merupakan bahagian yang tidak dapat dipisahkan dari bahasa.

Fungsi Dinamakan

Fungsi bernama digunakan untuk menyatakan dan memanggil fungsi dengan nama yang diberikan.

Contoh:

paparan fungsi () {console.log ('TypeScript Function')} paparan ()

Pengeluaran:

Fungsi TypeScript

Fungsi Tanpa Nama

Fungsi tanpa nama adalah fungsi yang didefinisikan sebagai ungkapan. Ungkapan ini disimpan dalam pemboleh ubah. Fungsi-fungsi ini dipanggil menggunakan nama pemboleh ubah yang disimpan dalam fungsi.

Contoh:

biarkan salam = fungsi () {console.log ('TypeScript Function')} ucapan ()

Pengeluaran:

Fungsi TypeScript

Fungsi Anak Panah

Notasi anak panah lemak digunakan untuk fungsi tanpa nama iaitu ungkapan fungsi. Mereka juga disebut fungsi lambda dalam bahasa lain.

Sintaks:

(param1, param2, ..., paramN) => ungkapan

Dengan menggunakan anak panah lemak (=>) mengurangkan keperluan untuk menggunakan kata kunci 'fungsi'. Parameter dilewatkan dalam kurungan sudut, dan ekspresi fungsi tertutup dalam kurungan keriting {}.

Contoh:

let sum = (x: number, y: number): number => {return x + y} jumlah (10, 30) // pulangkan 40

Beban Berfungsi

TypeScript memberikan konsep fungsi overloading. Oleh itu, anda boleh mempunyai pelbagai fungsi dengan nama yang sama tetapi jenis parameter dan jenis pengembalian yang berbeza.

Contoh:

function add (a: string, b: string): string function add (a: number, b: number): number return a + b} add ('Hello', 'Edureka') // mengembalikan 'Hello Edureka' add ( 10, 10) // mengembalikan 20

Dalam contoh di atas, kita mempunyai fungsi tambah yang sama () dengan dua deklarasi fungsi dan satu pelaksanaan fungsi. Tandatangan pertama mempunyai dua parameter rentetan jenis, sedangkan tandatangan kedua mempunyai dua parameter nombor jenis.

Ini adalah pelbagai jenis fungsi. Sekarang, mari kita lanjutkan dengan Tutorial TypeScript kami dan fahami rentetan dalam TypeScript.

Tutorial Jenis Skrip: Rentetan

The adalah jenis data primitif lain yang digunakan untuk menyimpan data teks. Nilai rentetan dikelilingi oleh tanda petik tunggal atau tanda petik berganda.

Sintaks:

var var_name = Rentetan baru (rentetan)

Terdapat pelbagai sifat kaedah yang terdapat dalam objek String seperti:

  • Pembina - Ia mengembalikan rujukan ke fungsi String yang membuat objek
  • Panjang - Ini mengembalikan panjang tali
  • Prototaip - Properti ini membolehkan anda menambahkan sifat dan kaedah ke objek

Contoh:

let name = String baru ('Welcome to Edureka!') console.log ('Message:' + name) console.log ('Length:' + name.length)

Pengeluaran:

Mesej: Selamat datang ke Edureka!
Panjang: 19

Kaedah Rentetan

Senarai Kaedah dalam Objek String merangkumi:

Kaedah Penerangan

charAt ()

Ia mengembalikan watak pada indeks yang ditentukan

charCodeAt ()

Ia mengembalikan nombor yang menunjukkan nilai Unicode watak pada indeks yang diberikan

ringkas ()

Menggabungkan teks dua rentetan dan mengembalikan rentetan baru

Indeks()

Mengembalikan indeks dalam objek String panggilan dari kejadian pertama dari nilai yang ditentukan

lastIndexOf ()

Ia mengembalikan indeks dalam objek String panggilan dari kejadian terakhir dari nilai yang ditentukan

padanan ()

Digunakan untuk memadankan ungkapan biasa dengan rentetan

tempatanBandingkan ()

Mengembalikan nombor yang menunjukkan sama ada rentetan rujukan datang sebelum atau sesudah atau sama dengan rentetan yang diberikan mengikut urutan

cari ()

Ini melaksanakan pencarian padanan antara ungkapan biasa dan rentetan yang ditentukan

ganti ()

Digunakan untuk mencari padanan antara ungkapan biasa dan rentetan, dan untuk menggantikan substring yang dipadankan dengan substring baru

kepingan ()

Ia mengekstrak bahagian rentetan dan mengembalikan rentetan baru

berpecah ()

Membahagi objek String menjadi array rentetan dengan memisahkan string menjadi substring

substrat ()

Mengembalikan watak dalam rentetan bermula dari lokasi yang ditentukan melalui bilangan watak yang ditentukan

substring ()

Ia mengembalikan watak dalam rentetan antara dua indeks ke dalam rentetan

keLocaleLowerCase ()

pl sql tutorial dengan contoh

Karakter dalam rentetan ditukar menjadi huruf kecil sambil menghormati tempat semasa

keLocaleUpperCase ()

Karakter dalam rentetan ditukar menjadi huruf besar sambil menghormati lokasi semasa

keLowerCase ()

Ia mengembalikan nilai rentetan panggilan yang ditukar menjadi huruf kecil

keUpperCase ()

Ia mengembalikan nilai rentetan panggilan yang ditukar menjadi huruf besar

menjalin()

Mengembalikan rentetan yang mewakili objek yang ditentukan

nilai()

Mengembalikan nilai primitif objek yang ditentukan

Contoh:

let str: string = 'Welcome to Edureka' str.charAt (0) // mengembalikan 'w' str.charAt (2) // mengembalikan 'l' 'selamat datang ke Edureka'.charAt (2) mengembalikan' l 'let str1 : string = 'welcome' let str2: string = 'Edureka' str1.concat (str2) // mengembalikan 'welcomeEdureka' str1.concat ('', str2) // mengembalikan 'selamat datang Edureka' str1.concat ('' ke ' ') // mengembalikan' selamat datang ke '

Setelah anda mengetahui tentang rentetan, mari kita lanjutkan dengan tutorial TypeScript ini dan memahami susunan.

Susunan dalam TypeScript

Seorang susunan adalah jenis khas jenis data yang menyimpan pelbagai nilai pelbagai jenis data secara berurutan menggunakan sintaks khas. Elemen array dikenal pasti oleh bilangan bulat unik yang disebut subskrip atau indeks elemen.

Sintaks:

var array_name [: datatype] // deklarasi array_name = [val1, val2, valn ..] // inisialisasi

Contoh:

let names: Array names = ['John', 'Daisy', 'Rachel'] let ids: Array ids [[101, 700, 321]]

Kaedah Array

Berikut adalah senarai kaedah Array yang berbeza yang boleh digunakan untuk tujuan yang berbeza:

Kaedah Penerangan

penapis ()

Membuat array baru dengan semua elemen array ini yang fungsi penyaringan yang disediakan kembali benar

setiap ()

Mengembalikan benar jika setiap elemen dalam larik ini memenuhi fungsi pengujian yang disediakan

ringkas ()

Mengembalikan tatasusunan baru yang terdiri daripada tatasusunan ini yang digabungkan dengan tatasusunan yang lain

Indeks()

Mengembalikan indeks pertama atau paling sedikit elemen dalam array sama dengan nilai yang ditentukan

untuk setiap()

Memanggil fungsi untuk setiap elemen dalam array

sertai ()

Bergabung dengan semua elemen larik menjadi rentetan

lastIndexOf ()

Mengembalikan indeks elemen terakhir atau terbesar dalam array sama dengan nilai yang ditentukan

peta ()

Membuat array baru dengan hasil memanggil fungsi yang disediakan pada setiap elemen dalam array ini

tolak ()

Menambah satu atau lebih elemen pada akhir array dan mengembalikan panjang array yang baru

pop ()

Mengeluarkan elemen terakhir dari tatasusunan dan mengembalikan elemen itu

kurangkan ()

Terapkan fungsi secara serentak terhadap dua nilai array dari kiri ke kanan untuk mengurangkannya menjadi satu nilai

kurangkan Betul ()

Terapkan fungsi secara serentak terhadap dua nilai array dari kanan ke kiri untuk mengurangkannya menjadi satu nilai

terbalik ()

Membalikkan susunan elemen array

peralihan ()

Mengeluarkan elemen pertama dari tatasusunan dan mengembalikan elemen itu

kepingan ()

Mengekstrak bahagian array dan mengembalikan array baru

sesetengah()

Ia kembali benar jika sekurang-kurangnya satu elemen dalam larik ini memenuhi fungsi pengujian yang disediakan

urutkan ()

Ia menyusun unsur array

menjalin()

Mengembalikan rentetan yang mewakili susunan dan unsurnya

sambatan ()

Ia menambah dan / atau membuang unsur dari array

tidak beralih ()

Menambah satu atau lebih elemen di bahagian depan array dan mengembalikan panjang array yang baru

Contoh:

nama var: Array = ['John', 'Daisy', 'Tara'] name.sort () console.log (name) // output: ['Daisy', 'John', 'Tara'] console.log ( name.pop ()) // output: Tara name.push ('Rachel') console.log (name) // output: ['John', 'Daisy', 'Rachel']

Sekarang mari kita teruskan dengan Tutorial TypeScript ini dan pelajari mengenai Interfaces.

Antara Muka Jenis Skrip

Antaramuka adalah struktur yang menentukan kontrak dalam aplikasi anda. Ia menentukan sintaks untuk kelas yang diikuti. Ini hanya mengandungi pengisytiharan ahli dan menjadi tanggungjawab kelas penurun untuk menentukan ahli.

Contoh:

antara muka Pekerja {empID: number empName: string getSalary: (number) => number // fungsi panah getManagerName (number): string}

Dalam contoh di atas, Pekerja antara muka merangkumi dua sifat empid dan nama emp . Ini juga merangkumi deklarasi kaedah dapatkanSalaray menggunakan fungsi anak panah yang merangkumi satu parameter nombor dan jenis pengembalian nombor. The getManagerName kaedah dinyatakan menggunakan fungsi normal.

Skrip Jenis Kelas

TypeScript memperkenalkan kelas sehingga mereka dapat memanfaatkan kelebihan teknik berorientasikan objek seperti enkapsulasi dan abstraksi. Kelas dalam TypeScript disusun untuk fungsi JavaScript biasa oleh penyusun TypeScript untuk berfungsi di seluruh platform dan penyemak imbas.

Kelas merangkumi yang berikut:

  • Pembina
  • Hartanah
  • Kaedah

Contoh:

pekerja kelas {empID: number empName: string konstruktor (ID: number, name: string) {this.empName = name this.empID = ID} getSalary (): number {return 40000}}

Warisan

TypeScript menyokong Warisan kerana kemampuan program untuk membuat kelas baru dari kelas yang ada. Kelas yang diperluas untuk membuat kelas yang lebih baru dipanggil kelas induk atau kelas super. Kelas yang baru dibuat dipanggil anak kelas atau kelas bawah.

Kelas mewarisi dari kelas lain menggunakan kata kunci 'memanjangkan'. Kelas anak mewarisi semua harta dan kaedah kecuali ahli persendirian dan pembina dari kelas induk. Tetapi, TypeScript tidak menyokong pelbagai warisan.

Sintaks:

class_class_name class memperluaskan nama_class_name

Contoh:

Person class {name: string konstruktor (name: string) {this.name = name}} class Employee extends Person {empID: number konstror (empID: number, name: string) {super (name) this.empID = empid} displayName (): void {console.log ('Name =' + this.name + ', Employee ID =' + this.empID)}} let emp = pekerja baru (701, 'Jason') emp.displayName () // Nama = Jason, ID Pekerja = 701

Sekarang setelah anda mengetahui tentang kelas, mari kita teruskan dengan Tutorial Jenis Skrip ini dan belajar mengenai Objek.

Objek dalam TypeScript

Objek adalah contoh yang mengandungi kumpulan pasangan kunci-nilai yang berbeza. Nilai boleh berupa nilai atau fungsi skalar atau bahkan array objek lain.

Sintaks:

var object_name = {key1: “value1”, // scalar value key2: “value”, key3: function () {// functions}, key4: [“content1”, “content2”]

Objek boleh mengandungi nilai skalar, fungsi dan struktur seperti tatasusunan dan tupel.

Contoh:

var person = {nama pertama: 'Danny', nama belakang: 'Green'} // mengakses objek nilai console.log (person.firstname) console.log (person.lastname)

Semasa menyusunnya, ia akan menghasilkan kod yang sama dalam JavaScript.

Pengeluaran:

Danny
Hijau

Ini adalah elemen penting yang berbeza dari TypeScript. Sekarang, mari kita lanjutkan dengan Tutorial TypeScript ini dan lihat contoh untuk memahami kes penggunaan.

Tutorial Jenis Skrip: Kes Penggunaan

Di sini, kita akan belajar bagaimana menukar yang ada ke TypeScript.

Apabila kita menyusun fail TypeScript, ia menghasilkan fail JavaScript yang sesuai dengan nama yang sama. Di sini, kita perlu memastikan bahawa fail JavaScript asli kita yang bertindak sebagai input tidak boleh berada di direktori yang sama sehingga TypeScript tidak menimpanya.

Proses untuk berpindah dari JavaScript ke TypeScript merangkumi langkah-langkah berikut:

1. Tambahkan fail tsconfig.json ke projek

Anda perlu menambahkan fail tsconfig.json ke projek. TypeScript menggunakan fail tsconfig.json untuk menguruskan pilihan penyusunan projek, seperti fail mana yang ingin anda sertakan dan kecualikan.

{'compilerOptions': {'outDir': './built', 'allowJs': true, 'target': 'es5'}, 'include': ['./src/**/*']}

2. Bersepadu dengan alat binaan

Sebilangan besar projek JavaScript mempunyai alat binaan bersepadu seperti jurang atau beg web. Anda boleh mengintegrasikan projek dengan beg web dengan cara berikut:

  • Jalankan arahan berikut di terminal:
$ npm pasang sumber-peta-loader hebat-typecript-loader

Dalam penyatuan beg web, anda menggunakan pemuat-jenis-naskah yang hebat yang digabungkan dengan pemuat-peta-sumber untuk penyahpepijatan kod sumber yang lebih mudah.

  • Kedua, gabungkan harta konfigurasi modul dalam fail webpack.config.js kami untuk memasukkan pemuat.

3. Pindahkan semua fail .js ke fail .ts

Dalam langkah ini, anda harus menamakan semula fail .js menjadi fail .ts. Begitu juga, jika fail menggunakan JSX, anda perlu menamakannya semula menjadi .tsx. Sekarang, jika kita membuka fail itu di editor yang mendukung TypeScript, beberapa kod mungkin mulai memberikan kesalahan kompilasi. Oleh itu, menukar fail satu demi satu membolehkan menangani kesalahan penyusunan dengan lebih mudah. Sekiranya TypeScript menemui kesalahan kompilasi semasa penukaran, ia masih dapat menerjemahkan kod tersebut.

4. Periksa kesilapan

Setelah memindahkan file js ke file ts, segera, TypeScript akan memulakan Pemeriksaan Jenis kod kami. Jadi, anda mungkin mendapat ralat diagnostik dalam kod JavaScript.

5. Gunakan Perpustakaan JavaScript pihak ketiga

Projek JavaScript menggunakan perpustakaan pihak ketiga seperti atau Lodash. Untuk menyusun fail, TypeScript perlu mengetahui jenis semua objek di perpustakaan ini. Fail definisi TypeScript untuk pustaka JavaScript sudah tersedia di DefinitelyTyped. Jadi, tidak perlu memasang jenis ini secara luaran. Anda hanya perlu memasang jenis yang digunakan dalam projek kami.

Untuk jQuery, anda boleh memasang definisi:

$ npm install @ types / jquery

Selepas ini, buat perubahan pada projek JavaScript, jalankan alat bina. Sekarang, anda harus menyusun projek TypeScript ke dalam JavaScript biasa yang dapat dijalankan di penyemak imbas.

Dengan ini, kita telah sampai ke akhir Tutorial TypeScript ini. Saya harap anda memahami semua elemen penting TypeScript.

Lihat oleh Edureka. Latihan Pensijilan Pembangunan Web akan membantu anda Mempelajari cara membuat laman web yang mengagumkan menggunakan HTML5, CSS3, Twitter Bootstrap 3, jQuery dan Google API dan menyebarkannya ke Amazon Simple Storage Service (S3).

Ada soalan untuk kami? Sila sebutkan di bahagian komen 'TypeScript Tutorial' dan kami akan menghubungi anda.