Apa itu TypeScript dan mengapa saya menggunakannya sebagai pengganti JavaScript? [Tutup]

1697

Bisakah Anda jelaskan apa bahasa TypeScript itu?

Apa yang bisa dilakukan yang tidak bisa dilakukan JavaScript atau perpustakaan yang tersedia, yang akan memberi saya alasan untuk mempertimbangkannya?

Mohammed Thabet
sumber
Berikut adalah beberapa pemikiran tentang ini: blog.priceandcost.com/development/…
Jefim

Jawaban:

1300

Saya awalnya menulis jawaban ini ketika TypeScript masih hot-off-the-presses. Lima tahun kemudian, ini adalah ikhtisar yang OK, tetapi lihat jawaban Lodewijk di bawah ini untuk lebih mendalam

Tampilan 1000 kaki ...

TypeScript adalah superset JavaScript yang terutama menyediakan pengetikan statis, kelas, dan antarmuka. Salah satu manfaat besar adalah mengaktifkan IDE untuk menyediakan lingkungan yang lebih kaya untuk menemukan kesalahan umum saat Anda mengetik kode .

Untuk mendapatkan ide tentang apa yang saya maksud, tonton video pengantar Microsoft tentang bahasa tersebut.

Untuk proyek JavaScript besar, mengadopsi TypeScript mungkin menghasilkan perangkat lunak yang lebih kuat, sementara masih dapat digunakan di mana aplikasi JavaScript biasa dijalankan.

Ini adalah open source, tetapi Anda hanya mendapatkan Intellisense yang pintar saat Anda mengetik jika Anda menggunakan IDE yang didukung. Awalnya, ini hanya Microsoft Visual Studio (juga dicatat dalam posting blog dari Miguel de Icaza ). Saat ini, IDE lain juga menawarkan dukungan TypeScript .

Apakah ada teknologi lain yang seperti itu?

Ada CoffeeScript , tetapi itu benar-benar melayani tujuan yang berbeda. IMHO, CoffeeScript memberikan keterbacaan untuk manusia, tetapi TypeScript juga menyediakan keterbacaan yang mendalam untuk alat melalui pengetikan statis opsional (lihat posting blog baru-baru ini untuk kritik yang lebih sedikit). Ada juga Dart tetapi itu penuh pada penggantian untuk JavaScript (meskipun dapat menghasilkan kode JavaScript )

Contoh

Sebagai contoh, inilah beberapa TypeScript (Anda dapat bermain dengan ini di TypeScript Playground )

