TypeScript: Bermula Dengan Pilihan TSConfig

Apakah TypeScript?

TypeScript ialah superset JavaScript. Ini bermakna anda boleh menggunakan sintaks JavaScript dalam TypeScript, jadi belajar JavaScript sebelum melompat ke TypeScript adalah yang terbaik. Dengan penafian itu, mari kita bincangkan tentang apa itu TypeScript dan cara kita boleh menyediakan projek untuk TypeScript.

Menurut dokumentasi untuk TypeScript, "TypeScript ialah bahasa pengaturcaraan ditaip kuat yang dibina pada JavaScript."[1] Bahasa TypeScript menambah sintaks jenis untuk membantu anda menangkap ralat awal semasa pembangunan dan mengekalkan perlindungan semasa pasukan pembangunan anda berkembang sebagai skala projek. TypeScript membolehkan anda menentukan jenis data untuk pembolehubah dan antara muka untuk objek. TypeScript menggunakan takrifan ini untuk menyemak kod anda untuk ralat semasa ia menyusun dan memberitahu anda apabila anda tidak mengikut takrifan yang anda tetapkan sebelum ini.

Jika anda berfikir, "Mengapa saya perlu menulis lebih banyak kod hanya untuk menggunakan TypeScript sedangkan saya boleh lebih berhati-hati pada mulanya?" Anda tidak salah, tetapi manusia boleh melakukan kesilapan, dan kita sering melakukan kesilapan apabila bekerja dalam tempoh yang lama. Jika pemikiran yang sama digunakan untuk pembinaan, maka prosedur perancah dan keselamatan tambahan akan memerlukan lebih banyak kerja dan masa, dan kita boleh menjimatkan masa dengan hanya berhati-hati di tapak kerja.

Nampak? Dalam usaha untuk menjimatkan masa, tukang atap ini mungkin telah membuang lebih banyak masa dan sumber. Ini hanya seorang pekerja. Bayangkan sepasukan pekerja bekerja pada projek apabila lebih ramai ahli pasukan ditambah. Inilah realiti pembangunan perisian; mempunyai rancangan untuk menangkap kesilapan ini akan membantu anda dan pasukan anda dalam jangka masa panjang.

Contoh TypeScript

Contoh berikut datang daripada dokumentasi TypeScript[2], tetapi ulasannya adalah milik saya.

Skrip Jenis:

function greet(person, date) {
  console.log(`Hello ${person}, today is ${date}!`);
}

greet("Brendan");

TypeScript akan menangkap ralat apabila salam dipanggil. Kami mentakrifkan salam untuk menerima dua hujah, orang dan tarikh, dan kami hanya membekalkan orang. TypeScript akan menangkap ralat ini apabila ia menyusun kod dan memberitahu anda ia mengharapkan hujah kedua. Dari satu segi, TypeScript boleh dianggap sebagai pelapis untuk kod anda untuk menangkap ralat ini semasa anda bekerja, tetapi kami boleh memanfaatkan sintaks jenis untuk membantu kami lebih jauh.

function greet(person: string, date: Date) {
  console.log(`Hello ${person}, today is ${date.toDateString()}!`);
}

greet("Maddison", Date());

Sekarang, kami menambah jenis pada dua argumen, orang mestilah rentetan dan tarikh mestilah objek Tarikh untuk kaedah toDateString. Apabila salam dipanggil tanpa kata kunci baharu sebelum hujah kedua, Date(), TypeScript akan memberitahu anda ia menerima rentetan dan bukannya Tarikh untuk parameter tarikh. Kini, anda boleh membetulkan ralat anda sebelum membangunkan lebih lanjut dan perlu menjejak kembali ralat ini apabila anda menerima output yang tidak dijangka semasa menguji.

Sekarang anda telah melihat TypeScript beraksi, mari kita periksa langkah seterusnya dalam menyediakan projek anda untuk menggunakannya.

Mengkonfigurasi Pengkompil TypeScript: tsconfig.json

Kompilasi TypeScript lalai mungkin bukan yang anda cari, dan terdapat cara untuk menyesuaikan TypeScript untuk keperluan anda, sama seperti menggunakan linter, tetapi ia boleh melakukan lebih banyak lagi.

Langkah pertama ialah mencipta fail tsconfig.json dalam direktori akar projek anda. Fail ini memberitahu TypeScript fail yang perlu disertakan dalam proses penyusunan. Dalam tsconfig.json, anda boleh menentukan direktori daripada akar yang harus disertakan jika anda mahukan lebih spesifik menggunakan kunci "termasuk" fail JSON anda.

