Perkembangan TypeScript<\/h2>\n\n- TypeScript dipubikasikan pertama kali pada Oktober 2012 (pada versi 0.8),setelah dua tahun pengembangan internal di Microsoft.TypeScript 0.9 dirilis pada 2013,menambahkan dukungan untuk obat generik.<\/span><\/li>\n
- Tahun 2014 TypeScript 1.0 dirilis pada konferensi pengembang Microsoft Build,Visual Studio 2013 Update 2 menyediakan dukungan bawaan untuk TypeScript.<\/span><\/li>\n
- Pada bulan Juli 2014, tim pengembangan mengumumkan kompiler TypeScript baru, yang mengklaim peningkatan kinerja 5x.<\/span>Secara bersamaan, kode sumber, yang awalnya dihosting di\u00a0 CodePlex dipindahkan ke Github.<\/span><\/li>\n
- Pada 22 September 2016, TypeScript 2.0 dirilis : karena ini memperkenalkan beberapa fitur,termasuk kemampuan bagi pemrogram untuk secara opsional mencegah variabel diberi <\/span>nilai null,terkadang disebut sebagai kesalahan miliaran dollar.<\/span><\/li>\n
- TypeScript 3.0 dirilis pada 30 Juli 2018,membawa banyak tambahan bahasa seperti tupel dalam parameter istirahat dan ekspresi tersebar, parameter istirahat dengan jenis tuple,parameter istirahat umum dan sebagainya.<\/span><\/li>\n
- TypeScript 4.0 dirilis pada 20 Agustus 2020. Meski 4.0 tidak memperkenalkan perubahan apa pun dan menambahkan fitur bahasa seperti Custom JSX Factories dan Variadic Tuple Type.<\/li>\n<\/ul>\n
Kelebihan TypeScript<\/h2>\n\n- \u00a0Fitur pemrograman basis objek : <\/strong>TypeScript menyertakan serangkaian fitur Object Oriented Programming (OOP) yang bagus dan kompleks untuk diterapkan.Kecuali, jika kalian sebelumnya telah menggunakan JavaScript.Kalian dapat membandingkan kode yang dihasilkan JavaScript dengan Typescript.Fitur OOP ini membuat kode TypeScript sangat rapi dan teratur.<\/li>\n<\/ul>\n
\n- Tidak membutuhkan runtime plugin : <\/strong>Semua teknologi web modern menerjemahkan dirinya ke bentuk standar yang dapat dipahami dan dijalankan oleh semua browser utama.Ini termasuk bahasa skrip,seperti TypeScript atau CoffeeScript,bahasa Markup,seperti Haml atau Markdown dan bahasa Styling seperti Sass atau Less,dalam kasus TypeScript,semua skrip modern yang kalian tulis akan diterjemahkan ke JavaScript biasa sehingga dapat dijalankan oleh browser.<\/li>\n
- Meningkatkan performa tim : <\/strong>Menggunakan TypeScript meningkatkan kinerja keseluruhan.Baik ketika bekerja secara individu\u00a0 atau dalam tim.Tentu,kinerja yang lebih tinggi menghasilkan keuntungan lebih baik.TypeScript memungkinkan memperkenalkan developer mengenai proyek dengan lebih cepat.Struktur data dan tipe anotasi yang didefinisikan secara eksplisit membuatnya jauh lebih mudah untuk memahami keputusan yang dibuat oleh teknisi yang awalnya menulis kode.<\/li>\n
- TypeScript merupakan bahasa pemrograman populer : <\/strong>Hasil survei StackOverFlow tahun 2019 yang dilansir dari STXNext,TypeScript merupakan salah satu bahasa pemrograman terpopuler setelah Phyton.Bahasa ini banyak digunakan dalam produk perangkat lunak seperti Slack, Asana, atau Visual Studio Code.Banyak tools JavaScript yang\u00a0 ditulis dalam TypeScript, termasuk kerangka kerja seperti Angular, Aurelia, atau Ionic.<\/li>\n<\/ul>\n
Kekurangan TypeScript<\/h2>\n\n- Kurva pembelajaran <\/strong>:<\/em>Front end development sangat jenuh dengan semua jenis kerangka kerja dan teknologi dan biasanya sulit untuk mengikutinya.Meski TypeScript menjadi sangat populer,tidak semua developer JavaScript memahami TypeScript.Kurva pembelajaran ini membuat kerja tim lebih keras.<\/li>\n
- Membutuhkan tools : <\/strong>Meski browser pengunjung tidak membutuhkan plugin untuk menjalankan TypeScript,kalian membutuhkan tools khusus untuk editor atau IDE untuk mentranspilasi TypeScript.Ini juga termasuk penyempurnaan editor untuk menyorot dan memformat kata kunci TypeScript,jika kalian adalah pengguna Windows atau Mac,tools yang direkomendasikan adalah Visual Studio.Apabila menggunakan Linux,tools yang direkomendasikan adalah Visual Studio Code.<\/li>\n
- Sulit diedit menggunakan CMS\u00a0: <\/strong>Menggunakan CMS untuk mengembangkan website,kalian bisa mengedit file .css dan file skrip .js di portal admin.Namun ketika ingin menggunakan TypeScript, tidak mudah untuk mengeditnya di portal admin.Beberapa CMS memiliki plugin untuk memungkinkan mengedit TypeScript di portal, tetapi beberapa tidak,bahkan mungkin menjadi rumit dalam beberapa skenario.<\/li>\n
- Sistem pengetikan yang terlalu rumit : <\/strong>Sistem pengetikan TypeScript,meskipun ini adalah tools bagus dalam banyak hal,terkadang bisa rumit untuk digunakan.Ini tidak sepenuhnya merugikan TypeScript. Ini hanyalah sisi negatif yang berasal dari pengoperasian penuh dengan JavaScript yang dengan sendirinya menyisakan lebih banyak ruang untuk komplikasi.<\/li>\n<\/ul>\n
Riwayat Rilis TypeScript<\/span><\/span><\/h2>\n\n\n\n\nVersi<\/strong><\/p>\n<\/td>\nTanggal Rilis<\/span><\/strong><\/td>\n\nPerubahan<\/span><\/strong><\/p>\n<\/td>\n<\/tr>\n\n\n0.8<\/p>\n<\/td>\n
1 Oktober 2012<\/td>\n <\/td>\n<\/tr>\n \n\n0.9<\/p>\n<\/td>\n
\n18 Juni 2013<\/p>\n<\/td>\n
<\/td>\n<\/tr>\n \n1.0<\/td>\n 12 April 2014<\/td>\n <\/td>\n<\/tr>\n \n\n1.1<\/p>\n<\/td>\n
6 Oktober 2014<\/td>\n \npeningkatan kinerja.<\/p>\n<\/td>\n<\/tr>\n
\n1.3<\/td>\n 12 November 2014<\/td>\n \nPengubah protected,jenis tupel.<\/p>\n<\/td>\n<\/tr>\n
\n\n1.4<\/p>\n<\/td>\n
\n20 Januari 2015<\/p>\n<\/td>\n
Tipe gabungan\u00a0,deklarasi let\u00a0dan const,string template,pelindung tipe, alias tipe.<\/td>\n<\/tr>\n \n\n1.5<\/p>\n<\/td>\n
\n20 Juli 2015<\/p>\n<\/td>\n
\nModul ES6, kata kunci namespace,for..of,decorator.<\/p>\n<\/td>\n<\/tr>\n
\n1.6<\/td>\n 16 September 2015<\/td>\n \nDukungan JSX,tipe persimpangan,deklarasi tipe lokal,kelas\u00a0dan metode\u00a0abstrak,fungsi penjaga tipe yang ditentukan pengguna.<\/p>\n<\/td>\n<\/tr>\n
\n\n1.7<\/p>\n<\/td>\n
30 November 2015<\/td>\n \nAsync dan await dukungan.<\/p>\n<\/td>\n<\/tr>\n
\n\n1.8<\/p>\n<\/td>\n
22 Februari 2016<\/td>\n kendala generik, kesalahan analisis aliran kontrol, tipe string literal,allowsjs<\/td>\n<\/tr>\n \n2.0<\/td>\n 22 September 2016<\/td>\n \ntipe sadar null- dan tidak terdefinisi, analisis tipe berbasis aliran kontrol, tipe gabungan terdiskriminasi,tipe never,kata kunci readonly,tipe this\u00a0untuk fungsi<\/p>\n<\/td>\n<\/tr>\n
\n\n2.1<\/p>\n<\/td>\n
8 November 2016<\/td>\n Jenis keyof\u00a0dan pencarian, jenis yang dipetakan, penyebaran objek dan istirahat,<\/td>\n<\/tr>\n \n\n2.2<\/p>\n<\/td>\n
22 Februari 2017<\/td>\n \nkelas campuran, tipe\u00a0object.<\/p>\n<\/td>\n<\/tr>\n
\n2.3<\/td>\n 27 April 2017<\/td>\n \nIterasi async, default parameter generik, opsi ketat<\/p>\n<\/td>\n<\/tr>\n
\n\n2.4<\/p>\n<\/td>\n
27 Juni 2017<\/td>\n \nekspresi impor dinamis, enum string, inferensi yang ditingkatkan untuk generik, pelanggaran ketat untuk parameter callback<\/p>\n<\/td>\n<\/tr>\n
\n\n2.5<\/p>\n<\/td>\n
31 Agustus 2017<\/td>\n variabel klausa tangkapan opsional<\/td>\n<\/tr>\n \n\n2.6<\/p>\n<\/td>\n
31 Oktober 2017<\/td>\n \njenis fungsi yang ketat<\/p>\n<\/td>\n<\/tr>\n
\n2.7<\/td>\n 31 Januari 2018<\/td>\n \nproperti bernama konstan, tupel dengan panjang tetap<\/p>\n<\/td>\n<\/tr>\n
\n\n2.8<\/p>\n<\/td>\n
27 Maret 2018<\/td>\n tipe bersyarat,keyof ditingkatkan dengan tipe persimpangan<\/td>\n<\/tr>\n \n\n2.9<\/p>\n<\/td>\n
14 Mei 2018<\/td>\n \ndukungan untuk simbol dan literal numerik dalam keyof dan tipe objek yang dipetakan<\/p>\n<\/td>\n<\/tr>\n
\n\n3.0<\/p>\n<\/td>\n
30 Juli 2018<\/td>\n \nreferensi proyek, mengekstrak dan menyebarkan daftar parameter dengan tupel<\/p>\n<\/td>\n<\/tr>\n
\n\n3.1<\/p>\n<\/td>\n
27 September 2018<\/td>\n \njenis tuple dan array yang dapat dipetakan<\/p>\n<\/td>\n<\/tr>\n
\n\n3.2<\/p>\n<\/td>\n
30 November 2018<\/td>\n \npemeriksaan yang lebih ketat untuk mengikat, memanggil, dan menerapkan<\/p>\n<\/td>\n<\/tr>\n
\n3.3<\/td>\n 31 Januari 2019<\/td>\n \naturan santai tentang metode jenis serikat, build tambahan untuk proyek komposit<\/p>\n<\/td>\n<\/tr>\n
\n\n3.4<\/p>\n<\/td>\n
29 Maret 2019<\/td>\n \nbuild inkremental yang lebih cepat, inferensi tipe dari fungsi generik, pengubah readonly untuk array, pernyataan const, pengecekan tipe globalThis<\/p>\n<\/td>\n<\/tr>\n
\n3.5<\/td>\n \n29 Mei 2019<\/p>\n<\/td>\n
\nbuild inkremental yang lebih cepat, hilangkan tipe helper, pemeriksaan kelebihan properti yang ditingkatkan dalam tipe union, pemeriksaan tipe union yang lebih cerdas<\/p>\n<\/td>\n<\/tr>\n
\n\n3.6<\/p>\n<\/td>\n
28 Agustus 2019<\/td>\n Generator yang lebih ketat, penyebaran array yang lebih akurat, dukungan unicode yang lebih baik untuk pengidentifikasi<\/td>\n<\/tr>\n \n\n3.7<\/p>\n<\/td>\n
5 November 2019<\/td>\n Rantai Opsional, Penggabungan Nullish<\/td>\n<\/tr>\n \n3.8<\/td>\n 20 Februari 2020<\/td>\n \nImpor dan ekspor hanya tipe, ECMAScript bidang pribadi, menunggu tingkat atas<\/p>\n<\/td>\n<\/tr>\n
\n\n3.9<\/p>\n<\/td>\n
12 Mei 2020<\/td>\n <\/td>\n<\/tr>\n \n\n4.0<\/p>\n<\/td>\n
20 Agustus 2020<\/td>\n <\/td>\n<\/tr>\n \n4.1<\/td>\n 19 November 2020<\/td>\n <\/td>\n<\/tr>\n<\/tbody>\n<\/table>\nMemulai Menggunakan TypeScript<\/h2>\n
Cara Install Typescript :<\/strong><\/p>\n\n- Pastikan nodejs sudah terinstall<\/li>\n
- Jika sudah terinstall, buka cmd command line<\/strong> kalian dan ketikkan : npm install -g typescript<\/strong><\/li>\n
- Kemudian untuk mengetahui versi dari typescript yang terinstall ketikkan :\u00a0tsc -v<\/strong><\/li>\n<\/ul>\n
![\"\"](\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/11\/Screenshot_6-2.png\")
<\/p>\n
\n- Buat folder project,<\/strong>contoh :\u00a0 folder bernama TS.<\/li>\n
- Masuk ke folder TS dan buat file project dengan extensi .ts<\/strong>\u00a0(extensi typescript).<\/li>\n<\/ul>\n
\u00a0buatlah codingan seperti berikut :<\/p>\n
let num: number = 5;<\/strong>
\nlet name: string = ‘Belajar Typescript’;<\/strong>
\nlet isPresent: boolean = true;<\/strong><\/p>\n\n- Compile file typescript tersebut dengan cara : tsc latihan.ts.\u00a0<\/strong>Ketika berhasil mengcompile file typescript,typescript otomatis membuat file baru bertipe javascript ( .js). Jadi file typescript yang barusan dibuat diterjemahkan ke javascript.<\/li>\n<\/ul>\n
![\"\"](\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/11\/Screenshot_2-6.png\")
<\/p>\n
\n- Bahasa typescript membuat type data pada variabel seperti number,string,boolean.<\/em><\/strong>Adanya type data sangat membantu jika ingin mengerjakan proyek skala besar, ketika menyertakan type data pada parameter sebuah fungsi maka otomatis kalian mengetahui batasan atau type data seperti apa yang bisa masuk.<\/li>\n<\/ul>\n
class Car {
\nmodel: String;
\ndoors: Number;
\nisElectric: Boolean;<\/span> constructor(model: String, doors: Number, isElectric: Boolean) {
\nthis.model = model;
\nthis.doors = doors;
\nthis.isElectric = isElectric;
\n}<\/span><\/strong> displayMake(): void {<\/strong>
\n console.log(`This car is ${this.model}`);<\/strong>
\n }<\/strong>
\n}<\/span><\/p>\n\n- ketika di complie maka hasilnya :<\/li>\n<\/ul>\n
![\"\"](\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/11\/Screenshot_3-5.png\")
<\/p>\n
\n- Sebelah kiri adalah file typescript diatas membuat class objek bernama car yang memiliki properti bertipe data,kemudian juga ada constructor method bawaan dari sebuah bahasa yang memiliki konsep oop.<\/li>\n
- sebelah kanan adalah hasil compile typescript ke bahasa javascript.karena pada dasarnya konsep pada core javascript semuanya fungsi, (tidak ada class didalam javascript, kalaupun ada itu bakalan di konversi lagi menjadi fungsi).<\/li>\n
- Juga bisa mencoba konsep OOP lainnya,misal kita coba buat interface :<\/em><\/strong><\/li>\n<\/ul>\n
interface ICar {<\/strong>
\nmodel: String,<\/strong>
\nmake: String,<\/strong>
\ndisplay(): void<\/strong>
\n}<\/strong>
\nconst Car: ICar = {<\/strong>
\nmodel: ‘Avanza’,<\/strong>
\nmake: ‘Toyota’,<\/strong>
\ndisplay() => { console.log(‘hi’); }<\/strong>
\n}<\/strong><\/p>\n![\"\"](\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/11\/Screenshot_2-7.png\")
<\/p>\n
Untuk konsep OOP lainnya kalian bisa coba sendiri yang lain \ud83d\ude42<\/p>\n
<\/p>\n
sekian artikel tentang TypeScript ini semoga bisa bermanfaat \ud83d\ude42<\/p>\n
<\/p>\n\n\n
Kelebihan TypeScript<\/h2>\n\n- \u00a0Fitur pemrograman basis objek : <\/strong>TypeScript menyertakan serangkaian fitur Object Oriented Programming (OOP) yang bagus dan kompleks untuk diterapkan.Kecuali, jika kalian sebelumnya telah menggunakan JavaScript.Kalian dapat membandingkan kode yang dihasilkan JavaScript dengan Typescript.Fitur OOP ini membuat kode TypeScript sangat rapi dan teratur.<\/li>\n<\/ul>\n
\n- Tidak membutuhkan runtime plugin : <\/strong>Semua teknologi web modern menerjemahkan dirinya ke bentuk standar yang dapat dipahami dan dijalankan oleh semua browser utama.Ini termasuk bahasa skrip,seperti TypeScript atau CoffeeScript,bahasa Markup,seperti Haml atau Markdown dan bahasa Styling seperti Sass atau Less,dalam kasus TypeScript,semua skrip modern yang kalian tulis akan diterjemahkan ke JavaScript biasa sehingga dapat dijalankan oleh browser.<\/li>\n
- Meningkatkan performa tim : <\/strong>Menggunakan TypeScript meningkatkan kinerja keseluruhan.Baik ketika bekerja secara individu\u00a0 atau dalam tim.Tentu,kinerja yang lebih tinggi menghasilkan keuntungan lebih baik.TypeScript memungkinkan memperkenalkan developer mengenai proyek dengan lebih cepat.Struktur data dan tipe anotasi yang didefinisikan secara eksplisit membuatnya jauh lebih mudah untuk memahami keputusan yang dibuat oleh teknisi yang awalnya menulis kode.<\/li>\n
- TypeScript merupakan bahasa pemrograman populer : <\/strong>Hasil survei StackOverFlow tahun 2019 yang dilansir dari STXNext,TypeScript merupakan salah satu bahasa pemrograman terpopuler setelah Phyton.Bahasa ini banyak digunakan dalam produk perangkat lunak seperti Slack, Asana, atau Visual Studio Code.Banyak tools JavaScript yang\u00a0 ditulis dalam TypeScript, termasuk kerangka kerja seperti Angular, Aurelia, atau Ionic.<\/li>\n<\/ul>\n
Kekurangan TypeScript<\/h2>\n\n- Kurva pembelajaran <\/strong>:<\/em>Front end development sangat jenuh dengan semua jenis kerangka kerja dan teknologi dan biasanya sulit untuk mengikutinya.Meski TypeScript menjadi sangat populer,tidak semua developer JavaScript memahami TypeScript.Kurva pembelajaran ini membuat kerja tim lebih keras.<\/li>\n
- Membutuhkan tools : <\/strong>Meski browser pengunjung tidak membutuhkan plugin untuk menjalankan TypeScript,kalian membutuhkan tools khusus untuk editor atau IDE untuk mentranspilasi TypeScript.Ini juga termasuk penyempurnaan editor untuk menyorot dan memformat kata kunci TypeScript,jika kalian adalah pengguna Windows atau Mac,tools yang direkomendasikan adalah Visual Studio.Apabila menggunakan Linux,tools yang direkomendasikan adalah Visual Studio Code.<\/li>\n
- Sulit diedit menggunakan CMS\u00a0: <\/strong>Menggunakan CMS untuk mengembangkan website,kalian bisa mengedit file .css dan file skrip .js di portal admin.Namun ketika ingin menggunakan TypeScript, tidak mudah untuk mengeditnya di portal admin.Beberapa CMS memiliki plugin untuk memungkinkan mengedit TypeScript di portal, tetapi beberapa tidak,bahkan mungkin menjadi rumit dalam beberapa skenario.<\/li>\n
- Sistem pengetikan yang terlalu rumit : <\/strong>Sistem pengetikan TypeScript,meskipun ini adalah tools bagus dalam banyak hal,terkadang bisa rumit untuk digunakan.Ini tidak sepenuhnya merugikan TypeScript. Ini hanyalah sisi negatif yang berasal dari pengoperasian penuh dengan JavaScript yang dengan sendirinya menyisakan lebih banyak ruang untuk komplikasi.<\/li>\n<\/ul>\n
Riwayat Rilis TypeScript<\/span><\/span><\/h2>\n\n\n\n\nVersi<\/strong><\/p>\n<\/td>\nTanggal Rilis<\/span><\/strong><\/td>\n\nPerubahan<\/span><\/strong><\/p>\n<\/td>\n<\/tr>\n\n\n0.8<\/p>\n<\/td>\n
1 Oktober 2012<\/td>\n <\/td>\n<\/tr>\n \n\n0.9<\/p>\n<\/td>\n
\n18 Juni 2013<\/p>\n<\/td>\n
<\/td>\n<\/tr>\n \n1.0<\/td>\n 12 April 2014<\/td>\n <\/td>\n<\/tr>\n \n\n1.1<\/p>\n<\/td>\n
6 Oktober 2014<\/td>\n \npeningkatan kinerja.<\/p>\n<\/td>\n<\/tr>\n
\n1.3<\/td>\n 12 November 2014<\/td>\n \nPengubah protected,jenis tupel.<\/p>\n<\/td>\n<\/tr>\n
\n\n1.4<\/p>\n<\/td>\n
\n20 Januari 2015<\/p>\n<\/td>\n
Tipe gabungan\u00a0,deklarasi let\u00a0dan const,string template,pelindung tipe, alias tipe.<\/td>\n<\/tr>\n \n\n1.5<\/p>\n<\/td>\n
\n20 Juli 2015<\/p>\n<\/td>\n
\nModul ES6, kata kunci namespace,for..of,decorator.<\/p>\n<\/td>\n<\/tr>\n
\n1.6<\/td>\n 16 September 2015<\/td>\n \nDukungan JSX,tipe persimpangan,deklarasi tipe lokal,kelas\u00a0dan metode\u00a0abstrak,fungsi penjaga tipe yang ditentukan pengguna.<\/p>\n<\/td>\n<\/tr>\n
\n\n1.7<\/p>\n<\/td>\n
30 November 2015<\/td>\n \nAsync dan await dukungan.<\/p>\n<\/td>\n<\/tr>\n
\n\n1.8<\/p>\n<\/td>\n
22 Februari 2016<\/td>\n kendala generik, kesalahan analisis aliran kontrol, tipe string literal,allowsjs<\/td>\n<\/tr>\n \n2.0<\/td>\n 22 September 2016<\/td>\n \ntipe sadar null- dan tidak terdefinisi, analisis tipe berbasis aliran kontrol, tipe gabungan terdiskriminasi,tipe never,kata kunci readonly,tipe this\u00a0untuk fungsi<\/p>\n<\/td>\n<\/tr>\n
\n\n2.1<\/p>\n<\/td>\n
8 November 2016<\/td>\n Jenis keyof\u00a0dan pencarian, jenis yang dipetakan, penyebaran objek dan istirahat,<\/td>\n<\/tr>\n \n\n2.2<\/p>\n<\/td>\n
22 Februari 2017<\/td>\n \nkelas campuran, tipe\u00a0object.<\/p>\n<\/td>\n<\/tr>\n
\n2.3<\/td>\n 27 April 2017<\/td>\n \nIterasi async, default parameter generik, opsi ketat<\/p>\n<\/td>\n<\/tr>\n
\n\n2.4<\/p>\n<\/td>\n
27 Juni 2017<\/td>\n \nekspresi impor dinamis, enum string, inferensi yang ditingkatkan untuk generik, pelanggaran ketat untuk parameter callback<\/p>\n<\/td>\n<\/tr>\n
\n\n2.5<\/p>\n<\/td>\n
31 Agustus 2017<\/td>\n variabel klausa tangkapan opsional<\/td>\n<\/tr>\n \n\n2.6<\/p>\n<\/td>\n
31 Oktober 2017<\/td>\n \njenis fungsi yang ketat<\/p>\n<\/td>\n<\/tr>\n
\n2.7<\/td>\n 31 Januari 2018<\/td>\n \nproperti bernama konstan, tupel dengan panjang tetap<\/p>\n<\/td>\n<\/tr>\n
\n\n2.8<\/p>\n<\/td>\n
27 Maret 2018<\/td>\n tipe bersyarat,keyof ditingkatkan dengan tipe persimpangan<\/td>\n<\/tr>\n \n\n2.9<\/p>\n<\/td>\n
14 Mei 2018<\/td>\n \ndukungan untuk simbol dan literal numerik dalam keyof dan tipe objek yang dipetakan<\/p>\n<\/td>\n<\/tr>\n
\n\n3.0<\/p>\n<\/td>\n
30 Juli 2018<\/td>\n \nreferensi proyek, mengekstrak dan menyebarkan daftar parameter dengan tupel<\/p>\n<\/td>\n<\/tr>\n
\n\n3.1<\/p>\n<\/td>\n
27 September 2018<\/td>\n \njenis tuple dan array yang dapat dipetakan<\/p>\n<\/td>\n<\/tr>\n
\n\n3.2<\/p>\n<\/td>\n
30 November 2018<\/td>\n \npemeriksaan yang lebih ketat untuk mengikat, memanggil, dan menerapkan<\/p>\n<\/td>\n<\/tr>\n
\n3.3<\/td>\n 31 Januari 2019<\/td>\n \naturan santai tentang metode jenis serikat, build tambahan untuk proyek komposit<\/p>\n<\/td>\n<\/tr>\n
\n\n3.4<\/p>\n<\/td>\n
29 Maret 2019<\/td>\n \nbuild inkremental yang lebih cepat, inferensi tipe dari fungsi generik, pengubah readonly untuk array, pernyataan const, pengecekan tipe globalThis<\/p>\n<\/td>\n<\/tr>\n
\n3.5<\/td>\n \n29 Mei 2019<\/p>\n<\/td>\n
\nbuild inkremental yang lebih cepat, hilangkan tipe helper, pemeriksaan kelebihan properti yang ditingkatkan dalam tipe union, pemeriksaan tipe union yang lebih cerdas<\/p>\n<\/td>\n<\/tr>\n
\n\n3.6<\/p>\n<\/td>\n
28 Agustus 2019<\/td>\n Generator yang lebih ketat, penyebaran array yang lebih akurat, dukungan unicode yang lebih baik untuk pengidentifikasi<\/td>\n<\/tr>\n \n\n3.7<\/p>\n<\/td>\n
5 November 2019<\/td>\n Rantai Opsional, Penggabungan Nullish<\/td>\n<\/tr>\n \n3.8<\/td>\n 20 Februari 2020<\/td>\n \nImpor dan ekspor hanya tipe, ECMAScript bidang pribadi, menunggu tingkat atas<\/p>\n<\/td>\n<\/tr>\n
\n\n3.9<\/p>\n<\/td>\n
12 Mei 2020<\/td>\n <\/td>\n<\/tr>\n \n\n4.0<\/p>\n<\/td>\n
20 Agustus 2020<\/td>\n <\/td>\n<\/tr>\n \n4.1<\/td>\n 19 November 2020<\/td>\n <\/td>\n<\/tr>\n<\/tbody>\n<\/table>\nMemulai Menggunakan TypeScript<\/h2>\n
Cara Install Typescript :<\/strong><\/p>\n\n- Pastikan nodejs sudah terinstall<\/li>\n
- Jika sudah terinstall, buka cmd command line<\/strong> kalian dan ketikkan : npm install -g typescript<\/strong><\/li>\n
- Kemudian untuk mengetahui versi dari typescript yang terinstall ketikkan :\u00a0tsc -v<\/strong><\/li>\n<\/ul>\n
<\/p>\n
\n- Buat folder project,<\/strong>contoh :\u00a0 folder bernama TS.<\/li>\n
- Masuk ke folder TS dan buat file project dengan extensi .ts<\/strong>\u00a0(extensi typescript).<\/li>\n<\/ul>\n
\u00a0buatlah codingan seperti berikut :<\/p>\n
let num: number = 5;<\/strong>
\nlet name: string = ‘Belajar Typescript’;<\/strong>
\nlet isPresent: boolean = true;<\/strong><\/p>\n\n- Compile file typescript tersebut dengan cara : tsc latihan.ts.\u00a0<\/strong>Ketika berhasil mengcompile file typescript,typescript otomatis membuat file baru bertipe javascript ( .js). Jadi file typescript yang barusan dibuat diterjemahkan ke javascript.<\/li>\n<\/ul>\n
<\/p>\n
\n- Bahasa typescript membuat type data pada variabel seperti number,string,boolean.<\/em><\/strong>Adanya type data sangat membantu jika ingin mengerjakan proyek skala besar, ketika menyertakan type data pada parameter sebuah fungsi maka otomatis kalian mengetahui batasan atau type data seperti apa yang bisa masuk.<\/li>\n<\/ul>\n
class Car {
\nmodel: String;
\ndoors: Number;
\nisElectric: Boolean;<\/span> constructor(model: String, doors: Number, isElectric: Boolean) {
\nthis.model = model;
\nthis.doors = doors;
\nthis.isElectric = isElectric;
\n}<\/span><\/strong> displayMake(): void {<\/strong>
\n console.log(`This car is ${this.model}`);<\/strong>
\n }<\/strong>
\n}<\/span><\/p>\n\n- ketika di complie maka hasilnya :<\/li>\n<\/ul>\n
<\/p>\n
\n- Sebelah kiri adalah file typescript diatas membuat class objek bernama car yang memiliki properti bertipe data,kemudian juga ada constructor method bawaan dari sebuah bahasa yang memiliki konsep oop.<\/li>\n
- sebelah kanan adalah hasil compile typescript ke bahasa javascript.karena pada dasarnya konsep pada core javascript semuanya fungsi, (tidak ada class didalam javascript, kalaupun ada itu bakalan di konversi lagi menjadi fungsi).<\/li>\n
- Juga bisa mencoba konsep OOP lainnya,misal kita coba buat interface :<\/em><\/strong><\/li>\n<\/ul>\n
interface ICar {<\/strong>
\nmodel: String,<\/strong>
\nmake: String,<\/strong>
\ndisplay(): void<\/strong>
\n}<\/strong>
\nconst Car: ICar = {<\/strong>
\nmodel: ‘Avanza’,<\/strong>
\nmake: ‘Toyota’,<\/strong>
\ndisplay() => { console.log(‘hi’); }<\/strong>
\n}<\/strong><\/p>\n<\/p>\n
Untuk konsep OOP lainnya kalian bisa coba sendiri yang lain \ud83d\ude42<\/p>\n
<\/p>\n
sekian artikel tentang TypeScript ini semoga bisa bermanfaat \ud83d\ude42<\/p>\n
<\/p>\n\n\n
- \n
- Tidak membutuhkan runtime plugin : <\/strong>Semua teknologi web modern menerjemahkan dirinya ke bentuk standar yang dapat dipahami dan dijalankan oleh semua browser utama.Ini termasuk bahasa skrip,seperti TypeScript atau CoffeeScript,bahasa Markup,seperti Haml atau Markdown dan bahasa Styling seperti Sass atau Less,dalam kasus TypeScript,semua skrip modern yang kalian tulis akan diterjemahkan ke JavaScript biasa sehingga dapat dijalankan oleh browser.<\/li>\n
- Meningkatkan performa tim : <\/strong>Menggunakan TypeScript meningkatkan kinerja keseluruhan.Baik ketika bekerja secara individu\u00a0 atau dalam tim.Tentu,kinerja yang lebih tinggi menghasilkan keuntungan lebih baik.TypeScript memungkinkan memperkenalkan developer mengenai proyek dengan lebih cepat.Struktur data dan tipe anotasi yang didefinisikan secara eksplisit membuatnya jauh lebih mudah untuk memahami keputusan yang dibuat oleh teknisi yang awalnya menulis kode.<\/li>\n
- TypeScript merupakan bahasa pemrograman populer : <\/strong>Hasil survei StackOverFlow tahun 2019 yang dilansir dari STXNext,TypeScript merupakan salah satu bahasa pemrograman terpopuler setelah Phyton.Bahasa ini banyak digunakan dalam produk perangkat lunak seperti Slack, Asana, atau Visual Studio Code.Banyak tools JavaScript yang\u00a0 ditulis dalam TypeScript, termasuk kerangka kerja seperti Angular, Aurelia, atau Ionic.<\/li>\n<\/ul>\n
Kekurangan TypeScript<\/h2>\n
- \n
- Kurva pembelajaran <\/strong>:<\/em>Front end development sangat jenuh dengan semua jenis kerangka kerja dan teknologi dan biasanya sulit untuk mengikutinya.Meski TypeScript menjadi sangat populer,tidak semua developer JavaScript memahami TypeScript.Kurva pembelajaran ini membuat kerja tim lebih keras.<\/li>\n
- Membutuhkan tools : <\/strong>Meski browser pengunjung tidak membutuhkan plugin untuk menjalankan TypeScript,kalian membutuhkan tools khusus untuk editor atau IDE untuk mentranspilasi TypeScript.Ini juga termasuk penyempurnaan editor untuk menyorot dan memformat kata kunci TypeScript,jika kalian adalah pengguna Windows atau Mac,tools yang direkomendasikan adalah Visual Studio.Apabila menggunakan Linux,tools yang direkomendasikan adalah Visual Studio Code.<\/li>\n
- Sulit diedit menggunakan CMS\u00a0: <\/strong>Menggunakan CMS untuk mengembangkan website,kalian bisa mengedit file .css dan file skrip .js di portal admin.Namun ketika ingin menggunakan TypeScript, tidak mudah untuk mengeditnya di portal admin.Beberapa CMS memiliki plugin untuk memungkinkan mengedit TypeScript di portal, tetapi beberapa tidak,bahkan mungkin menjadi rumit dalam beberapa skenario.<\/li>\n
- Sistem pengetikan yang terlalu rumit : <\/strong>Sistem pengetikan TypeScript,meskipun ini adalah tools bagus dalam banyak hal,terkadang bisa rumit untuk digunakan.Ini tidak sepenuhnya merugikan TypeScript. Ini hanyalah sisi negatif yang berasal dari pengoperasian penuh dengan JavaScript yang dengan sendirinya menyisakan lebih banyak ruang untuk komplikasi.<\/li>\n<\/ul>\n
Riwayat Rilis TypeScript<\/span><\/span><\/h2>\n
\n\n
\n \n Versi<\/strong><\/p>\n<\/td>\n
Tanggal Rilis<\/span><\/strong><\/td>\n \n Perubahan<\/span><\/strong><\/p>\n<\/td>\n<\/tr>\n
\n \n 0.8<\/p>\n<\/td>\n
1 Oktober 2012<\/td>\n <\/td>\n<\/tr>\n \n \n 0.9<\/p>\n<\/td>\n
\n 18 Juni 2013<\/p>\n<\/td>\n
<\/td>\n<\/tr>\n \n 1.0<\/td>\n 12 April 2014<\/td>\n <\/td>\n<\/tr>\n \n \n 1.1<\/p>\n<\/td>\n
6 Oktober 2014<\/td>\n \n peningkatan kinerja.<\/p>\n<\/td>\n<\/tr>\n
\n 1.3<\/td>\n 12 November 2014<\/td>\n \n Pengubah protected,jenis tupel.<\/p>\n<\/td>\n<\/tr>\n
\n \n 1.4<\/p>\n<\/td>\n
\n 20 Januari 2015<\/p>\n<\/td>\n
Tipe gabungan\u00a0,deklarasi let\u00a0dan const,string template,pelindung tipe, alias tipe.<\/td>\n<\/tr>\n \n \n 1.5<\/p>\n<\/td>\n
\n 20 Juli 2015<\/p>\n<\/td>\n
\n Modul ES6, kata kunci namespace,for..of,decorator.<\/p>\n<\/td>\n<\/tr>\n
\n 1.6<\/td>\n 16 September 2015<\/td>\n \n Dukungan JSX,tipe persimpangan,deklarasi tipe lokal,kelas\u00a0dan metode\u00a0abstrak,fungsi penjaga tipe yang ditentukan pengguna.<\/p>\n<\/td>\n<\/tr>\n
\n \n 1.7<\/p>\n<\/td>\n
30 November 2015<\/td>\n \n Async dan await dukungan.<\/p>\n<\/td>\n<\/tr>\n
\n \n 1.8<\/p>\n<\/td>\n
22 Februari 2016<\/td>\n kendala generik, kesalahan analisis aliran kontrol, tipe string literal,allowsjs<\/td>\n<\/tr>\n \n 2.0<\/td>\n 22 September 2016<\/td>\n \n tipe sadar null- dan tidak terdefinisi, analisis tipe berbasis aliran kontrol, tipe gabungan terdiskriminasi,tipe never,kata kunci readonly,tipe this\u00a0untuk fungsi<\/p>\n<\/td>\n<\/tr>\n
\n \n 2.1<\/p>\n<\/td>\n
8 November 2016<\/td>\n Jenis keyof\u00a0dan pencarian, jenis yang dipetakan, penyebaran objek dan istirahat,<\/td>\n<\/tr>\n \n \n 2.2<\/p>\n<\/td>\n
22 Februari 2017<\/td>\n \n kelas campuran, tipe\u00a0object.<\/p>\n<\/td>\n<\/tr>\n
\n 2.3<\/td>\n 27 April 2017<\/td>\n \n Iterasi async, default parameter generik, opsi ketat<\/p>\n<\/td>\n<\/tr>\n
\n \n 2.4<\/p>\n<\/td>\n
27 Juni 2017<\/td>\n \n ekspresi impor dinamis, enum string, inferensi yang ditingkatkan untuk generik, pelanggaran ketat untuk parameter callback<\/p>\n<\/td>\n<\/tr>\n
\n \n 2.5<\/p>\n<\/td>\n
31 Agustus 2017<\/td>\n variabel klausa tangkapan opsional<\/td>\n<\/tr>\n \n \n 2.6<\/p>\n<\/td>\n
31 Oktober 2017<\/td>\n \n jenis fungsi yang ketat<\/p>\n<\/td>\n<\/tr>\n
\n 2.7<\/td>\n 31 Januari 2018<\/td>\n \n properti bernama konstan, tupel dengan panjang tetap<\/p>\n<\/td>\n<\/tr>\n
\n \n 2.8<\/p>\n<\/td>\n
27 Maret 2018<\/td>\n tipe bersyarat,keyof ditingkatkan dengan tipe persimpangan<\/td>\n<\/tr>\n \n \n 2.9<\/p>\n<\/td>\n
14 Mei 2018<\/td>\n \n dukungan untuk simbol dan literal numerik dalam keyof dan tipe objek yang dipetakan<\/p>\n<\/td>\n<\/tr>\n
\n \n 3.0<\/p>\n<\/td>\n
30 Juli 2018<\/td>\n \n referensi proyek, mengekstrak dan menyebarkan daftar parameter dengan tupel<\/p>\n<\/td>\n<\/tr>\n
\n \n 3.1<\/p>\n<\/td>\n
27 September 2018<\/td>\n \n jenis tuple dan array yang dapat dipetakan<\/p>\n<\/td>\n<\/tr>\n
\n \n 3.2<\/p>\n<\/td>\n
30 November 2018<\/td>\n \n pemeriksaan yang lebih ketat untuk mengikat, memanggil, dan menerapkan<\/p>\n<\/td>\n<\/tr>\n
\n 3.3<\/td>\n 31 Januari 2019<\/td>\n \n aturan santai tentang metode jenis serikat, build tambahan untuk proyek komposit<\/p>\n<\/td>\n<\/tr>\n
\n \n 3.4<\/p>\n<\/td>\n
29 Maret 2019<\/td>\n \n build inkremental yang lebih cepat, inferensi tipe dari fungsi generik, pengubah readonly untuk array, pernyataan const, pengecekan tipe globalThis<\/p>\n<\/td>\n<\/tr>\n
\n 3.5<\/td>\n \n 29 Mei 2019<\/p>\n<\/td>\n
\n build inkremental yang lebih cepat, hilangkan tipe helper, pemeriksaan kelebihan properti yang ditingkatkan dalam tipe union, pemeriksaan tipe union yang lebih cerdas<\/p>\n<\/td>\n<\/tr>\n
\n \n 3.6<\/p>\n<\/td>\n
28 Agustus 2019<\/td>\n Generator yang lebih ketat, penyebaran array yang lebih akurat, dukungan unicode yang lebih baik untuk pengidentifikasi<\/td>\n<\/tr>\n \n \n 3.7<\/p>\n<\/td>\n
5 November 2019<\/td>\n Rantai Opsional, Penggabungan Nullish<\/td>\n<\/tr>\n \n 3.8<\/td>\n 20 Februari 2020<\/td>\n \n Impor dan ekspor hanya tipe, ECMAScript bidang pribadi, menunggu tingkat atas<\/p>\n<\/td>\n<\/tr>\n
\n \n 3.9<\/p>\n<\/td>\n
12 Mei 2020<\/td>\n <\/td>\n<\/tr>\n \n \n 4.0<\/p>\n<\/td>\n
20 Agustus 2020<\/td>\n <\/td>\n<\/tr>\n \n 4.1<\/td>\n 19 November 2020<\/td>\n <\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n Memulai Menggunakan TypeScript<\/h2>\n
Cara Install Typescript :<\/strong><\/p>\n
- \n
- Pastikan nodejs sudah terinstall<\/li>\n
- Jika sudah terinstall, buka cmd command line<\/strong> kalian dan ketikkan : npm install -g typescript<\/strong><\/li>\n
- Kemudian untuk mengetahui versi dari typescript yang terinstall ketikkan :\u00a0tsc -v<\/strong><\/li>\n<\/ul>\n
<\/p>\n- \n
- Buat folder project,<\/strong>contoh :\u00a0 folder bernama TS.<\/li>\n
- Masuk ke folder TS dan buat file project dengan extensi .ts<\/strong>\u00a0(extensi typescript).<\/li>\n<\/ul>\n
\u00a0buatlah codingan seperti berikut :<\/p>\n
let num: number = 5;<\/strong>
\nlet name: string = ‘Belajar Typescript’;<\/strong>
\nlet isPresent: boolean = true;<\/strong><\/p>\n- \n
- Compile file typescript tersebut dengan cara : tsc latihan.ts.\u00a0<\/strong>Ketika berhasil mengcompile file typescript,typescript otomatis membuat file baru bertipe javascript ( .js). Jadi file typescript yang barusan dibuat diterjemahkan ke javascript.<\/li>\n<\/ul>\n<\/p>\n
- \n
- Bahasa typescript membuat type data pada variabel seperti number,string,boolean.<\/em><\/strong>Adanya type data sangat membantu jika ingin mengerjakan proyek skala besar, ketika menyertakan type data pada parameter sebuah fungsi maka otomatis kalian mengetahui batasan atau type data seperti apa yang bisa masuk.<\/li>\n<\/ul>\n
class Car {
\nmodel: String;
\ndoors: Number;
\nisElectric: Boolean;<\/span> constructor(model: String, doors: Number, isElectric: Boolean) {
\nthis.model = model;
\nthis.doors = doors;
\nthis.isElectric = isElectric;
\n}<\/span><\/strong> displayMake(): void {<\/strong>
\n console.log(`This car is ${this.model}`);<\/strong>
\n }<\/strong>
\n}<\/span><\/p>\n- \n
- ketika di complie maka hasilnya :<\/li>\n<\/ul>\n<\/p>\n
- \n
- Sebelah kiri adalah file typescript diatas membuat class objek bernama car yang memiliki properti bertipe data,kemudian juga ada constructor method bawaan dari sebuah bahasa yang memiliki konsep oop.<\/li>\n
- sebelah kanan adalah hasil compile typescript ke bahasa javascript.karena pada dasarnya konsep pada core javascript semuanya fungsi, (tidak ada class didalam javascript, kalaupun ada itu bakalan di konversi lagi menjadi fungsi).<\/li>\n
- Juga bisa mencoba konsep OOP lainnya,misal kita coba buat interface :<\/em><\/strong><\/li>\n<\/ul>\n
interface ICar {<\/strong>
\nmodel: String,<\/strong>
\nmake: String,<\/strong>
\ndisplay(): void<\/strong>
\n}<\/strong>
\nconst Car: ICar = {<\/strong>
\nmodel: ‘Avanza’,<\/strong>
\nmake: ‘Toyota’,<\/strong>
\ndisplay() => { console.log(‘hi’); }<\/strong>
\n}<\/strong><\/p>\n<\/p>\nUntuk konsep OOP lainnya kalian bisa coba sendiri yang lain \ud83d\ude42<\/p>\n
<\/p>\n
sekian artikel tentang TypeScript ini semoga bisa bermanfaat \ud83d\ude42<\/p>\n
<\/p>\n\n\n
- ketika di complie maka hasilnya :<\/li>\n<\/ul>\n
- Bahasa typescript membuat type data pada variabel seperti number,string,boolean.<\/em><\/strong>Adanya type data sangat membantu jika ingin mengerjakan proyek skala besar, ketika menyertakan type data pada parameter sebuah fungsi maka otomatis kalian mengetahui batasan atau type data seperti apa yang bisa masuk.<\/li>\n<\/ul>\n
- Masuk ke folder TS dan buat file project dengan extensi .ts<\/strong>\u00a0(extensi typescript).<\/li>\n<\/ul>\n
- Kemudian untuk mengetahui versi dari typescript yang terinstall ketikkan :\u00a0tsc -v<\/strong><\/li>\n<\/ul>\n
- Membutuhkan tools : <\/strong>Meski browser pengunjung tidak membutuhkan plugin untuk menjalankan TypeScript,kalian membutuhkan tools khusus untuk editor atau IDE untuk mentranspilasi TypeScript.Ini juga termasuk penyempurnaan editor untuk menyorot dan memformat kata kunci TypeScript,jika kalian adalah pengguna Windows atau Mac,tools yang direkomendasikan adalah Visual Studio.Apabila menggunakan Linux,tools yang direkomendasikan adalah Visual Studio Code.<\/li>\n
- Meningkatkan performa tim : <\/strong>Menggunakan TypeScript meningkatkan kinerja keseluruhan.Baik ketika bekerja secara individu\u00a0 atau dalam tim.Tentu,kinerja yang lebih tinggi menghasilkan keuntungan lebih baik.TypeScript memungkinkan memperkenalkan developer mengenai proyek dengan lebih cepat.Struktur data dan tipe anotasi yang didefinisikan secara eksplisit membuatnya jauh lebih mudah untuk memahami keputusan yang dibuat oleh teknisi yang awalnya menulis kode.<\/li>\n