class Greeter {
    greeting: string;
    constructor (message: string) {
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}  

Dan inilah JavaScript yang akan dihasilkannya

var Greeter = (function () {
    function Greeter(message) {
        this.greeting = message;
    }
    Greeter.prototype.greet = function () {
        return "Hello, " + this.greeting;
    };
    return Greeter;
})();

Perhatikan bagaimana TypeScript mendefinisikan tipe variabel anggota dan parameter metode kelas. Ini dihapus ketika menerjemahkan ke JavaScript, tetapi digunakan oleh IDE dan kompiler untuk menemukan kesalahan, seperti meneruskan tipe numerik ke konstruktor.

Itu juga mampu menyimpulkan jenis yang tidak secara eksplisit dinyatakan, misalnya, itu akan menentukan greet() metode mengembalikan string.

Debugging TypeScript

Banyak browser dan IDE menawarkan dukungan debug langsung melalui sourcemaps. Lihat pertanyaan Stack Overflow ini untuk lebih jelasnya: Mendebug kode TypeScript dengan Visual Studio

Ingin tahu lebih banyak?

Saya awalnya menulis jawaban ini ketika TypeScript masih hot-off-the-presses. Lihatlah jawaban Lodewijk untuk pertanyaan ini untuk detail lebih lanjut.

Paul Dixon
sumber
103
WebStorm menawarkan IntelliSense bagus di TypeScript sekarang dan multiplatform.
Radek
26
Masalah dengan alat-alat ini adalah Anda tidak pernah mendapatkan kinerja penuh dari javascript. Ya, ini memberikan keterbacaan yang baik tetapi kode yang dikompilasi kadang-kadang sangat kikuk. Anda mengandalkan alat pihak ketiga untuk menulis javascript asli, saya pikir ini bukan cara untuk pergi, itu seperti mengubah bahasa ke bahasa lain. Ingin mengubah bahasa yang bukan bahasa lain untuk berperilaku seperti bahasa lain yang Anda sukai, itu bodoh dan konyol. ...... (akhir bagian 1) ......
Codebeat
56
@ Erwinus: Apakah Anda masih memprogram dengan assembler?
VikciaR
11
@ Erwinus Anda membuat asumsi tentang cara kerja TypeScript. Anda dapat menulis JavaScript biasa sebagai TypeScript dan membuat kompiler hanya melakukan pengecekan tipe waktu kompilasi. Tidak ada kehilangan kinerja dengan melakukan itu.
thoughtrepo
41
@ Erwinus Maksud dari TypeScript adalah untuk menyediakan pemeriksaan tipe waktu kompilasi. Jika Anda tidak melihat nilainya, itu tidak masalah. TypeScript telah dirujuk sebagai "unit test pertama Anda". Ada banyak sumber daya yang membahas apakah pemeriksaan jenis opsional memiliki nilai, dan lebih detail daripada yang dapat kita lakukan di sini. Saya tidak mencoba meyakinkan Anda tentang apa pun, hanya mengoreksi kesalahpahaman.
thoughtrepo
1054

Hubungan TypeScript dengan JavaScript

TypeScript adalah superset yang diketik dari JavaScript yang mengkompilasi ke JavaScript biasa - typescriptlang.org .

JavaScript adalah bahasa pemrograman yang dikembangkan oleh Komite Teknis EMCA 39 , yang merupakan sekelompok orang yang terdiri dari berbagai pemangku kepentingan. TC39 adalah komite yang diselenggarakan oleh ECMA : organisasi standar internal. JavaScript memiliki banyak implementasi berbeda oleh banyak vendor yang berbeda (misalnya Google, Microsoft, Oracle, dll.). Tujuan JavaScript adalah menjadi lingua franca web.

TypeScript adalah superset dari bahasa JavaScript yang memiliki kompilator open-source tunggal dan dikembangkan terutama oleh satu vendor: Microsoft. Tujuan dari TypeScript adalah untuk membantu menangkap kesalahan sejak dini melalui sistem tipe dan untuk membuat pengembangan JavaScript lebih efisien.

Pada dasarnya TypeScript mencapai tujuannya dalam tiga cara:

  1. Dukungan untuk fitur JavaScript modern - Bahasa JavaScript (bukan runtime) distandarisasi melalui standar ECMAScript . Tidak semua browser dan runtime JavaScript mendukung semua fitur semua standar ECMAScript (lihat ikhtisar ini ). TypeScript memungkinkan untuk menggunakan banyak fitur ECMAScript terbaru dan menerjemahkannya ke target ECMAScript lama yang Anda pilih (lihat daftar target kompilasi di bawah --targetopsi kompiler). Ini berarti bahwa Anda dapat dengan aman menggunakan fitur-fitur baru, seperti modul, fungsi lambda, kelas, operator penyebaran dan perusakan, sambil tetap kompatibel dengan browser yang lama dan runtime JavaScript.

  2. Sistem tipe lanjutan - Jenis dukungan bukan bagian dari standar ECMAScript dan kemungkinan tidak akan pernah disebabkan oleh sifat yang ditafsirkan alih-alih sifat kompilasi dari JavaScript. Sistem tipe dari TypeScript sangat kaya dan meliputi: antarmuka, enum, tipe hibrida, generik, tipe gabungan / persimpangan, pengubah akses, dan banyak lagi. Situs web resmi TypeScript memberikan gambaran umum tentang fitur-fitur ini. Sistem jenis huruf sama dengan sebagian besar bahasa yang diketik lainnya dan dalam beberapa kasus bisa dibilang lebih kuat.

