Pelajari TypeScript Dengan Mudah – Hari ini, kita hendak Menekuni TypeScript Dalam 30 Menit memandang TypeScript, yang ialah bahasa yang bisa dikompilasi jadi JavaScript serta didesain spesial buat developer yang meningkatkan aplikasi besar serta lingkungan.

Pelajari TypeScript Dengan Mudah

Benjaminsterling – Ini memperoleh banyak rancangan pemrograman dari bahasa semacam C# serta Java. Rancangan ini meningkatkan lebih banyak patuh serta kedisiplinan ke JavaScript yang awal mulanya amat bebas serta jenis leluasa.

Sasaran audiens dari bimbingan ini merupakan mereka yang ahli dalam JavaScript, namun sedang pendatang baru dalam TypeScript. javascriptoo memberitahukan beberapa besar wawasan dasar serta guna tombol, serta membagikan banyak ilustrasi dengan isyarat pendapat buat menolong Kamu menguasai bahasa yang sesungguhnya dipakai. Mari mulai!

Khasiat Memakai TypeScript

Pelajari TypeScript Dengan Mudah
musliadii.wordpress.com

JavaScript betul- betul baik, Kamu bisa jadi bingung apakah aku betul- betul butuh berlatih TypeScript? Dengan cara teknis, Kamu tidak butuh menekuni TypeScript buat jadi developer yang bagus, mayoritas orang bisa melaksanakannya tanpa itu. Tetapi, memakai TypeScript tentu mempunyai keunggulan:

Baca Juga : Pengertian jQuery Event Beserta Penggunaannya

Sebab diketik dengan cara statis, isyarat yang ditulis dalam TypeScript lebih bisa diprediksi serta biasanya lebih gampang buat di- debug.

Berkah materi, ruang julukan, serta sokongan OOP yang kokoh, ini memudahkan pengaturan dasar isyarat buat aplikasi yang besar serta lingkungan.

TypeScript mempunyai tahap kumpulan buat JavaScript yang bisa membekuk bermacam kekeliruan saat sebelum menggapai runtime serta mengganggu sebagian konten.

Kerangka kegiatan Angular 2 yang hendak tiba ditulis dalam TypeScript serta dianjurkan supaya developer memakai bahasa ini dalam cetak biru mereka.

Baca Juga : Rekomendasi Buku Pemrograman Terbaik

Nilai terakhir sesungguhnya yang sangat berarti untuk banyak orang, serta itu merupakan alibi penting kenapa mereka memasukkan TypeScript. Angular 2 dikala ini ialah salah satu kerangka kegiatan yang sangat terkenal. Walaupun developer bisa memakai JavaScript lazim di dalamnya, beberapa besar bimbingan serta ilustrasi ditulis dalam TS. Dikala Angular 2 meluaskan komunitasnya, terus menjadi banyak orang dengan cara natural hendak memilah TypeScript.

Pasang TypeScript

Bimbingan ini menginginkan Node. js serta Npm. Bila Kamu belum menginstalnya, silakan buka di mari.

Metode termudah buat menata TypeScript merupakan lewat npm. Dengan memakai perintah selanjutnya, kita bisa menginstal paket TypeScript dengan cara garis besar alhasil compiler TS bisa dipakai di seluruh cetak biru kita:

npm install- g typescript

Cobalah buat membuka halte di mana saja serta jalankan tsc- v buat memandang apakah telah terpasang dengan betul.

tsc- v

Version 1. 8. 10

Pengedit Bacaan Dengan Sokongan TypeScript

TypeScript merupakan cetak biru open source, namun dibesarkan serta diatur oleh Microsoft, jadi awal mulanya cuma dibantu di program Visual Sanggar Microsoft. Dikala ini, terdapat banyak pengedit bacaan serta Ilham yang diadakan oleh mesin ataupun lewat plugin yang sediakan sokongan buat sintaks TypeScript, anjuran penanganan otomatis, penahanan kekeliruan, serta apalagi kompiler bawaan.

Visual Sanggar Code- Microsoft merupakan pengedit isyarat pangkal terbuka enteng yang lain. Sokongan TypeScript bawaan.

Plugin free sah Sublime Text.

