TypeScript & React: Integration Guide & Best Practices

1. Introduction

Introduction to TypeScript and React

TypeScript is a programming language developed by Microsoft as a superset of JavaScript. TypeScript adds features like static typing and interfaces that help developers write cleaner, more readable, and safer code. React is a popular JavaScript library for building user interfaces developed by Facebook. The combination of TypeScript and React provides benefits in developing more efficient and secure frontend applications.

Reasons for combining TypeScript with React in frontend development

Combining TypeScript with React has various advantages, such as:

• Improve code reliability by checking data types statically
• Make error detection easier during development
• Help with code documentation and readability
• Increase productivity with autocompletion and refactoring features

2. Set Up a React Project with TypeScript

Create a new React project

Create React App was deprecated in February 2025. For production applications, start with one of the frameworks recommended by React. If you specifically want a client-only project to learn React or build from scratch, the React documentation includes this Vite setup:

npm create vite@latest my-app -- --template react-ts

Add TypeScript to an existing React project

The exact migration depends on the framework or build tool. Install the React type packages, rename component files from .jsx to .tsx, and follow that tool's TypeScript migration guide:

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

TypeScript configuration

Keep the tsconfig.json generated or recommended by your framework or build tool instead of copying a generic configuration. Enable TypeScript's strict option for stronger checking.

3. Komponen React dengan TypeScript

Menulis komponen fungsional dengan TypeScript

Type the component's props directly. This matches the current React TypeScript documentation and keeps the return type inferred:

interface Props {
  message: string
}

function MyComponent({ message }: Props) {
  return <div>{message}</div>
}

export default MyComponent

Menulis komponen kelas dengan TypeScript

Untuk menulis komponen kelas dengan TypeScript, Kamu dapat menggunakan tipe React.Component:

import React from 'react'

interface Props {
  message: string
}

interface State {
  count: number
}

class MyComponent extends React.Component<Props, State> {
  state: State = {
    count: 0,
  }

  render() {
    return (
      <div>
        {this.props.message} - {this.state.count}
      </div>
    )
  }
}

export default MyComponent

Menggunakan antarmuka dan tipe untuk Props dan State

Gunakan antarmuka atau tipe untuk mendefinisikan Props dan State dalam komponen Kamu, sehingga TypeScript dapat memeriksa tipe data secara statis:

interface Props {
  message: string
}

interface State {
  count: number
}

4. React Hooks dan TypeScript

Menggunakan useState dan useEffect dengan TypeScript

Untuk menggunakan useState dan useEffect dengan TypeScript, Kamu dapat menentukan tipe data secara eksplisit:

import React, { useState, useEffect } from 'react'

interface Props {
  initialValue: number
}

function Counter({ initialValue }: Props) {
  const [count, setCount] = useState<number>(initialValue)

  useEffect(() => {
    document.title = `Count: ${count}`
  }, [count])

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

export default Counter

Membuat custom hooks dengan tipe yang aman

Untuk membuat custom hooks dengan tipe yang aman, Kamu dapat menentukan tipe data secara eksplisit:

import { useState, useEffect } from 'react'

interface User {
  id: number
  name: string
}

function useUser(userId: number): User | null {
  const [user, setUser] = useState<User | null>(null)

  useEffect(() => {
    // Fetch user data from API and update state
  }, [userId])

  return user
}

Praktik terbaik dalam menggunakan hooks dengan TypeScript

Berikut adalah beberapa praktik terbaik dalam menggunakan hooks dengan TypeScript:

• Menentukan tipe data secara eksplisit untuk useState dan useEffect
• Membuat custom hooks dengan tipe yang aman
• Menggunakan tipe data yang sesuai untuk event handler dan dependencies

5. Event Handling dan TypeScript

Menangani event dengan tipe yang aman dalam komponen React

Untuk menangani event dengan tipe yang aman dalam komponen React, Kamu dapat menggunakan tipe event yang disediakan oleh TypeScript:

import React, { useState } from 'react'

function TextInput() {
  const [text, setText] = useState<string>('')

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setText(event.target.value)
  }

  return <input type="text" value={text} onChange={handleChange} />
}

export default TextInput

Praktik terbaik dalam menentukan tipe event dan event handler

Berikut adalah beberapa praktik terbaik dalam menentukan tipe event dan event handler:

• Gunakan tipe event yang sesuai dari TypeScript, seperti React.ChangeEvent atau React.MouseEvent
• Tentukan tipe data secara eksplisit untuk event handler
• Gunakan tipe data yang sesuai untuk elemen target, seperti HTMLInputElement atau HTMLButtonElement

6. Form Handling dengan TypeScript

Menggunakan tipe yang aman untuk form handling dalam komponen React