  3. Dukungan perkakas pengembang - Kompiler TypeScript dapat dijalankan sebagai proses latar belakang untuk mendukung kompilasi tambahan dan integrasi IDE sehingga Anda dapat lebih mudah menavigasi, mengidentifikasi masalah, memeriksa kemungkinan dan memperbaiki basis kode Anda.

Hubungan TypeScript dengan bahasa penargetan JavaScript lainnya

TypeScript memiliki filosofi unik dibandingkan dengan bahasa lain yang dikompilasi dengan JavaScript. Kode JavaScript adalah kode TypeScript yang valid; TypeScript adalah superset dari JavaScript. Anda hampir dapat mengubah nama .jsfile Anda menjadi .tsfile dan mulai menggunakan TypeScript (lihat "interoperabilitas JavaScript" di bawah). File TypeScript dikompilasi untuk JavaScript yang dapat dibaca, sehingga migrasi kembali dimungkinkan dan memahami TypeScript yang dikompilasi sama sekali tidak sulit. TypeScript dibangun di atas keberhasilan JavaScript sambil meningkatkan kelemahannya.

Di satu sisi, Anda memiliki alat bukti masa depan yang mengambil standar ECMAScript modern dan mengompilasinya ke versi JavaScript yang lebih lama dengan Babel menjadi yang paling populer. Di sisi lain, Anda memiliki bahasa yang mungkin sangat berbeda dari JavaScript yang menargetkan JavaScript, seperti CoffeeScript, Clojure, Dart, Elm, Haxe, Scala.js, dan seluruh host lainnya (lihat daftar ini). Bahasa-bahasa ini, meskipun mereka mungkin lebih baik daripada di mana masa depan JavaScript akan pernah memimpin, memiliki risiko lebih besar karena tidak menemukan adopsi yang cukup untuk masa depan mereka untuk dijamin. Anda mungkin juga akan kesulitan menemukan pengembang yang berpengalaman untuk beberapa bahasa ini, meskipun yang Anda temukan seringkali lebih antusias. Interop dengan JavaScript juga bisa sedikit lebih terlibat, karena mereka lebih jauh dihapus dari apa sebenarnya JavaScript itu.

TypeScript berada di antara kedua ekstrem ini, sehingga menyeimbangkan risikonya. TypeScript bukanlah pilihan yang berisiko menurut standar apa pun. Dibutuhkan sedikit usaha untuk membiasakan diri jika Anda terbiasa dengan JavaScript, karena itu bukan bahasa yang sama sekali berbeda, memiliki dukungan interoperabilitas JavaScript yang sangat baik dan telah melihat banyak adopsi baru-baru ini.

Secara opsional mengetik dan mengetik inferensi

JavaScript diketik secara dinamis. Ini berarti JavaScript tidak tahu tipe variabel apa itu sampai ia benar-benar dipakai saat dijalankan. Ini juga berarti bahwa mungkin sudah terlambat. TypeScript menambahkan dukungan tipe ke JavaScript. Bug yang disebabkan oleh asumsi salah dari beberapa variabel dari tipe tertentu dapat sepenuhnya dihapus jika Anda memainkan kartu Anda dengan benar (seberapa ketat Anda mengetik kode Anda atau jika Anda mengetikkan kode sama sekali terserah Anda).

TypeScript membuat mengetik sedikit lebih mudah dan banyak kurang eksplisit dengan penggunaan inferensi tipe. Sebagai contoh: var x = "hello"dalam TypeScript sama dengan var x : string = "hello". Jenis ini hanya disimpulkan dari penggunaannya. Meskipun Anda tidak secara eksplisit mengetik jenisnya, mereka masih ada untuk menyelamatkan Anda dari melakukan sesuatu yang jika tidak akan menghasilkan kesalahan run-time.

TypeScript secara opsional diketik secara default. Sebagai contoh function divideByTwo(x) { return x / 2 }adalah fungsi yang valid dalam TypeScript yang dapat dipanggil dengan segala jenis parameter, meskipun memanggilnya dengan string jelas akan menghasilkan runtime kesalahan . Sama seperti Anda terbiasa dengan JavaScript. Ini berfungsi, karena ketika tidak ada tipe yang secara eksplisit ditetapkan dan tipe tidak dapat disimpulkan, seperti pada contoh divideByTwo, TypeScript akan secara implisit menetapkan tipe tersebut any. Ini berarti tanda tangan jenis fungsi divideByTwo secara otomatis menjadi function divideByTwo(x : any) : any. Ada bendera compiler untuk melarang perilaku ini: --noImplicitAny. Mengaktifkan tanda ini memberi Anda tingkat keamanan yang lebih tinggi, tetapi juga berarti Anda harus melakukan lebih banyak pengetikan.

Jenis memiliki biaya yang terkait dengannya. Pertama-tama, ada kurva belajar, dan yang kedua, tentu saja, akan dikenakan biaya sedikit lebih banyak waktu untuk membuat basis kode menggunakan pengetikan ketat yang tepat juga. Dalam pengalaman saya, biaya ini benar-benar sepadan dengan basis kode serius apa pun yang Anda bagikan dengan orang lain. Studi Skala Besar Bahasa Pemrograman dan Kualitas Kode di Github menunjukkan bahwa "bahasa yang diketik secara statis, pada umumnya lebih sedikit cacat dibandingkan jenis dinamis, dan bahwa pengetikan yang kuat lebih baik daripada pengetikan yang lemah dalam hal yang sama".

Sangat menarik untuk dicatat bahwa makalah yang sama ini menemukan bahwa TypeScript lebih rentan kesalahan daripada JavaScript:

Bagi mereka dengan koefisien positif kita dapat berharap bahwa bahasa dikaitkan dengan, ceteris paribus, sejumlah besar perbaikan cacat. Bahasa-bahasa ini termasuk C, C ++, JavaScript , Objective-C, Php, dan Python. Bahasa Clojure, Haskell, Ruby, Scala, dan TypeScript , semua memiliki koefisien negatif yang menyiratkan bahwa bahasa-bahasa ini lebih kecil kemungkinannya daripada rata-rata untuk menghasilkan komitmen memperbaiki kerusakan.

Dukungan IDE yang ditingkatkan

Pengalaman pengembangan dengan TypeScript merupakan peningkatan besar dibandingkan JavaScript. IDE diinformasikan secara real-time oleh kompiler TypeScript pada informasi tipe kaya. Ini memberi beberapa keuntungan besar. Misalnya, dengan TypeScript, Anda dapat dengan aman melakukan refactor seperti mengganti nama di seluruh basis kode Anda. Melalui penyelesaian kode, Anda bisa mendapatkan bantuan sebaris pada fungsi apa pun yang mungkin ditawarkan oleh perpustakaan. Tidak perlu lagi mengingatnya atau mencari referensi online. Kesalahan kompilasi dilaporkan secara langsung dalam IDE dengan garis berlekuk-lekuk merah saat Anda sibuk melakukan pengkodean. Secara keseluruhan, ini memungkinkan untuk mendapatkan produktivitas yang signifikan dibandingkan dengan bekerja dengan JavaScript. Seseorang dapat menghabiskan lebih banyak waktu coding dan sedikit waktu debugging.

Ada berbagai macam IDE yang memiliki dukungan yang sangat baik untuk TypeScript, seperti Visual Studio Code, WebStorm, Atom dan Sublime.

Pemeriksaan nol ketat

Kesalahan runtime formulir cannot read property 'x' of undefinedatau undefined is not a functionsangat umum disebabkan oleh bug dalam kode JavaScript. Di luar kotak TypeScript sudah mengurangi kemungkinan kesalahan jenis ini terjadi, karena seseorang tidak dapat menggunakan variabel yang tidak dikenal ke kompiler TypeScript (dengan pengecualian properti dari anyvariabel yang diketik). Namun masih dimungkinkan untuk secara keliru memanfaatkan variabel yang diatur ke undefined. Namun, dengan versi 2.0 dari TypeScript Anda dapat menghilangkan semua jenis kesalahan ini bersama-sama melalui penggunaan tipe yang tidak dapat dibatalkan. Ini berfungsi sebagai berikut:

Dengan pemeriksaan nol yang ketat diaktifkan ( --strictNullChecksflag kompiler), compiler TypeScript tidak akan diizinkan undefineduntuk ditugaskan ke variabel kecuali Anda secara eksplisit menyatakannya sebagai tipe nullable. Misalnya, let x : number = undefinedakan menghasilkan kesalahan kompilasi. Ini sangat cocok dengan teori jenis karena undefinedbukan angka. Satu dapat menentukan xuntuk menjadi tipe jumlah numberdan undefineduntuk memperbaiki ini: let x : number | undefined = undefined.

Setelah suatu jenis diketahui dapat dibatalkan, artinya itu adalah tipe yang juga bisa bernilai nullatau undefined, kompiler TypeScript dapat menentukan melalui analisis tipe berbasis aliran kontrol apakah kode Anda dapat menggunakan variabel dengan aman atau tidak. Dengan kata lain ketika Anda memeriksa variabel undefinedmelalui contohnya ifpernyataan, kompiler TypeScript akan menyimpulkan bahwa tipe cabang dari aliran kontrol kode Anda tidak lagi dapat dibatalkan dan karenanya dapat digunakan dengan aman. Ini adalah contoh sederhana:

let x: number | undefined;
if (x !== undefined) x += 1; // this line will compile, because x is checked.
x += 1; // this line will fail compilation, because x might be undefined.

Selama pembangunan, co-designer konferensi 2016 dari TypeScript Anders Hejlsberg memberikan penjelasan rinci dan demonstrasi fitur ini: video (dari 44:30 hingga 56:30).

Kompilasi

Untuk menggunakan TypeScript Anda membutuhkan proses build untuk mengkompilasi ke kode JavaScript. Proses pembuatan umumnya hanya memakan waktu beberapa detik, tergantung tentu saja pada ukuran proyek Anda. Compiler TypeScript mendukung kompilasi tambahan ( --watchflag kompiler) sehingga semua perubahan selanjutnya dapat dikompilasi dengan kecepatan yang lebih besar.

Compiler TypeScript dapat sebaris informasi peta sumber dalam file .js yang dihasilkan atau membuat file .map terpisah. Informasi peta sumber dapat digunakan oleh utilitas debugging seperti Chrome DevTools dan IDE lain untuk menghubungkan garis-garis dalam JavaScript dengan yang menghasilkan mereka dalam TypeScript. Ini memungkinkan Anda untuk mengatur breakpoint dan memeriksa variabel saat runtime langsung pada kode TypeScript Anda. Sumber informasi peta bekerja dengan baik, itu ada jauh sebelum TypeScript, tetapi debugging TypeScript umumnya tidak sehebat ketika menggunakan JavaScript secara langsung. Ambil thiskata kunci misalnya. Karena perubahan semantik thiskata kunci di sekitar penutupan sejak ES2015, thissebenarnya mungkin ada selama runtime sebagai variabel yang disebut _this(lihat jawaban ini). Ini mungkin membingungkan Anda selama debugging tetapi umumnya tidak menjadi masalah jika Anda mengetahuinya atau memeriksa kode JavaScript. Perlu dicatat bahwa Babel menderita masalah yang sama persis.

Ada beberapa trik lain yang dapat dilakukan oleh kompiler TypeScript, seperti menghasilkan kode intersepsi berdasarkan dekorator , menghasilkan kode pemuatan modul untuk sistem modul yang berbeda dan mem-parsing JSX . Namun, Anda mungkin akan memerlukan alat bangun selain kompiler Scripteks. Misalnya, jika Anda ingin mengompres kode Anda, Anda harus menambahkan alat lain ke proses build Anda untuk melakukannya.

Ada plugin kompilasi TypeScript yang tersedia untuk Webpack , Gulp , Grunt dan cukup banyak alat build JavaScript lainnya di luar sana. Dokumentasi TypeScript memiliki bagian tentang mengintegrasikan dengan alat membangun yang mencakup semuanya. Sebuah linter juga tersedia jika Anda ingin lebih banyak membangun waktu pemeriksaan. Ada juga sejumlah besar proyek seed di luar sana yang akan membantu Anda memulai dengan TypeScript dikombinasikan dengan sekelompok teknologi lain seperti Angular 2, React, Ember, SystemJS, Webpack, Gulp, dll.

Interoperabilitas JavaScript

Karena TypeScript sangat erat kaitannya dengan JavaScript, ia memiliki kemampuan interoperabilitas yang hebat, tetapi beberapa pekerjaan tambahan diperlukan untuk bekerja dengan pustaka JavaScript di TypeScript. Definisi TypeScript diperlukan agar kompiler TypeScript memahami bahwa pemanggilan fungsi menyukai _.groupByatau angular.copyatau $.fadeOutbahkan tidak pernyataan ilegal. Definisi untuk fungsi-fungsi ini ditempatkan dalam .d.tsfile.

Bentuk paling sederhana yang bisa diambil definisi adalah mengizinkan pengidentifikasi digunakan dengan cara apa pun. Misalnya, ketika menggunakan Lodash , file definisi baris tunggal declare var _ : anyakan memungkinkan Anda untuk memanggil fungsi apa pun yang Anda inginkan _, tetapi kemudian, tentu saja, Anda juga masih dapat membuat kesalahan: _.foobar()akan menjadi panggilan TypeScript yang legal, tetapi tentu saja , panggilan ilegal saat run-time. Jika Anda ingin dukungan jenis yang tepat dan penyelesaian kode, file definisi Anda harus lebih tepat (lihat contoh lodash untuk contoh).

Modul NPM yang datang pra-paket dengan definisi tipenya sendiri secara otomatis dipahami oleh kompiler TypeScript (lihat dokumentasi ). Untuk hampir semua perpustakaan JavaScript semi-populer lainnya yang tidak menyertakan definisi sendiri, seseorang di luar sana telah membuat definisi tipe tersedia melalui modul npm lainnya. Modul-modul ini diawali dengan "@ types /" dan berasal dari repositori Github yang disebut DefinitelyTyped .

Ada satu peringatan: definisi jenis harus cocok dengan versi perpustakaan yang Anda gunakan saat run-time. Jika tidak, TypeScript mungkin melarang Anda memanggil fungsi atau mendereferensi variabel yang ada atau memungkinkan Anda memanggil fungsi atau mendereferensi variabel yang tidak ada, hanya karena tipe tidak cocok dengan run-time pada waktu kompilasi. . Jadi pastikan Anda memuat versi yang tepat dari definisi tipe untuk versi yang tepat dari perpustakaan yang Anda gunakan.

Sejujurnya, ada sedikit kerumitan untuk ini dan itu mungkin menjadi salah satu alasan Anda tidak memilih TypeScript, tetapi pergi untuk sesuatu seperti Babel yang tidak menderita karena harus mendapatkan definisi tipe sama sekali. Di sisi lain, jika Anda tahu apa yang Anda lakukan, Anda dapat dengan mudah mengatasi segala jenis masalah yang disebabkan oleh file definisi yang salah atau hilang.

Konversi dari JavaScript ke TypeScript

Setiap .jsfile dapat diubah namanya menjadi sebuah .tsfile yang dan berlari melalui compiler naskah untuk mendapatkan sintaksis kode JavaScript yang sama sebagai output (jika itu sintaksis benar di tempat pertama). Bahkan ketika kompiler TypeScript mendapat kesalahan kompilasi masih akan menghasilkan .jsfile. Ia bahkan dapat menerima .jsfile sebagai input dengan --allowJsflag. Ini memungkinkan Anda untuk memulai dengan TypeScript segera. Sayangnya, kesalahan kompilasi cenderung terjadi di awal. Orang memang perlu mengingat bahwa ini bukan kesalahan penghentian pertunjukan seperti Anda mungkin terbiasa dengan kompiler lain.

Kesalahan kompilasi yang didapat seseorang di awal ketika mengonversi proyek JavaScript ke proyek TypeScript tidak terhindarkan oleh sifat TypeScript. TypeScript memeriksa semua kode untuk validitas dan karenanya perlu mengetahui tentang semua fungsi dan variabel yang digunakan. Jadi jenis definisi harus ada untuk mereka semua kalau tidak kesalahan kompilasi pasti akan terjadi. Seperti disebutkan dalam bab di atas, untuk hampir semua kerangka kerja JavaScript ada .d.tsfile yang dapat dengan mudah diperoleh dengan instalasi paket DefinitelyTyped. Namun, itu mungkin karena Anda telah menggunakan beberapa pustaka yang tidak jelas yang tidak tersedia definisi TypeScript atau Anda telah mengisi beberapa primitif JavaScript. Dalam hal ini, Anda harus memberikan definisi tipe untuk bit-bit ini agar kesalahan kompilasi hilang. Cukup buat .d.tsfile dan masukkan ke dalam filesarray tsconfig.json , sehingga selalu dipertimbangkan oleh kompiler TypeScript. Di dalamnya mendeklarasikan bit-bit yang tidak diketahui TypeScript sebagai tipe any. Setelah Anda menghilangkan semua kesalahan, Anda dapat secara bertahap memperkenalkan pengetikan ke bagian-bagian tersebut sesuai dengan kebutuhan Anda.

Beberapa pekerjaan pada (re) mengkonfigurasi pipeline build Anda juga akan diperlukan untuk memasukkan TypeScript ke pipeline build. Seperti disebutkan dalam bab tentang kompilasi, ada banyak sumber daya yang bagus di luar sana dan saya mendorong Anda untuk mencari proyek benih yang menggunakan kombinasi alat yang ingin Anda gunakan.

Rintangan terbesar adalah kurva belajar. Saya mendorong Anda untuk bermain-main dengan proyek kecil pada awalnya. Lihat cara kerjanya, bagaimana ia membangun, file mana yang digunakannya, bagaimana itu dikonfigurasikan, bagaimana fungsinya dalam IDE Anda, bagaimana itu terstruktur, alat mana yang digunakannya, dll. Mengubah basis kode JavaScript besar ke TypeScript bisa dilakukan ketika Anda tahu apa yang kamu lakukan. Baca blog ini misalnya tentang mengonversi 600k baris menjadi naskah dalam 72 jam ). Pastikan Anda memiliki pemahaman bahasa yang baik sebelum melakukan lompatan.

