React + Typescript

Link

• Course: https://frontendmasters.com/courses/react-typescript-v2/
• Course web link : https://fem-react-typescript.vercel.app/
• Example repo course : https://fem-react-typescript.vercel.app/Repositories and Sandboxes.md

Note

Course ini ngebahas penggunaan typescript di aplikasi react. Buat belajar lebih dalam, ada course khusus yang bahas typescript

• Versi baru -> Belum selesai editing dari pihak frontend master
  • https://frontendmasters.com/workshops/typescript-v4/
  • https://frontendmasters.com/workshops/intermediate-typescript-v2/
  • https://frontendmasters.com/workshops/enterprise-typescript-v2/

• Versi lama
  • https://frontendmasters.com/courses/typescript-v3/
  • https://frontendmasters.com/courses/intermediate-typescript/

Typescript learning path : https://frontendmasters.com/learn/typescript/

Introduction - Kenapa pakai typescript?

• Developer experience. Misal: error jika props tidak lengkap dan auto complete option didalam props.
• Menjaga kode lebih maintanable karena aturan / type checking di typescript
• Mencegah runtime error. Error pada typescript dimunculkan pada saat compile time. Lebih baik error pada saat compile daripada error saat runtime dan membuat seluruh aplikasi tidak bisa diakses.

Contoh penggunaan

Define type props

Sebisa mungkin jangan pakai any tapi kalau mentok gpp :). Kalau mau opsional, bisa tambahin ? di props nya.

import { ChangeEventHandler } from 'react';

type ControlPanelProps = {
  name: string;
  onChange: React.ChangeEventHandler<HTMLInputElement>;
  description?: string; // optional
  size: 'normal' | 'large' // Option / variant
};

const ControlPanel = ({ name, onChange, description }: ControlPanelProps) => {
  // …
};

Kalau bingung sama type sebuah props coba hover props nya. Nanti muncul popup type nya. Khusus pake VS Code. Kalau yang lain belum tau bisa apa ngga.

Props yang sering dipakai
https://fem-react-typescript.vercel.app/Commonly-used props.md

Types vs Interface

Sebuah panduan kapan pakai type atau interface
https://fem-react-typescript.vercel.app/Types versus interfaces.md