Pengecekan Static Type

Pengecekan static type seperti Flow dan TypeScript mengidentifikasi jenis masalah tertentu bahkan sebelum kode dijalankan. Pengecekan tersebut juga bisa meningkatkan alur kerja pengembang dengan menambahkan fitur seperti pelengkapan kode secara otomatis. Dengan alasan ini, kami sarankan untuk menggunakan Flow atau TypeScript alih-alih menggunakan PropTypes untuk kode program berukuran besar.

Flow

Flow merupakan pengecek static type untuk kode JavaScript. Pengecek ini dikembangkan di Facebook dan sering digunakan bersama React. Pengecek ini memungkinkan Anda untuk menganotasi variabel, fungsi, dan komponen React menggunakan sintaksis khusus dan menemukan kesalahan secara dini. Anda bisa membaca pengenalan Flow untuk mempelajari dasar-dasarnya.

Untuk menggunakannya, Anda harus:

Menambahkan Flow ke proyek Anda sebagai dependency.
Memastikan sintaksis Flow dihapus dari kode hasil dikompilasi.
Menambahkan type annotation dan menjalankan Flow untuk mengeceknya.

Kami akan menjelaskan langkah-langkah tersebut secara mendetail.

Menambahkan Flow ke Proyek

Pertama-tama, buka direktori proyek Anda di terminal. Anda akan harus menjalankan perintah berikut:

Jika menggunakan Yarn, jalankan:

yarn add --dev flow-bin

Jika menggunakan npm, jalankan:

npm install --save-dev flow-bin

Perintah tersebut akan menginstal versi terbaru Flow ke proyek Anda.

Kini, tambahkan flow ke bagian "scripts" pada package.json Anda untuk bisa menjalankannya dari terminal:

{
  // ...
  "scripts": {
    "flow": "flow",    // ...
  },
  // ...
}

Terakhir, jalankan salah satu dari perintah berikut:

Jika menggunakan Yarn, jalankan:

yarn run flow init

Jika menggunakan npm, jalankan:

npm run flow init

Perintah tersebut akan membuat konfigurasi Flow yang harus Anda sertakan dalam commit.

Menghapus Sintaksis Flow dari Kode Hasil Kompilasi

Flow memperluas bahasa JavaScript dengan sintaksis khusus untuk type annotation. Akan tetapi browser tidak mengenal sintaksis ini, jadi kita harus memastikan sintaksis tersebut dihapus dari bundel JavaScript hasil kompilasi yang akan dikirim ke browser.

Cara yang benar untuk melakukannya tergantung pada peralatan yang Anda gunakan untuk mengompilasi JavaScript.

Create React App

Jika proyek Anda disiapkan menggunakan Create React App, maka kami ucapkan selamat! Anotasi Flow akan dihapus secara default dan tidak ada yang perlu dilakukan pada langkah ini.

Babel

Catatan:

Petunjuk berikut bukan ditujukan untuk pengguna Create React App. Walau pengguna Create React App menggunakan Babel di balik layar, Babel tersebut telah dikonfigurasi untuk memahami Flow. Hanya ikuti langkah berikut jika Anda tidak menggunakan Create React App.

Jika Babel dikonfigurasi secara manual untuk proyek Anda, Anda harus menginstal preset khusus untuk Flow.

Jika menggunakan Yarn, jalankan:

yarn add --dev @babel/preset-flow

Jika menggunakan npm, jalankan:

npm install --save-dev @babel/preset-flow

Kemudian tambahkan preset flow ke konfigurasi Babel Anda. Misalnya, jika Babel dikonfigurasi lewat file .babelrc, tampilannya mungkin seperti berikut:

{
  "presets": [
    "@babel/preset-flow",    "react"
  ]
}

Ini memungkinkan Anda untuk menggunakan sintaksis Flow pada kode Anda.

Catatan:

Flow tidak membutuhkan preset react, tetapi keduanya sering digunakan secara bersama. Flow sendiri memahami sintaksis JSX secara mandiri.

Setup Build Lainnya

Jika Anda tidak menggunakan Create React App atau Babel, Anda bisa menggunakan flow-remove-types untuk menghapus type annotation.

Menjalankan Flow

Jika Anda mengikuti petunjuk di atas, Anda bisa menjalankan Flow pertama kali.

yarn flow

Jika menggunakan npm, jalankan:

npm run flow

Seharusnya Anda akan melihat pesan seperti:

