React Typescript
Di dalam React terdapat beberapa types yang paling sering digunakan, yaitu:
ReactNode
ReactNode adalah tipe data yang bisa berisi semua tipe data yang ada di React, seperti ReactElement, string, number, boolean, null, undefined, dan array.
import { ReactNode } from "react";
interface Props {
children: ReactNode;
}
const Button = ({ children }: Props) => {
return <button>{children}</button>;
};
export default Button;ReactElement
ReactElement adalah tipe data yang bisa berisi semua tipe data yang ada di React, seperti string, number, boolean, null, undefined, dan array.
import { ReactElement } from "react";
interface Props {
children: ReactElement;
}
const Button = ({ children }: Props) => {
return <button>{children}</button>;
};
export default Button;MouseEvent
MouseEvent adalah tipe data yang digunakan untuk menangkap event dari mouse.
import { MouseEvent } from "react";
interface Props {
onClick: (event: MouseEvent<HTMLButtonElement>) => void;
}
const Button = ({ onClick }: Props) => {
return <button onClick={onClick}>Click Me</button>;
};
export default Button;ChangeEvent
ChangeEvent adalah tipe data yang digunakan untuk menangkap event dari perubahan pada input.
import { ChangeEvent } from "react";
interface Props {
onChange: (event: ChangeEvent<HTMLInputElement>) => void;
}
const Input = ({ onChange }: Props) => {
return <input onChange={onChange} />;
};
export default Input;FormEvent
FormEvent adalah tipe data yang digunakan untuk menangkap event dari submit form.
import { FormEvent } from "react";
interface Props {
onSubmit: (event: FormEvent<HTMLFormElement>) => void;
}
const Form = ({ onSubmit }: Props) => {
return <form onSubmit={onSubmit} />;
};
export default Form;KeyboardEvent
KeyboardEvent adalah tipe data yang digunakan untuk menangkap event dari keyboard.
import { KeyboardEvent } from "react";
interface Props {
onKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;
}
const Input = ({ onKeyDown }: Props) => {
return <input onKeyDown={onKeyDown} />;
};
export default Input;