Setiap programmer yang bekerja dengan bahasa yang diketik secara dinamis akan membuktikan bahwa tugas kode penskalaan sangat sulit dan membutuhkan tim insinyur yang besar. Inilah sebabnya mengapa Facebook, Google, dan Microsoft menghadirkan pengetikan statis untuk kode yang diketik secara dinamis.
Bekerja dengan bahasa pemrograman apa pun, kami melacak pengecualian dan membaca kode baris demi baris untuk menemukan masalah dan cara memperbaikinya. TypeScript memungkinkan Anda mengotomatiskan bagian proses pengembangan yang membuat frustrasi ini.
TypeScript, tidak seperti banyak bahasa jenis lainnya, berorientasi pada aplikasi. Ini memperkenalkan konsep baru yang memungkinkan Anda mengekspresikan ide secara lebih ringkas dan akurat, dan dengan mudah membangun aplikasi modern yang dapat diskalakan dan aman.
Boris Cherny membantu untuk memahami semua nuansa dan kemampuan TypeScript, mengajari Anda untuk menghilangkan kesalahan dan menskalakan kode.
Struktur buku
Saya (penulis) telah mencoba memberi Anda pemahaman teoretis tentang cara kerja TypeScript dan sejumlah saran pengkodean praktis.
TypeScript adalah bahasa praktis, jadi teori dan praktik sebagian besar saling melengkapi dalam buku ini, tetapi dua bab pertama terutama mencakup teori, dan menjelang akhir hanya praktik yang disajikan.
Kami akan membahas dasar-dasar seperti kompiler, pemeriksa tipe, dan tipe itu sendiri. Selanjutnya, kita membahas varietas dan operator mereka, dan kemudian beralih ke topik lanjutan seperti spesifikasi sistem tipe, penanganan kesalahan, dan pemrograman asynchronous. Terakhir, saya akan menunjukkan kepada Anda cara menggunakan TypeScript dengan kerangka kerja favorit Anda (frontend dan backend), memigrasi proyek JavaScript yang ada ke TypeScript, dan menjalankan aplikasi TypeScript dalam produksi.
Sebagian besar bab diakhiri dengan serangkaian latihan. Coba lakukan sendiri untuk mengasimilasi materi dengan lebih baik. Jawabannya tersedia di sini .
Migrasi bertahap dari JavaScript ke TypeScript
TypeScript dirancang dengan mempertimbangkan interoperabilitas JavaScript. Jadi meskipun tidak sepenuhnya tidak menyakitkan, bermigrasi ke TypeScript masih merupakan pengalaman yang menyenangkan, memungkinkan Anda untuk mengubah file basis kode Anda pada satu waktu, mendapatkan tingkat keamanan yang lebih dalam dan berkomitmen setelah komit, dan mengejutkan atasan dan rekan kerja Anda betapa kuatnya kode yang diketik secara statis. ...
Pada tingkat tinggi, basis kode harus sepenuhnya ditulis dalam TypeScript dan diketik dengan kuat, dan pustaka JavaScript pihak ketiga yang Anda andalkan harus berkualitas baik dan memiliki tipe kuatnya sendiri. Proses pengkodean Anda akan menjadi 2x lebih cepat dengan penangkapan kesalahan waktu kompilasi dan sistem pelengkapan otomatis TypeScript yang kaya. Untuk mencapai hasil migrasi yang sukses, dibutuhkan beberapa langkah kecil:
- Tambahkan TSC ke proyek.
- Mulailah memeriksa jenis kode JavaScript yang ada.
- Pindahkan kode JavaScript ke file TypeScript demi file.
- Instal deklarasi tipe untuk dependensi. Artinya, alokasikan tipe untuk dependensi yang tidak memilikinya, atau tulis deklarasi tipe untuk dependensi yang tidak diketik dan kirimkan kembali ke DefinitelyTyped1.
- Aktifkan mode ketat untuk basis kode.
Proses ini mungkin membutuhkan waktu beberapa saat, tetapi Anda akan segera melihat peningkatan keamanan dan kinerja serta manfaat lainnya nanti. Mari kita lihat langkah-langkah yang tercantum.
Langkah 1: Menambahkan TSC
Saat bekerja dengan basis kode yang menggabungkan TypeScript dan JavaScript, pertama-tama biarkan TSC mengompilasi file JavaScript bersama dengan file TypeScript di pengaturan tsconfig.json:
{
"compilerOptions": {
"allowJs": true
}Perubahan ini sendiri akan memungkinkan TSC digunakan untuk mengkompilasi kode JavaScript. Cukup tambahkan TSC ke proses build dan jalankan setiap file JavaScript melaluinya, atau tetap jalankan file JavaScript lama melalui proses build dan file TypeScript baru melalui TSC.
Dengan allowJs disetel ke true, TypeScript tidak akan memeriksa jenis dalam kode JavaScript saat ini, tetapi akan mentranspilasi kode itu ke ES3, ES5, atau versi yang disetel sebagai target di file tsconfig.json menggunakan sistem modul yang Anda minta (di bidang modul json file). Langkah pertama sudah selesai. Lakukan dan tepuk punggung Anda - basis kode Anda sekarang menggunakan TypeScript.
Langkah 2a: aktifkan pemeriksaan jenis JavaScript (opsional)
Sekarang TSC sedang memproses JavaScript, mengapa tidak memeriksa tipenya? Meskipun tidak ada anotasi tipe eksplisit, ingat bahwa TypeScript dapat menyimpulkan tipe untuk kode JavaScript dengan cara yang sama seperti untuk kode TypeScript. Sertakan opsi yang diperlukan di tsconfig.json:
{
"compilerOptions": {
"allowJs": true,
"checkJs": true
}Sekarang, setiap kali TypeScript mengompilasi file JavaScript, ia akan mencoba menyimpulkan dan memvalidasi jenis seperti yang dilakukannya untuk kode TypeScript.
Jika basis kode Anda besar dan ketika Anda mengaktifkan checkJ, ia menemui terlalu banyak kesalahan sekaligus, matikan. Alih-alih, aktifkan pemeriksaan file JavaScript satu per satu dengan menambahkan perintah // @ ts-check (komentar normal di bagian atas file). Atau, jika file besar menampilkan banyak kesalahan yang belum ingin Anda perbaiki, biarkan checkJs diaktifkan dan tambahkan perintah // @ ts-nocheck untuk file tersebut.
TypeScript tidak dapat menyimpulkan jenis untuk semuanya (misalnya, ia tidak menyimpulkan jenis untuk parameter fungsi), jadi ia akan menyimpulkan banyak jenis di JavaScript sebagai jenis lainnya. Jika Anda mengaktifkan mode ketat di tsconfig.json (disarankan), Anda dapat memilih untuk mengizinkan mode implisit selama migrasi. Tambahkan berikut ini ke tsconfig.json:
{ "compilerOptions": { "allowJs": true, "checkJs": true, "noImplicitAny": false }
Ingatlah untuk mengaktifkan noImplicitAny lagi setelah Anda selesai memigrasi sebagian besar kode Anda ke TypeScript. Ini kemungkinan besar akan menemukan banyak bug yang terlewat (kecuali Anda adalah Zenidar, murid penyihir JavaScript Bavmorda, yang bisa mengecek-ketik dengan kekuatan mata pikirannya dengan ramuan apsintus).
Ketika TypeScript mengeksekusi kode JavaScript, ia menggunakan algoritma inferensi yang lebih lembut daripada kode TypeScript. Yaitu:
- Semua parameter fungsi bersifat opsional.
- Jenis properti fungsi dan kelas disimpulkan berdasarkan penggunaannya (alih-alih harus dideklarasikan sebelumnya):
class A { x = 0 // number | string | string[], . method() { this.x = 'foo' } otherMethod() { this.x = ['array', 'of', 'strings'] } } - Setelah mendeklarasikan objek, kelas, atau fungsi, Anda dapat menetapkan properti tambahan padanya. Di balik layar, TypeScript melakukan ini dengan membuat namespace yang sesuai untuk setiap deklarasi fungsi dan secara otomatis menambahkan tanda tangan indeks ke setiap literal objek.
Langkah 2b: tambahkan anotasi JSDoc (opsional)
Anda mungkin sedang terburu-buru dan hanya perlu menambahkan satu jenis anotasi untuk fungsi baru yang telah ditambahkan ke file JavaScript lama. Anda dapat menggunakan penjelasan JSDoc untuk melakukan ini hingga Anda dapat mengonversi file ini ke TypeScript.
Anda mungkin pernah melihat JSDoc sebelumnya. Ini adalah komentar seperti ini di bagian atas kode dengan penjelasan yang diawali dengan @, sukaparam, @returns, dan seterusnya. TypeScript memahami JSDoc dan menggunakannya sebagai masukan ke pemeriksa jenis bersama dengan penjelasan jenis eksplisit.
Misalkan Anda memiliki 3000 file layanan baris (ya, saya tahu, "teman" Anda yang menulisnya). Anda menambahkan fungsi layanan baru ke dalamnya:
export function toPascalCase(word) {
return word.replace(
/\w+/g,
([a, ...b]) => a.toUpperCase() + b.join('').toLowerCase()
)
}Tanpa konversi penuh utils.js ke TypeScript, yang pasti akan mengungkapkan banyak bug, Anda hanya dapat memberi anotasi pada fungsi toPascaleCase, menciptakan pulau kecil yang aman di lautan JavaScript yang tidak diketik:
/**
* @param word {string} .
* @returns {string} PascalCase
*/
export function toPascalCase(word) {
return word.replace(
/\w+/g,
([a, ...b]) => a.toUpperCase() + b.join('').toLowerCase()
)
}Tanpa anotasi ini, JSDoc TypeScript akan menyimpulkan jenis toPascaleCase sebagai (word: any) => string. Sekarang, saat mengompilasi, akan diketahui bahwa jenis toPascaleCase adalah (word: string) => string. Dan Anda mendapatkan dokumentasi yang berguna.
Untuk informasi lebih lanjut tentang penjelasan JSDoc, kunjungi TypeScript Wiki (https://github.com/Microsoft/TypeScript/wiki/JSDoc-support-in-JavaScript).
Langkah 3: Ubah nama file menjadi .ts
Setelah Anda menambahkan TSC ke proses build Anda dan mulai memeriksa jenis dan memberi anotasi kode JavaScript jika memungkinkan, sekarang saatnya untuk beralih ke TypeScript.
Izin file pembaruan file demi file dari .js (atau .coffee, es6, dll.) Ke .ts. Segera setelah mengganti nama file di editor, Anda akan melihat teman bergelombang merah muncul yang menunjukkan kesalahan jenis, kasus yang terlewat, cek kosong yang terlupakan, dan kesalahan ketik pada nama variabel. Ada dua cara untuk menghapusnya.
- . , , , . checkJs, noImplicitAny tsconfig.json, any , , JavaScript .
- .ts tsconfig.json ( strict false), . any, . . , strict (noImplicitAny, noImplicitThis, strictNullChecks . .), . ( .)
, TODO any any, . , :
// globals.ts type TODO_FROM_JS_TO_TS_MIGRATION = any // MyMigratedUtil.ts export function mergeWidgets( widget1: TODO_FROM_JS_TO_TS_MIGRATION, widget2: TODO_FROM_JS_TO_TS_MIGRATION ): number { // ... }
Kedua pendekatan tersebut cukup relevan, dan terserah Anda untuk memutuskan mana yang lebih disukai. TypeScript adalah bahasa ketikan langkah demi langkah yang dirancang dari awal untuk berinteraksi dengan JavaScript yang tidak diketik dengan cara yang paling aman. Tidak masalah jika Anda berinteraksi dengan JavaScript yang tidak diketik atau TypeScript yang diketik lemah, TypeScript yang diketik dengan kuat akan selalu memastikan interaksi seaman mungkin.
Langkah 4: Aktifkan Ketelitian
Setelah massa kritis kode JavaScript telah di-porting, Anda ingin membuatnya aman all-in-one dengan menggunakan flag TSC yang lebih ketat satu per satu (lihat Lampiran E untuk daftar lengkap dari flag).
Setelah selesai, Anda dapat mematikan flag TSC yang bertanggung jawab untuk berinteraksi dengan JavaScript, mengonfirmasi bahwa semua kode Anda ditulis dalam TypeScript yang diketik dengan kuat:
{
"compilerOptions": {
"allowJs": false,
"checkJs": false
}Ini akan mengungkapkan kesalahan jenis yang tersisa. Perbaiki dan dapatkan basis kode aman yang sempurna yang akan diberikan oleh sebagian besar insinyur keras OCaml kepada Anda.
Mengikuti langkah-langkah ini dapat sangat membantu Anda saat menambahkan jenis ke kode JavaScript yang Anda kontrol. Tapi bagaimana dengan kode yang tidak Anda kendalikan? Seperti yang diinstal dengan NPM. Tetapi sebelum kita mempelajari pertanyaan ini, mari kita ngelantur sedikit ...
Menemukan tipe untuk JavaScript
Saat Anda mengimpor file JavaScript dari file TypeScript, TypeScript mencari deklarasi jenisnya menggunakan algoritme berikut (ingat, dalam TypeScript, "file" dan "modul" digunakan secara bergantian):
- .d.ts , .js. .js.
, :
my-app/
├──src/
│ ├──index.ts
│ └──legacy/
│ ├──old-file.js
│ └──old-file.d.ts
old-file ( ) index.ts:
// index.ts
import './legacy/old-file'
TypeScript src/legacy/old-file.d.ts ./legacy/old-file. - , allowJs checkJs true, .js ( JSDoc) any.
TSC-: TYPEROOTS ( )
TypeScript node modules/@types , (../node modules/@types . .). .
, typeRoots tsconfig.json , . , TypeScript typings node modules/@types:
{ "compilerOptions": { "typeRoots" : ["./typings", "./node modules/@types"] } }
types tsconfig.json, , TypeScript . , , React:
{ "compilerOptions": { "types" : ["react"] } }
Saat mengimpor modul JavaScript pihak ketiga (paket NPM yang Anda instal di modul node), TypeScript menggunakan algoritme yang sedikit berbeda:
- Mencari deklarasi tipe lokal untuk modul dan, jika ada, menggunakannya.
Misalnya, struktur direktori Anda terlihat seperti ini:
my-app /
├──node_modules /
│ └──foo /
├──src /
│ ├──index.ts
│ └──types.d.ts
Beginilah tampilan type.d .ts:
// types.d.ts declare module 'foo' { let bar: {} export default bar }
Jika Anda kemudian mengimpor foo, maka TypeScript menggunakan deklarasi modul eksternal di types.d.ts sebagai sumber tipe untuknya:
// index.ts
import bar dari 'foo' - package.json, . types typings, .d.ts, , .
- Atau ia akan menggilir direktori mencari direktori modul modul / @ types, yang berisi deklarasi tipe untuk modul.
Misalnya, Anda menginstal React:
npm install react
--save npm install @ types / react --save-dev
my-app /
├──node_modules /
│ ├── @ types /
│ │ └──react /
│ └── react /
├──src /
│ └──index.ts
Saat mengimpor React, TypeScript akan menemukan direktori @ types / react dan menggunakannya sebagai sumber deklarasi tipe untuknya:
// index.ts
import * sebagai React dari 'react' - Jika tidak, ini akan menuju ke langkah 1–3 dari algoritme penelusuran tipe lokal.
Saya telah membuat daftar beberapa langkah, tetapi Anda akan terbiasa dengannya.
tentang Penulis
Boris Cherny adalah Chief Engineer dan Product Leader di Facebook. Sebelumnya bekerja di VC, AdTech dan di berbagai startup, yang sebagian besar tidak ada saat ini. Dia tertarik pada bahasa pemrograman, sintesis kode, dan analisis statis, serta berusaha untuk berbagi pengalamannya dengan produk digital dengan pengguna. Di waktu luangnya, dia mengatur pertemuan klub TypeScript di San Francisco dan mengelola blog pribadi - performancejs.com . Anda dapat menemukan akun GitHub Boris di github.com/bcherny .
»Rincian lebih lanjut tentang buku ini dapat ditemukan di situs web penerbit
» Daftar Isi
» Kutipan
Untuk Habitants Diskon 25% untuk kupon - TypeScript
Setelah pembayaran untuk versi kertas dari buku tersebut, sebuah e-book dikirim ke email.