TypeScript, tolak typescript

Selama bertahun -tahun, TypeScript telah menjadi sebahagian daripada pembangunan JavaScript. Ia menambah sistem jenis berdasarkan JavaScript, meningkatkan kebolehbacaan dan pemeliharaan kod. Walau bagaimanapun, sintaks tambahan dan langkah -langkah penyusunan typescript kadang -kadang boleh meningkatkan beban pembangunan. Nasib baik, pasukan TypeScript menyokong jenis pemeriksaan kod JavaScript tulen menggunakan JSDOC, dengan mengambil kira kedua -dua jenis keselamatan dan kecekapan pembangunan.

Tetapan Projek

Untuk memulakan pemeriksaan jenis dengan JSDOC, anda memerlukan NODEJS dan NPM. Buat projek baru dan jalankan npm init . Artikel ini akan menggunakan kod VS sebagai editor kod. Pasang TypeScript:

 npm i -d typescript

Buat fail tsconfig.json dan tambahkan konfigurasi berikut:

 {
  "CompilerOptions": {
    "Sasaran": "Esnext",
    "Modul": "Esnext",
    "Moduleresolution": "Node",
    "lib": ["es2017", "dom"],
    "Benarkanjs": Benar,
    "SemakJS": Benar,
    "Noemit": Benar,
    "ketat": palsu,
    "NoimplicitThis": Benar,
    "Sentiasa": Benar,
    "EsmoduleInterop": Benar
  },
  "Termasuk": ["skrip", "ujian"],
  "tidak termasuk": ["node_modules"]
}

Konfigurasi utama adalah allowJs dan checkJs , kedua -duanya ditetapkan kepada true , yang membolehkan TypeScript menyemak kod JavaScript. Kami juga menetapkan direktori /script sebagai lokasi kod.

Contoh mudah

Buat fail index.js dan tulis fungsi tambahan mudah:

 /**
 * Tambahkan dua nombor bersama
 * @param {nombor} x
 * @param {nombor} y
 * @return {Number}
 */
fungsi tambah (x, y) {
  kembali xy;
}

Kami menentukan jenis parameter dan pulangan nilai melalui anotasi JSDOC @param dan @return . Cuba panggil fungsi dengan jenis ralat, kod vs akan meminta ralat.

Anotasi JSDOC bersamaan dengan kod TypeScript:

 /**
 * Tambahkan dua nombor bersama
 */
fungsi tambah (x: nombor, y: nombor): nombor {
  kembali xy;
}

JSDOC menyokong pelbagai jenis terbina dalam, seperti string , object , Array , dan jenis DOM seperti HTMLElement , MutationRecord .

JSDOC juga membolehkan menambah kekangan jenis kepada objek, seperti WeakMap :

 /** @type {lemah<object string> } */
const metadata = New WeakMap ();

const object = {};
const OtherObject = {};

metadata.set (objek, 42); // Kesalahan dilaporkan kerana nilai bukan metadata.set rentetan (OtherObject, 'Hello World');</object>

Jenis tersuai

JSDOC membolehkan jenis tersuai ditakrifkan, seperti jenis Person :

 /**
 * @typedef orang
 * @property {string} nama - nama orang itu
 * @property {Number} umur - umur orang itu
 * @property {string} [hobby] - hobi pilihan
 */

Gunakan @typedef untuk menentukan jenis, gunakan @property atau @prop untuk menentukan sifat.

Gunakan jenis tersuai:

 /** @type {orang}*/
const orang = {name: 'John Doe', umur: 30, hobi: 'membaca'};

Satu set pilihan terhad boleh ditakrifkan menggunakan jenis kesatuan:

 /**
 * @typedef {'Cat' | 'Dog' | 'Fish'} Pet
 */

Generik

JSDOC menyokong generik, seperti fungsi identity :

 /**
 * @template t
 * @param {t} sasaran
 * @return {t}
 */
identiti fungsi (sasaran) {
  sasaran pulangan;
}

Gunakan @template untuk menentukan jenis generik.

Jenis penukaran

Kadang -kadang jenis penukaran diperlukan, seperti pemprosesan pendengar acara:

 document.getElementById ('input'). AddEventListener ('input', event => {
  console.log (/** @type {htmlinputeLement}*/(event.target) .value);
});

Gunakan /** @type {类型} */ untuk penukaran jenis.

Meringkaskan

JSDOC menyediakan cara untuk mendapatkan pemeriksaan jenis dan kod arahan semasa menulis kod JavaScript tulen, yang berguna untuk projek yang ingin meningkatkan kualiti kod tanpa memperkenalkan langkah sintaks dan kompilasi tambahan. Walaupun pengkompil TypeScript berkuasa, JSDOC menyediakan alternatif yang fleksibel.

Atas ialah kandungan terperinci TypeScript, tolak typescript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!