Cara Memulai dengan Tekan

Tekan adalah salah satu dari sekelompok bahasa yang menggunakan Javascript. Runtime sebagai lingkungan eksekusi: File-file yang berisi kode naskah dikompilasi ke dalam JavaScript normal, yang kemudian dapat dijalankan oleh browser.

• Penawaran Natal: Hemat hingga 49% pada berlangganan majalah Desainer Web

Jeremy Ashkenas pertama kali membuat konsep ini populer dengan bahasa CoffeeCript-nya, tetapi sayangnya, sintaksnya yang relatif singkat sulit dipelajari bagi pengembang yang berkenalan dengan C # atau Visual Basic.

Seperti yang diperluas Microsoft ke dalam teknologi Web 2.0, ia memilih untuk mengambil inspirasi dari Jeremy Ashkena. Karena kemampuan Visual Studio, pengembang dapat meretas sambil mendapat untung dari berbagai ekstensi bahasa.

TypeScript tidak terbatas pada pengetikan statis: Ini juga dilengkapi dengan berbagai fitur canggih yang memungkinkan Anda mensimulasikan paradigma pemrograman berorientasi objek di web. Panduan singkat ini akan membawa Anda melalui beberapa fitur utamanya. Jika bahasa itu menarik bagi Anda, informasi lebih lanjut dapat dipelajari dengan cepat.

01. Instal Visual Studio

Meskipun naskah juga dapat digunakan pada Linux atau MacOS, kami akan tetap pada IDE resmi Microsoft. Unduh Edisi Komunitas Gratis Visual Studio 2017 dari Microsoft, ini dia , dan pastikan untuk menandai payload ASP.NET selama penyebaran.

02. Tambahkan SDK

Karena rilis cepat irama naskah, studio visual perlu diperluas dengan modul SDK, yang dapat diunduh dari situs Microsoft di sini . Cukup jalankan installer seolah-olah itu adalah aplikasi Windows standar.

03. Unduh TypeScript, nyata

Itu tidak akan menjadi Microsoft jika tidak ada kerumitan ekstra yang terlibat: sementara SDK meningkatkan instalasi Visual Studio Anda, kompiler TSC yang sebenarnya tidak ditambahkan ke baris perintah Anda. Masalah ini paling baik diselesaikan dengan menggunakan Node.js's NPM Paket Manager pada baris perintah.

PS C: \ Pengguna \ Tamha \ Unduh & gt; npm install -g tekancript

C: \ Pengguna \ Tamha \ AppData \ Roaming \ NPM \ TSC - & gt; C: \ Pengguna \ Tamha \ AppData \ roaming \ npm \ node_modules \ naskah \ bin \ tsc

C: \ Pengguna \ Tamha \ AppData \ roaming \ npm \ tsserver - & gt; C: \ Pengguna \ Tamha \ AppData \ roaming \ npm \ node_modules \ typescript \ bin \ tsserver

C: \ Pengguna \ Tamha \ AppData \ Roaming \ NPM

