Menguasai TypeScript dengan React: Panduan Langkah demi Langkah

??‍♀️ Pengenalan

TypeScript menambahkan penaipan statik pada JavaScript, yang membantu menangkap potensi pepijat sebelum ia dijalankan. Apabila dipasangkan dengan React, TypeScript meningkatkan komponen anda dengan menguatkuasakan keselamatan jenis. Dalam artikel ini, kami akan membincangkan konsep penting untuk menggunakan TypeScript dengan React.

---

⚛️ Bagaimana untuk Menggunakan TypeScript dengan React?

Pertama, anda perlu memasang TypeScript dalam projek React. Jika anda bermula dari awal, buat apl React baharu dengan TypeScript didayakan:

npx create-react-app my-app --template typescript

Untuk projek sedia ada, anda boleh menambah TypeScript dengan menjalankan:

npm install typescript @types/react @types/react-dom

Kini, anda boleh mula menggunakan fail .tsx dan bukannya .js atau .jsx, dan komponen React anda akan mendapat manfaat daripada ciri TypeScript.

---

Jenis untuk Props Komponen React

Apabila anda mentakrifkan komponen dalam React, anda boleh menentukan jenis propnya untuk menjadikan penggunaan komponen itu lebih jelas dan selamat. Berikut ialah contoh asas:

type UserProps = {
  name: string;
  age: number;
};

const UserCard = ({ name, age }: UserProps) => (
  <div>
    <h1>{name}</h1>
    <p>{age} years old</p>
  </div>
);

Dalam contoh ini, UserCard menjangkakan dua prop: nama (rentetan) dan umur (nombor). Jika anda cuba menghantar jenis yang salah, TypeScript akan menunjukkan ralat.

---

ReactNode Vs ReactElement

Anda mungkin tertanya-tanya bila hendak menggunakan ReactNode atau ReactElement untuk menaip komponen React.

• ReactNode: Mewakili apa sahaja yang boleh dipaparkan oleh React. Ini termasuk rentetan, nombor, JSX, tatasusunan dan nol.

• ReactElement: Merujuk kepada elemen React sebenar, yang lebih khusus dan tidak meliputi rentetan atau null.

Contoh:

type CardProps = {
  children: ReactNode;
};

const Card = ({ children }: CardProps) => <div>{children}</div>;

// Usage
<Card><p>Hello, World!</p></Card>

ReactNode digunakan di sini kerana kanak-kanak boleh menjadi mana-mana elemen yang boleh ditukar, bukan sekadar elemen React.

---

Jenis Vs Antara Muka

Apabila menentukan bentuk prop atau objek lain, kedua-dua jenis dan antara muka boleh digunakan. Jadi, apa bezanya?

• Jenis: Terbaik untuk mencipta jenis kesatuan atau gabungan yang lebih kompleks.
• Antaramuka: Selalunya lebih baik apabila anda merancang untuk melanjutkan atau melaksanakan jenis tambahan.

Berikut ialah perbandingan:

// Using type
type ButtonProps = {
  label: string;
  onClick: () => void;
};

// Using interface
interface LinkProps {
  href: string;
  openInNewTab?: boolean;
}

Walaupun kedua-duanya serupa, antara muka boleh dilanjutkan dengan lebih semula jadi:

interface IconButtonProps extends ButtonProps {
  icon: string;
}

---

Bagaimana untuk Menaip Props dengan TypeScript?

Untuk menaip prop bagi komponen, isytiharkan jenis atau antara muka dan hantarkannya sebagai anotasi jenis untuk prop komponen.

Contoh:

type AlertProps = {
  message: string;
  severity: 'error' | 'warning' | 'info';
};

const Alert = ({ message, severity }: AlertProps) => (
  <div className={`alert ${severity}`}>{message}</div>
);

---

Bagaimana untuk Menaip Props Komponen Berfungsi?

Untuk menaip prop komponen berfungsi, anda boleh menggunakan React.FC atau mengisytiharkan prop secara eksplisit. Walaupun React.FC biasa digunakan, kini ramai yang memilih jenis eksplisit.

Berikut ialah contoh menggunakan jenis eksplisit:

type BadgeProps = {
  text: string;
  color: string;
};

const Badge = ({ text, color }: BadgeProps) => (
  <span style={{ backgroundColor: color }}>{text}</span>
);

Dalam contoh ini, Lencana mempunyai dua prop, teks dan warna, kedua-duanya ditaip sebagai rentetan.

---

⛓ React Hooks dengan TypeScript

Cakuk tindak balas juga boleh ditaip dalam TypeScript untuk memastikan keselamatan taip untuk keadaan dan kesan logik dalam komponen anda.

Berikut ialah cara menggunakan useState dan useEffect dengan TypeScript:

import { useState, useEffect } from 'react';

const Counter = () => {
  const [count, setCount] = useState<number>(0);

  useEffect(() => {
    console.log(`Count is: ${count}`);
  }, [count]);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <p>Count: {count}</p>
    </div>
  );
};

Dalam contoh ini, cangkuk useState ditaip untuk memastikan kiraan sentiasa nombor dan useEffect merekodkan kiraan semasa apabila ia berubah.

---

Dengan mengikuti amalan terbaik ini, anda akan dapat memanfaatkan potensi penuh TypeScript dalam aplikasi React anda, yang membawa kepada kod yang lebih mantap dan boleh diselenggara.

Dan sebelum anda pergi, jika anda juga bekerja dengan SQL, lihat Lembaran Cheat Ultimate SQL kami untuk meningkatkan kemahiran SQL anda dengan pertanyaan asas dan lanjutan!

---

Atas ialah kandungan terperinci Menguasai TypeScript dengan React: Panduan Langkah demi Langkah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!