React: Khai báo Function component Typescript - Day 2.1

Để khai báo một function component kết hợp TypeScript trong React, bạn tạo file App.tsx, và thêm React.FC sau tên component. 

FC là viết tắt cho Function Component, khi thêm : React.FC thì sẽ hiểu type của App chính là một Function Component của React

Tạo file Greeting.tsx trong folder components:

import React from 'react';

interface GreetingProps {
  name: string;
}

const Greeting: React.FC<GreetingProps> = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};

export default Greeting;

Ví dụ Button component

interface ButtonProps {
  onClick: () => void;
  text: string;
}

const Button: React.FC<ButtonProps> = ({ onClick, text }) => {
  return <button onClick={onClick}>{text}</button>;
};

Giải thích

• React.FC là viết tắt của Function Component của React
• ButtonProps là kiểu của các props được truyền vào component.
• React.FC<ButtonProps> = ({ onClick, text }): sử dụng cú pháp destructing để gán giá trị vào onClick() và text