Typechecking package với React PropTypes

CLASSFUNC BLOG

We Share Our Knowledge

9 Th03 2021 16:46

Kể từ phiên bản React v15.5 trở về trước, React.PropTypes đã được chuyển sang phiên bản gói riêng biệt prop-types, là gói package trợ giúp người dùng kiểm tra các props của component hay ngay cả trong package mà chúng ta đang xây dựng, tạo cho người dùng sự tiện dụng khi sử dụng component/package của mình.

Để cài đặt:

npm install --save prop-types

yarn add prop-types

Ví dụ về Typechecking props.

Hôm trước khi xây dựng package cho riêng mình, tôi đã gặp phải vấn đề rằng, khi dev và chạy test ở local các props của tôi vẫn typechecking bình thường, nhưng khi publish lên trên npm, sau khi install về sử dụng, tôi đã không thể nào gõ các props của package được, sau khi nhớ đến prop-types tôi đã khắc phục được điều này và chia sẻ cho các bạn nếu có gặp phải sau này.

Để sử dụng , ta sẽ khai báo component với các kiểu props truyền vào bao gồm tên và kiểu của props.

import React from "react";
import PropTypes from "prop-types";

function TestComponent({ name, age, onClick }) {
  return (
    <div onClick={() => {
      if (onClick)
        onClick();
    }}
		>
			Hello, {name} {age} years old
		</div>
  );
}

TestComponent.propTypes = {
  name: PropTypes.string,
  age: PropTypes.number,
  onClick: PropTypes.func
};

TestComponent.defaultProps = {
  name: "Duong",
  age: 18,
  onClick: null
};

export default TestComponent;

Ví dụ trên sẽ khởi tạo 3 props truyền vào là name kiểu 'string', age kiểu 'number', và onClick là một callback function, ngoài ra sẽ khởi tạo giá trị mặc định của name, age. vì có giá trị mặc định nên khi run TestComponent lần đầu tiên sẽ hiển thị ra màn hình "Hello, Duong 18 years old".

Sau khi thực hiện như trên thì việc Typechecking props của bạn đã hoàn thành, các bạn có thể ứng dụng ngay vào package của mình nhé :D!

Đọc thêm Tạo NPM Package React đầu tiên với [create-react-library]

Tài liệu tham khảo: