React TypeScript

Berikut adalah metode untuk mendefiniskan types pada react component:

import React from "react";
 
interface UserProfileProps {
  name: string;
}
 
const UserProfile: React.FC<UserProfileProps> = ({ name }) => {
  return <h1>{name}</h1>;
};

Pada contoh diatas component UserProfile memiliki tipe data UserProfileProps yang memiliki satu properti name yang bertipe data string.

Ada beberapa react types yang sering digunakan

ReactNode

React Node adalah tipe data yang berisi semua tipe data yang ada di React. ReactNode paling umum digunakan pada properti children.

import React, { ReactNode } from "react";
 
interface MyComponentProps {
  children: ReactNode;
}
 
const MyComponent: React.FC<MyComponentProps> = ({ children }) => {
  return <div>{children}</div>;
};

ReactElement

MouseEvent

ChangeEvent

FormEvent

KeyboardEvent