`- [email protected].

04. Keluar dari proyek

Visual Studio berharap untuk bekerja dalam proses sentric-sentris: Sementara menarik, ini kurang ideal untuk kebutuhan kita. Sebagai gantinya, buat file bernama pekerja.ts dan letakkan di tempat yang nyaman di sistem file Anda. Buka dengan menyeretnya ke Visual Studio, dan jatuhkan di dalam bilah alat di atas. Selanjutnya, modifikasi isinya untuk memasukkan kode berikut:

 Fungsi Sayoi () {
  waspada ("oi!");
}
Sayoi (); 

05. Buat titik masuk

Seperti disebutkan dalam pengantar, file .ts tidak dapat berbuat banyak dengan sendirinya. Karena itu, lanjutkan untuk membuat file bernama index.html, yang harus terletak di folder yang sama. Selanjutnya, tambahkan kode kerangka yang ditampilkan menyertai langkah ini. Itu memuat output kompiler, dan menjalankannya seolah-olah itu adalah bit lain dari Javascript.

 & lt; html & gt;
  & lt; head & gt;
  & lt; script src = "worker.js" & gt; & lt; / script & gt;
  & lt; / head & gt;
  & lt; tubuh & gt; & lt; / body & gt;
& lt; / html & gt; 

06. Kompilasi dan Jalankan

Langkah selanjutnya melibatkan kompilasi ulang secara manual dari file. Buka PowerShell, dan masukkan perintah TSC diikuti dengan nama file input. Secara default, file output akan membagikan nama file dasar, tetapi akan memiliki ekstensi .js bukan .ts. Akhirnya, buka file index.html di browser pilihan untuk membuktikan tampilan kotak pesan.

 PS C: \ Pengguna \ Tamha \ Unduh & GT; tsc. \ pekerja. 

07. Diketik

Sejauh ini, naskah telah melakukan sedikit lebih banyak daripada bertindak sebagai lingkungan JavaScript yang lebih kompleks. Langkah selanjutnya melibatkan pengaktifan dukungan untuk pengetikan statis: Ini memungkinkan kompiler untuk melakukan analisis statis parameter, menjaga nilai yang tidak valid. Untuk ini, seperangkat jenis diperlukan - tipe dasar tercantum dalam tabel di atas, sementara kelas akan dibahas nanti.

08. Cobalah

Tugas tipe variabel server berlangsung melalui 'A:' ditempatkan setelah nama variabel. Mari kita modifikasi fungsi OI kita untuk mengambil angka, dan mari kita lewati string sebagai gantinya. Akhirnya, memohon kompiler TSC sekali lagi untuk menempuh mata Anda pada pesan kesalahan yang ditunjukkan pada tangkapan layar di atas - Visual Studio, secara kebetulan, juga akan menyoroti garis yang dimaksud.

 Fungsi Sayoi (Whattosay: Number) {
  peringatan (whattosay);
}
Sayoi ("Halo"); 

09. Hindari prototipe

Javascript mengimplementasikan objek-orientasi melalui prototyping: gaya kode yang tidak biasa di dunia .NET dan C / C ++. Tekan-teed memecahkan masalah ini dengan memungkinkan penciptaan kelas - proses yang ditunjukkan pada cuplikan yang menyertai langkah ini.

 kelas bayangkan {
  MyResult publik: Nomor;
  Mya publik: nomor;
  MYB publik: nomor;
  konstruktor (_a: nomor, _b: nomor)
  {
  ini.myresult = _a + _b;
  ini.mya = _a;
  }
} 

10. Menghargai publik

Biasanya, atribut publik digunakan untuk menyatakan bahwa elemen suatu program adalah dapat diakses dari luar. Ketika digunakan sebagai parameter konstruktor, itu malah menginstruksikan kompiler server untuk membuat bidang lokal dengan nama yang sama.

 kelas bayangkan {
  MyResult publik: Nomor;
  // Mya publik: nomor;
  konstruktor (mya publik: nomor, publik _b: nomor)
  {
  ini.myresult = mya + _b;
  ini.mya = mya;
  }
} 

11. Metode dan contoh

Mari kita perluas kelas contoh kami dengan menyediakan metode yang mengakses nilai yang disimpan dalam MyResult dan Mya, dan menampilkannya di layar. Akhirnya, parameter baru digunakan untuk membuat instance kelas - digunakan untuk memonoking metode.

 kelas bayangkan {
  MyResult publik: Nomor;
  . . .
  Public SayMething (): Void {
  waspada (ini.myresult);
  }
}
Biarkan Mimagine: Bayangkan = Bayi Baru (2, 2);
myimagine.saysomething (); 

12. Gunakan fitur ajaibnya

Desain bahasa Discript dimaksudkan untuk menyelamatkan pengembang sebanyak mungkin upaya. Satu fitur bagus adalah populasi otomatis parameter yang dibuat menggunakan pintasan yang ditampilkan.

 kelas bayangkan {
  MyResult publik: Nomor;
  Konstruktor (Mya Publik: Nomor, Publik MyB: Number)
  {
  ini.myresult = mya + myb;
  }
  Public SayMething (): Void {
  Peringatan (this.mya + "" this.myb);
  }
} 

13. Melakukan Warisan

Salah satu prinsip inti dari pemrograman berorientasi objek melibatkan mendasarkan kelas di atas satu sama lain. Kelas turunan kemudian dapat mengesampingkan konten kelas dasar mereka, yang mengarah ke hierarki kelas yang dapat disesuaikan secara fleksibel.

 Masa Depan Kelas Memperpanjang Bayangkan
{
  Public SayMething (): Void {
  konsol.log (ini.mya);
  }
} 

14. Analisis timpa

Cuplikan kode dari atas memperluas kelas imajin dengan sub-elemen yang disebut masa depan. Masa Depan berbeda dari Bayangkan dalam metode yang dipertahankan, lebih berevolusi, memancarkan pesan ke dalam baris perintah browser.

 Biarkan Myimagine: Bayangkan = Masa Depan Baru (2, 2);
myimagine.saysomething ();
Biarkan MyFuture: Masa Depan = Masa Depan Baru (9, 9);
myfuture.saysomething (); 

15. Menganalisis timpa, redux

Dengan itu, kode aktual dapat diuji. Ketika dijalankan, konsol browser akan berisi dua doa masa depan - kelas lanjutan membuat propertinya bahkan ketika dipanggil sebagai objek imajin.

16. Akses terbatas

Mengungkap variabel anggota dengan modifier publik tidak populer: itu, bagaimanapun juga, menghilangkan sebagian besar kontrol apa yang dilakukan pengguna dengan konten variabel. Accessorscripts Accessor memungkinkan Anda untuk mengatasi masalah ini dengan cara yang mirip dengan OOP tradisional. Perlu diketahui bahwa anggota read-only juga didukung, tetapi penggunaan fitur ini membutuhkan aktivasi dukungan ECMascript5.

 publik _mycache: string;
  Dapatkan FullCache (): String {
  kembalikan ini._mycache;
  }
  Atur FullCache (Newx: String) {
  Jika (newx == "halo") {
  ini._mycache = newx;
  }
  lain {
  konsol.log ("data yang salah!");
  }
  } 

17. Buat itu abstrak

Kemampuan untuk menciptakan hierarki warisan yang kompleks akan memotivasi pengembang untuk mencoba peruntungan mereka di kelas abstrak. TypeScript juga telah Anda bahas dalam hal itu - contoh yang menyertai langkah ini menciptakan kelas dengan abstrak dan anggota yang nyata. Mencoba instantiate kelas abstrak langsung mengarah pada kesalahan kompiler.

 Abstrak kelas bayangkan {
  MyResult publik: Nomor;
  ABSTRAK Sayname (): Void;
  konstruktor (mya publik: nomor, publik myb: number) {
  ini.myresult = mya + myb;
  }
  Public SayMething (): Void {
  Peringatan (this.mya + "" this.myb);
  }
}
kelas masa depan membayangkan imagine {
  . . .
  Sayname publik () {
  konsol.log ("halo");
  }
} 

18. Buat antarmuka

Ketika struktur objek menjadi lebih kompleks, pengembang sering menemukan diri mereka menghadapi situasi di mana satu kelas mengimplementasikan beberapa bit logika. Dalam hal ini, antarmuka membuat solusi yang bagus - contoh menunjukkan apa yang diharapkan.

 antarmuka datainterface {
  bidang: angka;
  workermethod (): batal;
} 

19. Menerapkannya

Seperti dalam kasus kelas di atas, sebuah antarmuka tidak baik jika kita tidak dapat menggunakannya. Untungnya, mengimplementasikannya tidak terlalu sulit: perlu diketahui bahwa penulis antarmuka dapat, lebih jauh lagi, mendeklarasikan bagian-bagian dari ciptaan mereka untuk menjadi opsional.

 Pekerja kelas mengimplementasikan datainterface {
  bidang: angka;
  workermethod (): void {
  Lempar kesalahan baru ("Metode tidak diimplementasikan.");
  }
  } 

20. Gunakan kelas generik

Kompiler naskah menegakkan pemeriksaan validitas variabel yang ketat. Saat mengerjakan kelas penyimpanan, Generik memungkinkan Anda membiarkan pengguna akhir menentukan jenis yang akan ditangani. Selanjutnya, server juga memungkinkan elemen generik lain seperti fungsi, seperti yang ditunjukkan dalam cuplikan (tautologis) yang diambil dari dokumentasi.

 // fungsi generik
Fungsi Identitas (arg: Nomor): Nomor {
  pengembalian arg;
}
// kelas generik.
kelas genericnumber & lt; t & gt; {
  Zerovalie: t;
  Tambahkan: (x: t, y: t) = & gt; T; } 

21. Pertanyaan tentang enumerasi

Mesin Negara dan elemen serupa menguntungkan memiliki cara untuk membatasi variabel untuk menyimpan beberapa negara yang terdefinisi dengan baik. Ini dapat dilakukan dengan menggunakan tipe data enum:

 Enum Parsierstate {
  Idle = 1,
  Read0,
  Baca1.
}
kelas bayangkan {
  Publik Mystate: Parsierstate;
  Konstruktor (Mya Publik: Nomor, Publik MyB: Number)
  {
Ini.mystate = parsierstate.idle; 

22. Pelajari lebih lanjut

Meliputi bahasa sebagai kompleks seperti naskah dalam satu artikel hampir tidak mungkin. Lihatlah Contoh situs naskah Untuk mengetahui lebih lanjut tentang binding bahasa.

Artikel ini awalnya diterbitkan dalam masalah 266 Desainer web , majalah desain web kreatif - menawarkan tutorial ahli, tren mutakhir dan sumber daya gratis. Beli masalah 266 di sini atau berlangganan desainer web di sini .

Penawaran Natal Khusus: Hemat hingga 49% pada berlangganan ke perancang web untuk Anda atau teman untuk Natal. Ini adalah tawaran terbatas, jadi gerakkan dengan cepat ...

Artikel terkait:

• 20 alat JavaScript untuk meledakkan pikiran Anda
• Belajarlah untuk membuat JavaScript Anda dapat diakses
• 12 Pertanyaan JavaScript Umum Dijawab