Tipe terkini WebStorm dilengkapi dengan sokongan bawaan.

Yang lain, tercantum Vim, Molekul, Emacs, dan lain- lain.

TypeScript ditulis dalam file. ts( buat JSX ditulis dalam. tsx), ini tidak bisa dipakai dengan cara langsung di browser serta butuh diganti ke. js lazim terlebih dulu. Cara kumpulan bisa dicoba dengan bermacam metode:

Maanfaatkan perlengkapan baris perintah tsc yang dituturkan di atas di halte.

Langsung di Visual Sanggar ataupun Ilham serta pengedit bacaan yang lain.

Jalankan program memakai kewajiban otomatis, semacam gulp.

Kita menciptakan kalau metode awal merupakan yang termudah serta sangat ramah pendatang baru, jadi inilah metode yang hendak kita maanfaatkan dalam pelajaran ini.

Baca Pula: Panduan Membuat Lukisan Zoom Vanilla JavaScript

Perintah selanjutnya memperoleh file TypeScript bernama bermain. ts serta mengubahnya jadi tipe JavaScript bermain. js. Bila bermain. js telah terdapat, itu hendak ditimpa.

tsc bermain. ts

Kita pula bisa mengkompilasi banyak file sekalian dengan membuat catatan seluruh file ataupun mempraktikkan wildcard:

# Will result in separate. js files: bermain. js worker. js.

tsc bermain. ts worker. ts

# Compiles all. ts files in the current berkas. Does NOT work recursively.

tsc*. ts

Sehabis melaksanakan pergantian, kita pula bisa memakai alternatif–watch buat dengan cara otomatis mengkompilasi file TypeScript:

# Initializes a watcher process that will keep bermain. js up to date.

tsc bermain. ts– watch

Konsumen TypeScript yang lebih ahli pula bisa membuat file tsconfig. json, yang terdiri dari bermacam pengaturan build. Dikala menanggulangi cetak biru besar dengan beberapa besar file. ts, file bentuk amat aman sebab bisa menuntaskan cara dengan cara otomatis. Kamu bisa membaca lebih lanjut mengenai tsconfig. json dalam pemilihan TypeScript.

Pengetikan Statis

Fitur TypeScript yang amat istimewa merupakan sokongan buat pengetikan statis. Ini berarti Kamu bisa menyatakan jenis elastis, serta compiler hendak membenarkan kalau elastis itu tidak diberi jenis angka yang salah. Bila Kamu melenyapkan keterangan jenis, keterangan itu hendak disimpulkan dengan cara otomatis dari isyarat Kamu.

Ini suatu ilustrasi. Elastis, patokan guna, ataupun angka kembalian apa juga bisa didetetapkan pada dikala inisialisasi:

var burger: string= hamburger,

atau atau String

calories: number= 300,

atau atau Numeric

tasty: boolean= true;

atau atau Boolean

atau atau Alternatively, you can omit the type declaration:

atau atau var burger= hamburger;

atau atau The function expects a string and an integer.

atau atau It doesnt return anything so the type of the function itself is void.

function speak( food: string, energi: number): void

console. batang kayu(” Our”+ food+” has”+ energi+” calories.”);

speak( burger, calories);

Sebab TypeScript sudah dikompilasi ke JavaScript, serta yang terakhir tidak ketahui rupanya, itu dihapus seluruhnya:

atau atau JavaScript code from the above TS example.

var burger= hamburger,

calories= 300,

tasty= true;

function speak( food, energi)

console. batang kayu(” Our”+ food+” has”+ energi+” calories.”);

speak( burger, calories);

Tetapi, bila kita berupaya melaksanakan suatu yang bawah tangan, pada durasi kumpulan, tsc hendak mengingatkan kita kalau terdapat kekeliruan dalam isyarat. Misalnya:

atau atau The given type is boolean, the provided value is a string.

var tasty: boolean=” I havent tried it yet”;

bermain. ts( 1, 5): error TS2322: Type string is not assignable to type boolean.

Bila kita mengirimkan patokan yang salah ke guna itu, itu pula hendak mengingatkan kita:

function speak( food: string, energi: number): void

console. batang kayu(” Our”+ food+” has”+ energi+” calories.”);

atau atau Arguments dont match the function parameters.

