Trong bài viết này mình sẽ chia sẻ cách sử dụng type vào các hook trong xây dựng ứng dụng react-typescript

I. Sử dụng type với useState

useState chắc chắn là hook được gần như hàng ngày đối với mỗi react dev,useState cho phép chúng ta khởi tạo và quản lý state bên trong function component tương tự như this.state trong class component, sau đây là ví dụ đơn giản sử dụng useState để khai báo một state với typescript

import React from 'react'

const App: React.FC = () => {
    const [inputValue, setInputValue] = React.useState<string>('')

    return (
        <div className="main">
            <input
                placeholder="type something..."
                value={inputValue}
                onChange={(e) => setInputValue(e.target.value)}
             />
        </div>
    );
}

Để chỉ định type cho state được tạo ra bởi useState, ta chỉ định type với cú pháp useState(defaultValue). Lưu ý là chúng ta hoàn toàn có thể chỉ định type hỗn hợp đối với state: useState<string | null>(null).

#typescript #react #javascript #developer