TypeScript: Mempelajari Asas React

Artikel ini meneroka manfaat TypeScript dan penggunaan asasnya, terutamanya dalam pembangunan React. Artikel sebelumnya (pautan yang ditinggalkan untuk keringkasan) Pengenalan dan persediaan persekitaran TypeScript yang dilindungi.

Mengapa memilih TypeScript?

kekuatan awal JavaScript, fleksibiliti, sering menjadi kelemahan dalam projek yang lebih besar. Penaipan dinamiknya boleh membawa kepada kesukaran penyelenggaraan dan cabaran skalabiliti. TypeScript alamat ini dengan memperkenalkan menaip statik, menawarkan beberapa kelebihan utama:

Pengesanan Bug Awal: Penaipan statik membolehkan pengenalpastian awal bug yang berpotensi semasa pembangunan. Pengkompil menghalang kompilasi jika kesilapan jenis dikesan, meningkatkan kebolehpercayaan kod.

Skalabiliti dan pemeliharaan yang dipertingkatkan: Jenis dan antara muka Memastikan konsistensi kod dan penggunaan yang betul merentasi modul, penting untuk aplikasi yang lebih besar. Dalam React, ini menjamin kebolehpercayaan komponen dengan menguatkuasakan jenis prop yang diharapkan.

Pembacaan kod yang lebih baik dan panjang umur: menaip eksplisit meningkatkan kejelasan kod, memberi manfaat kepada pemaju asal dan penyumbang masa depan. Memahami jenis data memudahkan debugging dan penyelenggaraan.

menaip eksplisit: Kekuatan teras

Kekuatan TypeScript terletak pada keupayaannya untuk menentukan jenis pembolehubah secara eksplisit. Walaupun menaip tersirat adalah mungkin, ia meningkatkan risiko tingkah laku yang tidak dijangka. Pertimbangkan contoh -contoh ini:

<code class="language-typescript">let author: string = "Tyler Meyer";
author = 32; // Error: Type 'number' is not assignable to type 'string'.
console.log(author); // Will not execute due to the error above.</code>

di sini,

secara eksplisit ditaip sebagai rentetan, mencegah penyerahan nombor. author

<code class="language-typescript">let studentGrades: number[] = [80, 85, 93];
studentGrades.push(88); // Valid
studentGrades.push("A"); // Error: Type 'string' is not assignable to type 'number'.
studentGrades.push("97"); // Error: Type 'string' is not assignable to type 'number'.</code>

array

ditakrifkan untuk memegang nombor sahaja. studentGrades

alias dan antara muka: Menguruskan jenis kompleks

Apabila projek berkembang, jenis alias dan antara muka menjadi penting untuk menguruskan struktur data yang kompleks.

<code class="language-typescript">type Author = {
  firstName: string;
  lastName: string;
  age: number;
  lovesCoding: boolean;
};

const coolAuthor: Author = {
  firstName: "Tyler",
  lastName: "Meyer",
  age: 32,
  lovesCoding: true,
};</code>

aliases () boleh digunakan dengan pelbagai jenis data. Walau bagaimanapun, antara muka () khusus untuk jenis objek dan warisan sokongan:

type interface

Typescript dalam React

<code class="language-typescript">interface Book {
  title: string;
  numberOfPages: number;
}

interface Textbook extends Book {
  subject: string;
}

const calculusBook: Textbook = {
  title: "Calculus 4 Dummies",
  numberOfPages: 58,
  subject: "Calculus",
};</code>

Untuk projek React menggunakan fail, TypeScript meningkatkan pengurusan aliran data dalam komponen.

.tsx Fungsi jenis-selamat:

Keselamatan Jenis Fungsi

memastikan penggunaan parameter yang betul.

<code class="language-typescript">type Person = {
  name: string;
  age: number;
};

function greeting({ name, age }: Person) {
  return `My name is ${name}, and I am ${age} years old.`;
}

greeting({ name: 'Tyler', age: 32 }); // Valid
greeting({ name: 'Ash', profession: 'Photographer' }); // Error: Missing 'age' property
greeting({ name: 'Sadie', age: '1' }); // Error: Type 'string' is not assignable to type 'number'.</code>

greeting Komponen React Type-Safe:

Contoh ini menunjukkan props-selamat jenis dalam komponen React.

<code class="language-typescript">import React from 'react';

type ChildProps = {
  name: string;
  age: number;
  profession: string;
};

function Child({ name, age, profession }: ChildProps) {
  return (
    <div>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
      <p>Profession: {profession}</p>
    </div>
  );
}

function App() {
  return (
    <div>
      <h1>This is my child:</h1>
      <Child name="Tyler" age={32} profession="Software Developer" />
    </div>
  );
}</code>

Sumber:

(pautan yang ditinggalkan untuk keringkasan) Sumber -sumber asal telah disebutkan, tetapi pautan dikeluarkan untuk mematuhi permintaan untuk tidak memasukkan pautan luaran.

Atas ialah kandungan terperinci TypeScript: Mempelajari Asas React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!