การประกาศ ตัวแปร

การ Import

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

  import { Role } from '@/constants';
   
  /// หรือ ถ้ามี type ด้วย
  import { type RoleVariable, Role } from '@/constants';

ตัวแปรทั่วไป

• +MUST ใช้ const ถ้าไม่ต้องมีการเปลี่ยนแปลงค่า
• +MUST ใช้ let ถ้าต้องมีการเปลี่ยนแปลงค่า
• -MUST ห้ามใช้ var เหตุผล
• +MUST ระบุ type ตามความเหมาะสม
• -SHOULD ใช้ any เมื่อจำเป็นเท่านั้น ไม่ใช้เลยดีที่สุด

✔️ ทำ

const list: Array<string> = [];
const obj: Record<string, any> = {};
let counter = 0;

❌ ไม่ทำ

var list1 = [];
const list2 = [];
 
var obj = {};
 
var counter1: number = 0;
let counter2: number = 0;

ตัวแปรที่เป็น React State

• +MUST ใช้ const เท่านั้น
• +MUST ระบุ type ตามความเหมาะสม
• -SHOULD ใช้ any เมื่อจำเป็นเท่านั้น ไม่ใช้เลยดีที่สุด

✔️ ทำ

const [ counter, setCounter ] = useState(0);
const [ listData, setListData ] = useState<Array<number>>([]);

❌ ไม่ทำ

const counter = useState(0);
let [ counter, setCounter ] = useState<number>(0);
var [ counter, setCounter ] = useState<number>(0);
let [ counter, setCounter ] = useState(0);
var [ counter, setCounter ] = useState(0);
 
let [ listData, setListData ] = useState([]);
var [ listData, setListData ] = useState([]);
const [ listData, setListData ] = useState([]);

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

• ตัวแปรที่เป็น Array

  ✔️ ทำ

  const products: Array<Product> = [ ... ];
  const productList: Array<Product> = [ ... ];
  const productDetails: Array<ProductDetail> = [ ... ];
  const productDetailList: Array<ProductDetail> = [ ... ];

  ❌ ไม่ทำ

  const data: Array<Product> = [ ... ];
  const datasource: Array<Product> = [ ... ];
  const list: Array<Product> = [ ... ];
  const detailData: Array<ProductDetail> = [ ... ];
  const detailDatasource: Array<ProductDetail> = [ ... ];

• ตัวแปรที่เป็น Date

  ✔️ ทำ

  const startDate: Date = new Date();
  const endDate: Date = new Date();
  const startDateString = '1990-01-31';
  const endDateString = '2000-12-31';
  const startDateFormattedString = dayjs.format('DD/MM/YYYY');
  const endDateIsoString = endDate.toISOString();

  ❌ ไม่ทำ

  const start: Date = new Date();
  const end: Date = new Date();
  const startDate = '1990-01-31';
  const endDate = '2000-12-31';
  const dateFormat = dayjs.format('DD/MM/YYYY');
  const endDateIso = endDate.toISOString();

• ตัวแปรที่เป็น Boolean (ให้ความสำคัญกับคำเชิง positive ก่อน แล้วค่อยเป็น negative)

  ✔️ ทำ

  const isExist = false;
  const isOpen = false;
  const isShow = false;
  const isClose = false;
  const isHidden = false;
   
  const isManager = role.name === 'MANAGER';
  const hasManagerRole = role.includes('MANAGER');
   
  const isPermit = role.name === 'ADMIN';
  const hasPermission = [ ... ].includes(role.name);

  ❌ ไม่ทำ

  const exist = false;
  const open = false;
  const show = false;
  const close = false;
  const hidden = false;
   
  const checkRoleName = role.name === 'MANAGER';
  const findManagerRole = role.includes('MANAGER');
   
  const checkPermit = role.name === 'ADMIN';
  const searchPermission = [ ... ].includes(role.name);