Untuk menggunakan tipe yang aman dalam form handling, Kamu dapat menentukan tipe data untuk event handler dan elemen target:

import React, { useState } from 'react'

interface FormData {
  email: string
  password: string
}

function LoginForm() {
  const [formData, setFormData] = useState<FormData>({
    email: '',
    password: '',
  })

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setFormData({
      ...formData,
      [event.target.name]: event.target.value,
    })
  }

  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault()
    // Process form data
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="email" name="email" value={formData.email} onChange={handleChange} />
      <input type="password" name="password" value={formData.password} onChange={handleChange} />
      <button type="submit">Submit</button>
    </form>
  )
}

export default LoginForm

Integrasi dengan library form handling populer seperti Formik dan React Hook Form

Kamu juga dapat menggunakan library form handling populer seperti Formik atau React Hook Form yang sudah mendukung TypeScript secara bawaan.

7. Pengelolaan State Global dengan Redux dan TypeScript

Mengintegrasikan Redux dengan proyek React dan TypeScript

Untuk mengintegrasikan Redux dengan proyek React dan TypeScript, Kamu perlu menginstal beberapa dependensi dan tipe:

npm install redux react-redux @types/react-redux

Menulis action creators, reducers, dan store dengan tipe yang aman

Gunakan tipe data yang disediakan oleh TypeScript untuk menulis action creators, reducers, dan store dengan tipe yang aman:

// actions.ts
import { createAction } from '@reduxjs/toolkit'

export const increment = createAction('counter/increment')
export const decrement = createAction('counter/decrement')

// reducer.ts
import { createReducer } from '@reduxjs/toolkit'
import { increment, decrement } from './actions'

export const counterReducer = createReducer(0, (builder) => {
  builder.addCase(increment, (state) => state + 1).addCase(decrement, (state) => state - 1)
})

// store.ts
import { configureStore } from '@reduxjs/toolkit'
import { counterReducer } from './reducer'

export const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
})

Menggunakan useSelector dan useDispatch dengan TypeScript

Untuk menggunakan useSelector dan useDispatch dengan TypeScript, Kamu dapat menentukan tipe data untuk state dan action:

import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { increment, decrement } from './actions'

function Counter() {
  const count = useSelector((state: { counter: number }) => state.counter)
  const dispatch = useDispatch()

  return (
    <div>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
      <p>Count: {count}</p>
    </div>
  )
}

export default Counter

8. Menguji Komponen React dengan TypeScript

Pengantar tentang pengujian komponen React dengan TypeScript

Pengujian komponen React yang ditulis dengan TypeScript memastikan bahwa kode Kamu bekerja dengan baik dan aman dari kesalahan tipe data.

Menggunakan library pengujian seperti Jest dan React Testing Library

Gunakan library pengujian yang populer seperti Jest dan React Testing Library untuk menguji komponen React Kamu:

npm install --save-dev jest @types/jest ts-jest @testing-library/react

Praktik terbaik dalam menguji komponen React yang ditulis dengan TypeScript

Berikut adalah beberapa praktik terbaik dalam menguji komponen React yang ditulis dengan TypeScript:

• Gunakan tipe data yang sesuai untuk event dan elemen target
• Pastikan bahwa pengujian mencakup kasus-kasus yang berbeda
• Gunakan library pengujian yang mendukung TypeScript, seperti Jest dan React Testing Library

9. Praktik Terbaik dalam Menggunakan TypeScript dan React

Menyusun kode yang mudah dibaca dan mudah dipelihara

Pastikan bahwa kode Kamu mudah dibaca dan dipelihara dengan menggunakan tipe data yang eksplisit, antarmuka, dan komentar yang jelas.

Menggunakan tipe yang ketat untuk mengurangi kesalahan pada saat runtime

Gunakan tipe data yang ketat untuk mengurangi kesalahan pada saat runtime dan memastikan bahwa kode Kamu bekerja dengan baik.

Memanfaatkan fitur TypeScript untuk meningkatkan produktivitas pengembangan

Manfaatkan fitur-fitur TypeScript seperti autocompletion, refactoring, dan pemantauan tipe data untuk meningkatkan produktivitas pengembangan.

10. Kesimpulan

Manfaat dari penggunaan TypeScript dalam pengembangan aplikasi React

Menggunakan TypeScript dalam pengembangan aplikasi React memberikan manfaat seperti keKamulan kode yang lebih tinggi, penemuan kesalahan yang lebih mudah, dan produktivitas yang lebih baik.

Meningkatkan kualitas dan keKamulan kode dengan TypeScript

Dengan TypeScript, Kamu dapat meningkatkan kualitas dan keKamulan kode dalam aplikasi React Kamu, sehingga aplikasi Kamu lebih aman dan mudah dikelola.