TypeScript ditaip dengan ketat - Bahagian jenis statik penuh

Dalam bahagian sebelumnya dalam siri siaran ini, kami membincangkan tentang kebolehbatalan yang selamat.

Sekarang kami akan menerangkan dan menyelesaikan masalah ketiga dan terakhir bagi kelakuan lalai TypeScript: kekal penaipan dinamik.

Kami akan meliputi:

• Kekal menaip dinamik
• Semakan kesaksamaan sebenar
• Tiada penukaran tersirat dalam keadaan
• Notasi trengkas syarat
• Tiada rentetan dan campuran nombor

Tinggalan menaip dinamik

TypeScript sepatutnya menjadi "pemeriksa jenis statik", berbanding JavaScript yang menaip sangat dinamik.

Tetapi dalam bahagian sebelumnya dalam siri siaran ini, kami juga menjelaskan bahawa TypeScript dibina sebagai superset JavaScript.

Jadi masalahnya ialah: beberapa bahagian sistem menaip dinamik JavaScript kekal dalam TypeScript. Oleh itu, kami akan menerangkan cara menyekat tingkah laku yang tinggal ini untuk mencapai penaipan statik penuh.

Pemeriksaan kesaksamaan sebenar

• ESLint: eqeqeq
• Biome: suspicious.noDoubleEquals (dalam disyorkan)

Contoh terbaik masalah ialah pemeriksaan kesaksamaan. Dalam JavaScript, == bukan semakan kesaksamaan tetapi semakan kesetaraan:

1 == "1"; // true

Walaupun jenisnya berbeza, beberapa peraturan penukaran mula beraksi supaya JavaScript dapat membandingkan nilai. Ia boleh membawa kepada banyak ralat, kerana butiran peraturan sukar diingat, kadangkala agak pelik dan tidak betul-betul sama dalam semua bahasa dinamik (seperti PHP misalnya).

Semakan kesetaraan ini hanya masuk akal dalam bahasa yang ditaip secara dinamik seperti JavaScript. Dari saat kami memutuskan untuk bekerja dalam TypeScript, hanya semakan kesaksamaan sebenar (jenis dan nilai) harus digunakan.

1 === "1"; // false

Peraturan eqeqeq lint menguatkuasakannya.

Orang yang datang dari bahasa seperti Java, C# atau Rust harus berhati-hati dengan masalah ini, kerana == dalam JavaScript atau TypeScript tidak bermaksud sama seperti dalam bahasa ini. Dalam JavaScript dan TypeScript, satu pertiga = diperlukan untuk mencapai gelagat yang sama.

Tiada penukaran tersirat dalam keadaan

• ESLint: @typescript-eslint/strict-boolean-expressions
• Biome: peraturan tiada

Fikirkan keadaan kini selamat? Malangnya tidak, kerana penukaran boleh tersirat:

let tax: number | undefined = 0;

if (tax) {
  console.log("Process payment");
}
if (!tax) {
  throw new Error();
}

Contoh di atas adalah bersamaan dengan:

let tax: number | undefined = 0;

if (tax == true) {
  console.log("Process payment");
}
if (tax == false) {
  throw new Error();
}

Seperti yang anda lihat, terdapat == tersirat, jadi penukaran masih berlaku: 0 tidak bersamaan dengan benar, ia bersamaan dengan palsu. Jadi ia akan ralat walaupun cukai adalah nilai yang sah.

Peraturan lint-boolean-expressions yang ketat tidak membenarkan syarat tersirat sedemikian dan menguatkuasakan semakan sebenar:

let tax: number | undefined = 0;

if (tax !== undefined) {
  console.log("Process payment");
}
if (tax === undefined) {
  throw new Error();
}

Ini mungkin salah satu peraturan yang paling membosankan untuk dipatuhi bagi orang yang terbiasa dengan keadaan pantas dalam JavaScript, tetapi untuk meletakkannya dalam perspektif, ia hanyalah cara biasa untuk melakukan perkara dalam bahasa lain seperti Java, C# atau Rust.

Seperti yang ditunjukkan dalam bahagian konfigurasi, melumpuhkan sub-pilihan allowNumber dan allowString adalah penting untuk mengelakkan semua ralat.

Satu-satunya pengecualian yang dibenarkan adalah untuk objek dan tatasusunan: kes ini selamat kerana bertentangan dengan rentetan dan nombor, ia tidak mempunyai nilai palsu. Jadi yang berikut masih OK:

let movie: Movie | undefined;
if (movie) {}
if (!movie) {}

Nota: penyataan suis sudah selamat kerana ia digunakan === secara dalaman.

Notasi singkatan syarat

• ESLint: @typescript-eslint/prefer-nullish-coalescing (dalam style-type-checked)
• Biome: peraturan tiada

Peraturan lint-boolean-expressions yang ketat menjaga agar semakan syarat selamat jenis, tetapi terdapat sintaks syarat lain daripada jika:

const movieRating = userRating || 5;

// Which is a shorter version of:
const movieRating = userRating == true ? userRating : 5;

Jika pengguna menilai 0, 0 adalah bersamaan dengan palsu, maka rating akan menjadi 5 dan bukannya 0.

Ia boleh dielakkan dengan JavaScript moden:

const movieRating = userRating ?? 5;

// Which is a shorter version of:
const movieRating = userRating !== undefined && userRating !== null
  ? userRating
  : 5;

Ia boleh dikuatkuasakan oleh peraturan serabut yang lebih baik-yang batal.

Perhatikan bahawa ?? tidak boleh digunakan di mana-mana: || masih relevan apabila bekerja dengan boolean.

Tiada rentetan dan nombor bercampur

• ESLint:
  • prefer-template
  • @typescript-eslint/restrict-plus-operands (dalam disyorkan-type-checked)
  • @typescript-eslint/restrict-template-expressions (dalam disyorkan-type-checked)
• Biome:
  • style.useTemplate (dalam disyorkan)
  • peraturan lain tiada

Dalam JavaScript, operator + boleh digunakan kedua-duanya untuk penambahan nombor matematik atau penyatuan rentetan. Ia membawa kepada kesilapan.

"There is " + 3 + 1 + "Matrix movies"; // 31
"There is " + (3 + 1) + "Matrix movies"; // 4

Operator + hendaklah dikhaskan untuk penambahan matematik. Atau sekurang-kurangnya, ia hendaklah digunakan hanya dengan data jenis yang sama, yang dikuatkuasakan oleh peraturan lint-plus-operand.

Template strings from modern JavaScript should be used for string concatenation, which the prefer-template lint rule enforces:

const movie = `Everything everywhere all at once`;
`${movie} is the best movie!`;

Conversely, only strings should be used in template strings, which the restrict-template-expressions lint rule enforces.

If mixing types is what is actually wanted, conversions should be explicit:

const total = 3;
`There is ${total.toFixed()} Matrix movies`;

Note that template strings can be nested:

const total = 3;
`There is ${total.toFixed()} Matrix movie${total > 1 ? "s" : ""}`;

Conclusion

This is the end of this posts series. You can follow my account (button on top right of this page) to know when other posts about TypeScript or other topics like Angular are published.

You want to contact me? Instructions are available in the summary.

Atas ialah kandungan terperinci TypeScript ditaip dengan ketat - Bahagian jenis statik penuh. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!