No errors!
✨  Done in 0.17s.

Menambahkan Type Annotation Flow

Secara default, Flow hanya mengecek file yang disertakan anotasi berikut:

// @flow

Umumnya anotasi tersebut ditempatkan di bagian atas file. Coba tambahkan anotasi tersebut ke beberapa file dalam proyek dan jalankan yarn flow atau npm run flow untuk melihat apakah Flow sudah menemukan masalah.

Tersedia juga sebuah opsi untuk memaksa Flow untuk mengecek semua file tanpa melihat adanya anotasi. Ini bisa berakibat terlalu “ramai” untuk proyek yang sudah ada, tetapi cukup bagi proyek baru jika Anda ingin menggunakan Flow secara lengkap.

Kini Anda sudah siap! Kami sarankan untuk memeriksa sumber daya berikut untuk mempelajari lebih lanjut tentang Flow:

TypeScript

TypeScript merupakan bahasa pemrograman yang dikembangkan oleh Microsoft. Bahasa ini merupakan superset dari JavaScript dan menyertakan kompilernya sendiri. Oleh karena TypeScript adalah typed language, bahasa ini bisa menangkap kesalahan dan bug pada saat proses build, jauh sebelum aplikasi Anda tampil untuk para pemirsa. Anda bisa mempelajari lebih lanjut tentang penggunaan TypeScript dengan React di sini.

Untuk menggunakan TypeScript, Anda harus:

Menambahkan TypeScript sebagai dependency ke proyek Anda
Mengonfigurasi opsi kompiler TypeScript
Menggunakan ektensi file yang benar
Menambahkan definisi untuk library yang Anda gunakan

Mari kita jelajahi secara mendetail.

Menggunakan TypeScript dengan Create React App

Create React App mendukung TypeScript secara langsung.

Untuk membuat proyek baru dengan dukungan TypeScript, jalankan:

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

Anda juga bisa menambahkan TypeScript ke proyek Create React App yang sudah ada, seperti yang didokumentasikan di sini.

Catatan:

Jika Anda menggunakan Create React App, Anda bisa melewati sisa halaman ini. Sisa halaman ini menjelaskan penyiapan manual yang tidak berlaku untuk pengguna Create React App.

Menambahkan TypeScript ke Proyek

Semuanya dimulai dengan menjalankan satu perintah di terminal Anda.

Jika menggunakan Yarn, jalankan:

yarn add --dev typescript

Jika menggunakan npm, jalankan:

npm install --save-dev typescript

Selamat! Anda telah menginstal versi terbaru TypeScript ke proyek Anda. Instalasi TypeScript memberikan akses ke perintah tsc. Sebelum mengonfigurasi, mari tambahkan tsc ke bagian “scripts” pada package.json:

{
  // ...
  "scripts": {
    "build": "tsc",    // ...
  },
  // ...
}

Mengonfigurasi Kompiler TypeScript

Kompiler tidak akan membantu kita hingga kita memberi tahu apa yang harus kompiler lakukan. Pada TypeScript, aturan ini didefinisikan pada berkas khusus yang diberi nama tsconfig.json. Untuk membuat berkas ini:

Jika menggunakan Yarn, jalankan:

yarn run tsc --init

Jika menggunakan npm, jalankan:

npx tsc --init

Pada tsconfig.json yang baru dibuat, Anda bisa melihat banyak opsi yang bisa dikonfigurasi untuk kompiler. Untuk deskripsi mendetail tentang semua opsi kunjungi halaman ini.

Dari sekian banyak opsi, mari kita lihat opsi rootDir dan outDir. Awalnya, kompiler akan mengambil berkas TypeScript dan menciptakan berkas JavaScript. Akan tetapi kita tidak ingin mencampur aduk berkas sumber dengan berkas keluaran yang diciptakan.

Kita akan mengatasi masalah ini dalam dua langkah:

Pertama-tama, mari kita susun struktur proyek kita seperti berikut. Kita akan tempatkan semua kode sumber dalam direktori src.

├── package.json
├── src
│   └── index.ts
└── tsconfig.json

Berikutnya, kita akan memberi tahu kompiler letak kode sumber kita dan tempat keluaran akan disimpan.

// tsconfig.json

{
  "compilerOptions": {
    // ...
    "rootDir": "src",    "outDir": "build"    // ...
  },
}