function greet(person, date) {
  console.log(`Hello ${person}, today is ${date}!`);
}

greet("Brendan");

Sekarang, mari bercakap tentang "compilerOptions". Percayalah apabila saya mengatakan terdapat banyak pilihan untuk dipilih. Ini adalah perkara yang baik tetapi juga menakutkan jika ini kali pertama anda menggunakan TypeScript. Saya akan memecahkan beberapa pilihan popular untuk membantu anda bermula:

membenarkanJs

function greet(person: string, date: Date) {
  console.log(`Hello ${person}, today is ${date.toDateString()}!`);
}

greet("Maddison", Date());

Pilihan ini membenarkan fail JavaScript diimport di dalam projek anda dan bukannya TypeScript sahaja. Biasanya, TypeScript menganggap semua import ialah TypeScript dan akan memberikan ralat untuk fail JavaScript yang diimport, tetapi pilihan ini membolehkan kami menggunakan import tersebut dan boleh membantu apabila bekerja dengan TypeScript dan JavaScript dalam repositori yang sama.

esModuleInterop

{
  "include": ["src/**/*"]
}

Import ruang nama dalam ES6 hanya boleh menjadi objek, tetapi memandangkan ini sama seperti menggunakan require tanpa .default, kami telah membenarkan TypeScript untuk merawat objek sebagai fungsi. Daripada perlu berhati-hati tentang import kami, pilihan ini akan membetulkan isu ini apabila TypeScript mentranspile kod ke dalam JavaScript.

sasaran

{
  "compilerOptions": {
    "allowJs": true
  }
}

Pilihan ini mengubah ciri JS yang diturunkan taraf dan yang dibiarkan utuh apabila TypeScript menyalin kod anda ke dalam JavaScript. es6 ialah pilihan yang baik kerana kebanyakan penyemak imbas moden menyokong ES6, tetapi anda boleh menetapkan mana-mana versi ECMAScript untuk pilihan ini untuk memenuhi keperluan anda.

tegas

{
  "compilerOptions": {
    "esModuleInterop": true
  }
}

Bendera ini membolehkan banyak gelagat semakan jenis yang berbeza. Ini akan menghasilkan pangkalan kod yang lebih kukuh dengan ralat yang lebih sedikit. Jika anda ingin mengecualikan tingkah laku semakan jenis tertentu, semak dokumentasi [3] dan tetapkan pilihannya kepada palsu. Jika anda hanya mahukan beberapa gelagat pemeriksaan jenis pasangan, saya akan mempertimbangkan untuk menghidupkannya daripada menggunakan yang ketat.

outDir

{
  "compilerOptions": {
    "target": "es6"
  }
}

Apabila TypeScript menyalin kod anda ke dalam JavaScript yang boleh digunakan, pilihan ini akan memancarkan fail tersebut ke dalam direktori ini.

tiadaEmit

function greet(person, date) {
  console.log(`Hello ${person}, today is ${date}!`);
}

greet("Brendan");

Pilihan ini menghentikan semua fail JavaScript yang ditranspil daripada dipancarkan. Ini mungkin terdengar bodoh kerana saya baru sahaja memberitahu anda tentang outDir, tetapi TypeScript akan sentiasa mengeluarkan fail dan outDir akan mengarahkan fail ke lokasi yang betul. noEmit mula bermain apabila anda sudah menggunakan alat lain seperti Babel atau Webpack untuk mentranspile dan menggabungkan kod anda. Memancarkan dalam kes ini bermakna mencipta fail JavaScript yang tidak berguna.

Kesimpulan

Begitulah. Itu ialah tujuh pilihan untuk membantu anda menyediakan konfigurasi anda untuk TypeScript dan cara TypeScript boleh membantu anda mencipta pangkalan kod yang lebih stabil. Saya mengesyorkan agar anda membaca "Helaian Penipuan TSConfig" Matt Pocock untuk mendapatkan pilihan yang lebih popular untuk dimasukkan ke dalam tsconfig.json anda dan sentiasa merujuk kepada dokumentasi TypeScript pada TSConfig sebelum melaksanakan mana-mana pilihan ini.

Selamat Pengekodan!
Tyler Meyer

Sumber:

[1] https://www.typescriptlang.org/

[2] https://www.typescriptlang.org/docs/handbook/2/basic-types.html

[3] https://www.typescriptlang.org/tsconfig/

[4] https://www.totaltypescript.com/tsconfig-cheat-sheet

Atas ialah kandungan terperinci TypeScript: Bermula Dengan Pilihan TSConfig. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!