speak(” tripple cheesburger”,” a ton of”);

bermain. ts( 5, 30): error TS2345: Argument of type string is not assignable to patokan of type number.

Selanjutnya ini merupakan sebagian jenis informasi yang sangat biasa dipakai:

Angka Angka- Semua diwakili oleh jenis nilai, serta tidak terdapat arti terpisah buat angka bundar, nilai floating- point ataupun wujud yang lain.

Tipe bacaan string, semacam string JS lazim, bisa diapit dengan“ ciri cukil tunggal” ataupun“ ciri cukil dobel”.

Angka Boolean- true ataupun false, memakai 0 serta 1 hendak menimbulkan kekeliruan kumpulan.

Variabel- arbitrer dengan jenis ini bisa mempunyai angka yang disetel ke string, nilai, ataupun angka yang lain.

Array- Ada 2 mungkin sintaks: my_arr: number[];; ataupun my_arr: Array<number
.

Tidak asi dipakai buat guna yang tidak mengembalikan apa juga.

Buat memandang catatan seluruh tipe yang ada, buka pemilihan sah TypeScript.

Antarmuka

Antarmuka dipakai buat mengecek apakah sesuatu subjek cocok dengan bentuk khusus. Dengan mendeskripsikan antarmuka, kita bisa melabeli campuran elastis khusus buat membenarkan kalau mereka senantiasa bersama. Dikala dikonversi ke JavaScript, antarmuka lenyap– salah satunya tujuan mereka merupakan menolong sepanjang tahap pengembangan.

Baca Pula: Penafsiran Framework Rails& Ruby

Dalam ilustrasi selanjutnya, kita mendeskripsikan antarmuka simpel buat mengecek jenis patokan guna:

atau atau Here we define our Food interface, its properties, and their types.

interface Food

name: string;

calories: number;

atau atau We tell our function to expect an object that fulfills the Food interface.

atau atau This way we know that the properties we need will always be available.

function speak( food: Food): void

console. batang kayu(” Our”+ food. name+” has”+ food. calories+” calories.”);

atau atau We define an object that has all of the properties the Food interface expects.

atau atau Notice that types will be inferred automatically.

var ice_cream=

name:” ice cream”,

calories: 200

speak( ice_cream);

Antrean ciri tidak jadi permasalahan. Kita cuma butuh menunjukkan ciri yang dibutuhkan serta menjadikannya jenis yang betul. Bila terdapat yang kurang, rupanya salah ataupun namanya berlainan, kompilator hendak mewarnainya buat kita.

interface Food

name: string;

calories: number;

function speak( food: Food): void

console. batang kayu(” Our”+ food. name+” has”+ food. calories+” grams.”);

atau atau Weve made a deliberate mistake and name is misspelled as nmae.

var ice_cream=

nmae:” ice cream”,

calories: 200

speak( ice_cream);

bermain. ts( 16, 7): error TS2345: Argument of type nmae: string; calories: number;

is not assignable to patokan of type Food.

Property name is missing in type nmae: string; calories: number;.

Ini merupakan bimbingan pendatang baru, jadi kita tidak hendak mangulas lebih perinci mengenai antarmuka. Tetapi, tidak hanya yang kita sebutkan di mari, mereka mempunyai banyak perihal lain, jadi kita menganjurkan Kamu mengecek pemilihan TypeScript di mari.

Dikala membuat aplikasi besar, style pemrograman mengarah subjek merupakan opsi awal banyak developer, paling utama dalam bahasa semacam Java ataupun C#. TypeScript sediakan sistem kategori yang amat mendekati dengan bahasa ini, tercantum pewarisan, kategori abstrak, aplikasi antarmuka, penyetel atau pemilik, dan lain- lain.

Butuh dituturkan kalau semenjak pembaruan JavaScript terkini( ECMAScript 2015), kategori menempel pada Vanilla JS serta bisa dipakai tanpa TypeScript. Kedua aplikasi amat mendekati, namun terdapat perbandingan, TypeScript lebih kencang.

Meneruskan tema santapan, ini merupakan kategori TypeScript simpel:

class Menu

atau atau Our properties:

atau atau By default they are public, but can also be private or protected.

items: Array<string
;

