การประกาศ ฟังก์ชัน

การ Import

• +MUST ใช้การย่อ path เสมอ เพื่อลดความยากในการอ่าน
• +MUST ถ้าใช้การ auto import กรุณาตรวจสอบความถูกต้องทุกครั้ง

  import { formatNumeric } from '@/functions';
   
  /// หรือ ถ้ามี type ด้วย
  import { type FormatNumericFunc, formatNumeric } from '@/functions';

รูปแบบการประกาศ

• +MUST ใช้ arrow function และ กำหนด parameter ในรูปแบบ object เสมอ เพื่อให้โค้ดไปในทิศทางเดียวกัน และง่ายต่อการเรียกใช้งาน

• +SHOULD ใส่ return type เมื่อจำเป็น (ใส่ตลอดได้ยิ่งดี)

  ✔️ ทำ

  const sampleFunc = () => { ... }
   
  const sampleFunc = ({ firstParam, secondParam, ... }: SampleFuncParams) => {
    ...
    return '';
  }
   
  const sampleFunc = ({ firstParam, secondParam, ... }: SampleFuncParams): string => {
    ...
    return '';
  }

  ❌ ไม่ทำ

  function sampleFunc() { ... }
   
  function sampleFunc(firstParam: string, secondParam: string) {
    ...
    return '';
  }
   
  const sampleFunc = (firstParam: string, secondParam: string): string => {
    ...
    return '';
  }

ตัวอย่างการประกาศและใช้งาน

• ประกาศ

  const formatNumeric = ({ value, minFractionDigit = 0, maxFractionDigit = 0 }: FormatNumericInput): string => {
    ...
  }

• กำหนด Type

  interface FormatNumericInput {
    value?: number | null;
    minFractionDigit?: number;
    maxFractionDigit?: number;
  }

• ใช้งาน

  const formatted = formatNumeric({ value: 1234.56, minFractionDigit: 2, maxFractionDigit: 4 });

เกณฑ์การตั้งชื่อ

• ฟังก์ชันที่เรียกจาก action ของ user

  ✔️ ทำ

  const onClickExport: () => void = () => { ... }
  const onChangeCitizenId: () => void = () => { ... }
  const onSelectBatchGroup: () => void = () => { ... }
   
  /** เฉพาะกับ Form */
  const onSubmit: () => void = () => { ... } // การ submit ปกติมีเพียงแค่ form จึงไม่ต้องเขียนยาว ยกเว้นมีมากกว่า 1 form
  const onFinishForm: () => void = () => { ... } // หากเพียงแค่ "onFinish" อาจไม่เข้าใจว่า finish อะไร

  ❌ ไม่ทำ

  const handleExport: () => void = () => { ... }
  const handleCitizenId: () => void = () => { ... }
  const handleBatchGroup: () => void = () => { ... }
   
  const onSave: () => void = () => { ... } // save อะไร แล้วมาจาก action ใด
  const onFinish: () => void = () => { ... } // finish อะไร แล้วมาจาก action ใด

• ฟังก์ชันที่เรียกโดยการทำงานภายใน (เป็นการแยกส่วนของโค้ด)

  ✔️ ทำ

  const getItemById: () => ItemData = () => {
    ...
    return ...
  }
   
  const createItem: () => Promise<void> = async () => {
    ...
    return ...
  }
   
  const resolvePermission: (role: Role) => PermitInfo = () => {
    ...
    return ({ canCreate: false, canRead: true, canUpdate: false, canDelete: false });
  }

  ❌ ไม่ทำ

  const callGetItemById: () => ItemData = () => {
    ...
    return ...
  }
   
  const processCreateItem: () => Promise<void> = async () => {
    ...
    return ...
  }
   
  // check ให้ความรู้สึกเหมือนจะได้ boolean มากกว่า แต่ก้ไม่ควรใช้ check อยู่ดี
  const checkPermission: () => PermitInfo = () => {
    ...
    return ({ canCreate: false, canRead: true, canUpdate: false, canDelete: false });
  }