Kini, jika kita menjalankan build script, maka kompiler akan menghasilkan kode JavaScript di folder build. TypeScript React Starter menyediakan tsconfig.json dengan sekumpulan aturan yang cukup bagi Anda untuk memulai.

Secara umum Anda tidak ingin menyimpan kode JavaScript yang dihasilkan dalam sistem source control Anda, jadi pastikan untuk menambahkan folder build ke file .gitignore.

Ekstensi file

Dalam React, kemungkinan besar Anda menulis komponen pada file .js. Dalam TypeScript kita memiliki 2 ekstensi file:

.ts sebagai ekstensi default, dan
.tsx yang merupakan ekstensi khusus yang digunakan untuk file yang mengandung JSX.

Menjalankan TypeScript

Jika Anda mengikuti petunjuk di atas, seharusnya Anda bisa menjalankan TypeScript untuk pertama kali.

yarn build

Jika menggunakan npm, jalankan:

npm run build

Jika tidak melihat keluaran, berarti prosesnya selesai dengan sukses.

Type Definition

Untuk bisa melihat kesalahan dan petunjuk dari package lainnya, kompiler mengandalkan file deklarasi. File deklarasi menyediakan seluruh informasi type tentang sebuah library. Ini memungkinkan kita untuk menggunakan library JavaScript, misalnya dari npm, dalam proyek kita.

Ada dua cara utama untuk mendapatkan deklarasi sebuah library:

Dibundel - Library membundel file deklarasinya sendiri. Ini baik sekali bagi kita, karena yang perlu kita lakukan adalah menginstal library tersebut, dan kita bisa langsung menggunakannya. Untuk memeriksa apakah library memiliki type yang dibundel, cari file bernama index.d.ts dalam proyeknya. Beberapa library menentukannya dalam file package.json mereka, di bawah field typings atau types.

DefinitelyTyped - DefinitelyTyped adalah repositori raksasa berisi deklarasi library yang tidak membundel file deklarasi. Deklarasi di dalamnya diurun daya berbagai pihak dan dikelola oleh Microsoft beserta kontributor sumber terbuka. React misalnya, tidak membundel file deklarasinya sendiri, namun kita bisa mendapatkannya dari DefinitelyTyped. Untuk melakukannya, masukkan perintah berikut dalam terminal.

# yarn
yarn add --dev @types/react

# npm
npm i --save-dev @types/react

Deklarasi Lokal Terkadang package yang ingin digunakan tidak memiliki deklarasi terbundel atau tidak tersedia di DefinitelyTyped. Pada kasus ini, kita bisa membuat berkas deklarasi lokal. Untuk melakukannya, buat berkas declarations.d.ts pada akar direktori sumber Anda. Deklarasi sederhana tampak sebagai berikut:

declare module 'querystring' {
  export function stringify(val: object): string
  export function parse(val: string): object
}

Kini Anda siap menciptakan kode program! Kami sarankan untuk mengunjungi sumber daya berikut untuk mempelajari lebih lanjut tentang TypeScript:

Reason

Reason bukan sebuah bahasa baru, Reason merupakan sintaksis dan toolchain baru yang didukung bahasa OCaml yang telah teruji. Reason memberikan sintaksis OCaml yang familier, yang ditujukan untuk pemrogram JavaScript, serta melayani alur kerja NPM/Yarn yang sudah ada dan telah diketahui.

Reason dikembangkan di Facebook, dan digunakan dalam beberapa produknya seperti Messenger. Reason masih bersifat eksperimental tetapi telah memiliki binding React khusus yang diasuh oleh Facebook serta komunitas yang dinamis.

Kotlin

Kotlin merupakan typed language yang statis dan dikembangkan oleh JetBrains. Platform targetnya mencakup JVM, Android, LLVM, dan JavaScript.

JetBrains mengembangkan dan mengasuh beberapa peralatan khusus untuk komunitas React: binding React serta Create React Kotlin App. Yang terakhir bisa membantu Anda membangun aplikasi React bersama Kotlin tanpa adanya konfigurasi build.

Bahasa Lainnya

Perhatikan bahwa ada beberapa typed language yang statis yang mengompilasi menjadi JavaScript serta kompatibel dengan React. Misalnya, F#/Fable dengan elmish-react. Kunjungi masing-masing situs untuk informasi lebih lanjut. Silakan tambahkan typed language statis yang berfungsi bersama React ke halaman ini.

Is this page useful?Edit halaman ini