Pengantar menggunakan TypeScript di React

TypeScript — superset JavaScript, tidak diragukan lagi memiliki beberapa manfaat luar biasa — pengetikan statis, kelas, antarmuka, dan intellisense yang ditingkatkan yang dapat membuat saran yang lebih kuat untuk pelengkapan otomatis dan menangani potensi kesalahan sebelum kompilasi. Itu berarti editor kode Anda tidak hanya akan membuat saran yang lebih cerdas untuk pelengkapan otomatis, tetapi juga menunjukkan kesalahan saat itu juga, daripada harus mencari tahu ada sesuatu yang tidak berfungsi dengan benar saat Anda beralih ke browser.

Ada beberapa hal yang perlu diperhatikan saat memulai TypeScript di React:

1. Memulai dengan create-react-app dan TypeScript:

Jika Anda memulai proyek BARU menggunakan create-react-app:

npx create-react-app [your app's name] --template typescript

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

Sekarang kita menggunakan TypeScript sebagai reaksi, Anda akan menggunakan ekstensi file .tsx daripada .js standar untuk JavaScript.

Hal lain yang akan Anda lihat adalah tsconfig.json yang memiliki beberapa pengaturan default untuk konfigurasi TypeScript, dan react-app-env.d.ts, yang mereferensikan jenis untuk skrip reaksi dan membantu dengan hal-hal seperti mengizinkan SVG impor.

3. Komponen dan Impor:

Karena bagaimana hal-hal diketik secara statis dalam TS, kita perlu melakukan beberapa hal tambahan saat menyiapkan komponen kita. Anda perlu mengimpor beberapa hal tambahan di bagian atas setiap komponen (*atau Anda dapat menggunakan React.<> di mana <> adalah jenis atau peristiwa yang seharusnya Anda impor).

Beberapa hal umum yang saya temukan sendiri diimpor selain dari beberapa kait reaksi biasa seperti useState dan useEffect, adalah ChangeEvent, dan FC (komponen fungsional) — pelengkapan otomatis dengan TS adalah BAGUS saat mengimpor sesuatu!

import React, { useState, ChangeEvent, FC } from "react";

Hal terakhir yang akan kita fokuskan hari ini adalah definisi tipe sederhana. Salah satu fungsi utama TypeScript adalah pengetahuan terdokumentasi tentang jenis apa yang kita gunakan dan di mana mengubahnya, dan deteksi dini otomatis untuk mencegah bug dan kesalahan.

Ada beberapa cara untuk mendeklarasikan suatu tipe. Salah satunya adalah dengan menggunakan antarmuka:

export interface Props {   
   name: string;   
   age: number;
}

Perhatikan beberapa definisi tipe:

1. 'Aplikasi: FC' yang mendefinisikan Aplikasi kami sebagai komponen fungsional.
2. 'useState<string>( )' yang mendeklarasikan bagian tersebut sebagai string. Anda juga dapat melakukan ini dengan memberikan useState string kosong: useState('')
3. 'event: ChangeEvent<HTMLInputElement>' yang menyatakan jenis acara apa yang diterima ke dalam fungsi onSearchInput.

Semangat, saya akan segera kembali dengan lebih banyak lagi!