atau atau The items in the menu, an array of strings.

pages: number;

atau atau How many pages will the menu be, a number.

atau atau A straightforward constructor.

constructor( item_list: Array<string
, total_pages: number)

atau atau The this keyword is mandatory.

this. items= item_list;

this. pages= total_pages;

atau atau Methods

list(): void

console. batang kayu(” Our menu for today:”);

for( var i=0; i<this. items. length; i++)

console. batang kayu( this. items[i]);

atau atau Create a new instance of the Menu class.

var sundayMenu= new Menu([” pancakes”,” waffles”,” orange jus”], 1);

atau atau Call the list method.

sundayMenu. list();

Siapapun yang sudah menulis paling tidak sedikit Java ataupun C# wajib mengenali sintaks ini. Perihal yang serupa legal buat peninggalan:

class HappyMeal extends Menu

atau atau Properties are inherited

atau atau A new constructor has to be defined.

constructor( item_list: Array<string
, total_pages: number)

atau atau In this case we want the exact same constructor as the parent class( Menu),

atau atau To automatically copy it we can call luar biasa()- a reference to the parents constructor.

luar biasa( item_list, total_pages);

atau atau Just like the properties, methods are inherited from the parent.

atau atau However, we want to override the list() function so we redefine it.

list(): void

console. batang kayu(” Our special menu for children:”);

for( var i=0; i<this. items. length; i++)

console. batang kayu( this. items[i]);

atau atau Create a new instance of the HappyMeal class.

var menu_for_children= new HappyMeal([” candy”,” drink”,” toy”], 1);

atau atau This time the batang kayu message will begin with the special introduction.

menu_for_children. list();

Buat menekuni lebih lanjut mengenai kelas- kelas di TS, Kamu bisa membaca pemilihan di mari.

Generik merupakan templat yang membolehkan guna yang serupa menyambut bermacam tipe patokan. Memakai generik buat membuat bagian yang bisa dipakai kembali lebih bagus dari memakai jenis informasi apa juga, sebab generik menjaga jenis elastis yang masuk serta pergi darinya.

Ilustrasi sederhananya merupakan naskah yang mengutip patokan serta mengembalikan array yang bermuatan patokan yang serupa.

atau atau The<T
after the function name symbolizes that its a generic function.

atau atau When we call the function, every instance of T will be replaced with the actual provided type.

atau atau Receives one argument of type T,

atau atau Returns an array of type T.

function genericFunc<T
( argument: T): T[]

var arrayOfT: T[]=[];

atau atau Create empty array of type T.

arrayOfT. push( argument);

atau atau Push, now arrayOfT=[argument].

return arrayOfT;

var arrayFromString= genericFunc<string
(” beep”);

console. batang kayu( arrayFromString[0]);

atau atau” beep”

console. batang kayu( typeof arrayFromString[0])

atau atau String

var arrayFromNumber= genericFunc( 42);

console. batang kayu( arrayFromNumber[0]);

atau atau 42

console. batang kayu( typeof arrayFromNumber[0])

atau atau number

Dikala memanggil guna ini buat awal kalinya, kita dengan cara buku petunjuk menata jenis jadi string. Ini tidak butuh, sebab kompilator bisa memandang patokan apa yang sudah diteruskan serta dengan cara otomatis bisa memastikan jenis mana yang terbaik untuknya, misalnya pada panggilan kedua.

Walaupun ini tidak harus, ini dikira selaku aplikasi yang bagus buat sediakan jenis tiap dikala, sebab dalam suasana yang lebih lingkungan, compiler bisa jadi tidak bisa menduga jenis yang betul.

Pemilihan TypeScript melibatkan sebagian ilustrasi buntut, tercantum kategori generik, menggabungkannya dengan antarmuka, serta banyak lagi. Kamu bisa menciptakannya di mari.

Modul

Rancangan berarti yang lain pada aplikasi besar merupakan modularitas. Dibanding dengan memilah satu isyarat jadi file yang terdiri dari 10. 000 baris, memilah isyarat jadi banyak bagian kecil yang bisa dipakai kembali bisa menolong cetak biru Kamu senantiasa tertib serta gampang dimengerti.