Adopsi

TypeScript adalah open-source (Apache 2 berlisensi, lihat GitHub ) dan didukung oleh Microsoft. Anders Hejlsberg , arsitek utama C # adalah ujung tombak proyek. Ini proyek yang sangat aktif; tim TypeScript telah merilis banyak fitur baru dalam beberapa tahun terakhir dan banyak fitur hebat masih direncanakan untuk datang (lihat peta jalan ).

Beberapa fakta tentang adopsi dan popularitas:

  • Dalam survei pengembang StackOverflow 2017, TypeScript adalah transpiler JavaScript paling populer (peringkat ke-9 secara keseluruhan) dan memenangkan tempat ketiga dalam kategori bahasa pemrograman yang paling disukai.
  • Dalam keadaan survei js 2018, TypeScript dinyatakan sebagai salah satu dari dua pemenang besar dalam kategori rasa JavaScript (dengan ES6 sebagai yang lain).
  • Dalam survei deverloper StackOverlow 2019, TypeScript naik ke posisi ke-9 bahasa paling populer di antara pengembang profesional, menyalip baik C dan C ++. Lagi-lagi menempati posisi ketiga di antara bahasa yang paling dicintai.
Lodewijk Bogaards
sumber
25
"Kode JavaScript adalah kode TypeScript yang valid" - ini sebenarnya tidak selalu benar. Maksud saya kode seperti if (1 === '1') {} memberi Anda kesalahan dalam TS dan di JS tidak. Tetapi sebagian besar waktu, jika kode JS ditulis dengan baik itu benar.
Maciej Bukowski
3
Jika Anda kehilangan waktu produktif Anda yang berharga karena meremehkan titik koma yang hilang, menulis dalam Scripteks akan menjadi penyelamat hidup.
SoSufi
3
Pengetikan telah ditinggalkan, dan praktik terbaik saat ini adalah hanya npm(atau yarn) install @types/foo. Bisakah Anda memperbarui jawaban Anda?
Jed Fox
13
TL; DR akan lebih hemat dalam jawaban ini;)
Qback
8
@MaciejBukowski Bahkan jika TypeScript benar-benar mengeluh dalam hal ini, Anda masih mendapatkan output JS yang valid (yang akan menjadi kode JS yang Anda kompilasi / transpile dengan TypeScript). Jadi ini adalah "kompilasi dengan kesalahan", dan bukan TypeScript yang tidak valid. Ini ditulis dalam spesifikasi TypeScript bahwa kode JS yang valid harus kode TS yang valid.
Pac0
83