TypeScript memberitahukan sintaks buat mengekspor serta mengimpor materi, namun tidak bisa menanggulangi koneksi faktual dampingi file. Buat mengaktifkan materi eksternal, TS memercayakan pustaka pihak ketiga: require. js buat aplikasi browser serta CommonJS buat Node. js. Ayo kita amati ilustrasi simpel materi TypeScript dengan require. js:

Kita hendak mempunyai 2 file. Satu mengekspor guna, yang lain mengimpor serta memanggilnya.

exporter. ts

var sayHi= function(): void

console. batang kayu(” Hello!”);

export= sayHi;

importer. ts

import sayHi= require(. atau exporter);

sayHi();

Saat ini, kita butuh mendownload require. js serta memasukkannya ke dalam script tag- click di mari. Tahap terakhir merupakan mengkompilasi 2 file. ts kita. Berlainan dengan materi CommonJS, patokan bonus butuh ditambahkan buat berikan ketahui TypeScript kalau kita lagi membuat materi buat require. js( pula diketahui selaku AMD).

tsc– module amd*. ts

Modulnya amat lingkungan serta terletak di luar jangkauan bimbingan ini. Bila Kamu mau lalu membaca mengenai mereka, silakan datangi pemilihan TS- di mari.

File keterangan pihak ketiga

Dikala memakai pustaka yang awal mulanya didesain buat JavaScript lazim, kita butuh mempraktikkan file keterangan supaya pustaka itu cocok dengan TypeScript. Perpanjangan file keterangan merupakan. d. ts, yang bermuatan bermacam data mengenai library serta API- nya.

File keterangan TypeScript umumnya ditulis dengan tangan, namun amat bisa jadi kalau bibliotek yang Kamu butuhkan telah mempunyai. d. ts. File terbuat oleh orang lain. Absolute Type merupakan repositori khalayak terbanyak, yang bermuatan lebih dari seribu file bibliotek. Terdapat pula materi Node. js yang terkenal buat mengatur arti TypeScript, yang diucap Pengetikan.

Bila Kamu sedang butuh menulis file keterangan Kamu sendiri, bimbingan ini hendak menolong Kamu mengawali.

Fitur yang hendak tiba di TypeScript 2. 0

TypeScript sedang dalam pengembangan aktif serta lalu bertumbuh. Pada dikala menulis bimbingan ini, tipe LTS merupakan 1. 8. 10, namun Microsoft sudah mengeluarkan TypeScript 2. 0 Beta. Ini bisa dipakai buat pengetesan khalayak, Kamu bisa menjajalnya saat ini:

npm install- g typescript@beta

Ini memberitahukan sebagian rancangan terkini yang aman, semacam:

Bendera tipe bukan- nol bisa menghindari angka elastis khusus disetel ke nihil ataupun tidak didetetapkan.

Sistem yang terkini diperbaiki dapat langsung memperoleh file keterangan lewat instalasi npm.

Analisa jenis gerakan pengawasan bisa membekuk kekeliruan yang tadinya terlewatkan oleh pembuat.

Sebagian inovasi dalam sintaks materi ekspor atau memasukkan.

Fitur lain yang sudah lama ditunggu merupakan keahlian buat mengendalikan gerakan guna asinkron di gulungan async atau await. Ini wajib ada dalam pembaruan 2. 1 kelak.

Pustaka lebih lanjut

Awal mulanya, jumlah data dalam akta sah bisa jadi sedikit kelewatan, tetapi khasiat yang diterima darinya hendak amat besar. Bimbingan kita hendak dipakai selaku pengantar, jadi kita tidak mangulas seluruh ayat dalam pemilihan TypeScript. Selanjutnya merupakan sebagian rancangan yang lebih bermanfaat yang sudah kita lewati:

Namespace.

  • Enumerasi.
  • Proteksi jenis serta jenis buntut.
  • Menulis JSX di TypeScript.

Kesimpulannya

Mudah- mudahan Kamu menikmati bimbingan ini!

Apakah Kamu mempunyai pandangan mengenai TypeScript? Apakah Kamu memikirkan buat memakainya dalam cetak biru Kamu? Janganlah ragu buat berpendapat di dasar ini!

Benjamin Sterling - Informasi berserta modul jQuery Terlengkap