TypeScript melakukan sesuatu yang mirip dengan yang dilakukan CSS atau kurang. Mereka adalah set super itu, yang berarti bahwa setiap kode JS yang Anda tulis adalah kode TypeScript yang valid. Plus, Anda dapat menggunakan barang lain yang ditambahkan ke bahasa, dan kode yang ditranskripsikan akan menjadi js yang valid. Anda bahkan dapat mengatur versi JS yang Anda inginkan kode yang dihasilkan.

Saat ini TypeScript adalah set super ES2015, jadi mungkin merupakan pilihan yang baik untuk mulai mempelajari fitur js baru dan mengubah ke standar yang dibutuhkan untuk proyek Anda.

lebobbi
sumber
4
TL; DR terbaik adalah halaman TS: "TypeScript adalah superset dari JavaScript yang dikompilasi ke JavaScript biasa."
Juan Mendes
1
Itu tidak menjawab "mengapa saya harus menggunakannya". Di sini tl; dr akan menjadi: 1) Untuk menambahkan jenis statis opsional ke JavaScript. Jenis dapat membantu menangkap bug pada waktu kompilasi dan mendokumentasikan program Anda dengan lebih baik. 2) Anda dapat menulis JavaScript baru (ES6 / ES7 / ESnext) dan mengkompilasinya kembali ke ES5, yang diperlukan untuk mendukung browser lama; Saya telah menjelaskan sedikit lebih banyak di tsmean.com/articles/vs/typescript-vs-javascript untuk mereka yang tertarik pada lebih dari tl; dr
bersling
1
"Kode yang ditranskrip akan menjadi JS yang valid" - dan itu tumit Achilles dari TypeScript jika Anda bertanya kepada saya. Ini berarti mereka tidak dapat menambahkan beberapa fitur yang sangat berguna ke JS; terutama memeriksa jenis runtime . Agak menyebalkan memiliki keamanan tipe kompiler-waktu hanya kehilangannya untuk setiap data runtime yang dibaca dari I / O, atau setiap kali kode yang Anda transkrip dipanggil secara tidak aman dari JS lain.
Jez
44

" TypeScript Fundamentals " - sebuah kursus video Pluralsight oleh Dan Wahlin dan John Papa benar-benar bagus, saat ini (25 Maret 2016) diperbarui untuk mencerminkan TypeScript 1.8, pengantar TypeScript.

Bagi saya fitur yang sangat bagus, di samping kemungkinan bagus untuk intellisense, adalah kelas , antarmuka , modul , kemudahan menerapkan AMD, dan kemungkinan untuk menggunakan debugger Visual Studio Typescript ketika dipanggil dengan IE.

Untuk meringkas : Jika digunakan sebagaimana dimaksud, Typcript dapat membuat pemrograman JavaScript lebih dapat diandalkan, dan lebih mudah. Ini dapat meningkatkan produktivitas programmer JavaScript secara signifikan di atas SDLC penuh.

Dimitre Novatchev
sumber
9
Apa itu SDLC? AMD?
Oooogi
15
@Oooogi, SDLC == Siklus Hidup Pengembangan Perangkat Lunak. AMD == Definisi Modul Asinkron. Yang terakhir ini khusus untuk JavaScript, sedangkan yang pertama agak generik.
Dimitre Novatchev
2
"Kemudahan menerapkan AMD, ..." - Saya membaca itu dan berpikir itu semacam optimasi threadripper atau sesuatu.
jrh
15

Ecma script 5 (ES5) yang didukung dan dikompilasi oleh semua browser. ES6 / ES2015 dan ES / 2016 datang tahun ini dengan banyak perubahan sehingga untuk memunculkan perubahan ini ada sesuatu di antaranya yang harus berhati-hati tentang TypeScript.

• TypeScript adalah Jenis -> Berarti kita harus mendefinisikan tipe data dari setiap properti dan metode. Jika Anda tahu C # maka Scriptese mudah dimengerti.

• Keuntungan besar dari TypeScript adalah kita mengidentifikasi isu-isu terkait tipe awal sebelum pergi ke produksi. Ini memungkinkan unit test gagal jika ada jenis ketidakcocokan.

Mayank Jain
sumber
2
Tidak setiap tahun, teman! .. mereka telah mengubah spek setelah menunggu sangat lama
Subham Tripathi
... dan, perubahan-perubahan yang dapat Anda korelasikan dengan Microsoft. ;-)
Trober
2
@SubhamTripathi Ini sangat banyak adalah setiap tahun. ES2015, ES2016, ES2017, dan dari sekarang hingga bahasa mati. Itu tidak setiap tahun, sebelum 2015, tetapi sekarang. Pergi mencari "proses TC39" untuk mempelajari lebih lanjut.
daemonexmachina
1
apakah ada permintaan besar untuk pengecekan tipe dalam komunitas javascript? Saya hanya belum memiliki banyak bug yang terkait dengan pemeriksaan jenis.
Box and Cox