ເປັນຫຍັງຕ້ອງ TypeScript…[ep.1]

phatsss
VtCamp
Published in
3 min readOct 21, 2018

ໃນປະຈຸບັນເຮົາບໍ່ອາດປະຕິເສດຄວາມ powerful ຂອງ JavaScript ໄດ້ເລີຍ, ນອກຈາກຈະເປັນພາສາທີ່ຢືດຢຸ່ນໃນດ້ານການໃຊ້ງານແລ້ວ ໃນດ້ານປະສິດທິພາບກໍ່ເຮັດໃຫ້ນັກພັດທະນາຫຼາຍຄົນກໍ່ບໍ່ອາດເບິ່ງຂ້າມໄດ້ເຊັ່ນກັນ,ນອກຈາກນີ້ກໍ່ຍັງມີ TypeScript ທີ່ຄວນຄ່າແກ່ການສຶກສາເປັນຢ່າງຍິ່ງ ເນື່ອງຈາກມັນກໍ່ເປັນ JavaScript ເຊັ່ນກັນ(ລາຍລະອຽດໃນບົດຄວາມ),ເຊິ່ງກໍ່ຈະມີ framework ທີ່ຮອງຮັບ TypeScript(ບໍ່ແນ່ໃຈວ່າມີໂຕໃດແນ່) ແຕ່ທີ່ແນ່ໆກໍ່ແມ່ນ Angular ທີ່ຮອງຮັບ TypeScript ຕັ້ງແຕ່ໃດມາ(ໄດ້ຍິນວ່າ vue ກໍ່ຈະອອກເວີຊັນໃໝ່ໃຫ້ຮອງຮັບ TypeScript ນຳວ່າຊັ້ນ).

ບາງຄົນອາດຈະເວົ້າວ່າ: ບໍ່ຢາກຂຽນ Angular ເພາະບໍ່ຢາກຮຽນ TypeScript ໃຫ້ຫຍຸ້ງຍາກແຕ່ຖ້າເຮົາລອງເປີດໃຈ TypeScript ມັນກໍ່ບໍ່ໄດ້ຍາກເກີນໄປທີ່ຈະເລີ່ມຕົ້ນສຶກສາ, ດັ່ງນັ້ນ ເຮົາລອງໄປເບິ່ງກັນເລີຍວ່າຕົວຕົນຂອງ TypeScript ນັ້ນເປັນຈັ່ງໃດ.

  • TypeScript ແມ່ນຫຍັງ?

TypeScript ຄືການກຳນົດ type ໃຫ້ກັນ variables ຕ່າງໆທີ່ເຮົາປະກາດ, ເຊິ່ງມັນກໍ່ຈະມີຄວາມສາມາດຂອງJavaScript ES5 ແລະ ES6 ທີ່ມີຢູ່ແລ້ວ ແລະ ຄວາມສາມາດທີ່ເພີ່ມເຂົ້າມາອີກກໍ່ຄື: Enum, Interface, Generic ແລະ ການຂຽນໃນຮູບແບບຂອງ OOP.

ຖ້າຈະເວົ້າໃຫ້ເຂົ້າໃຈກັນງ່າຍໆ TypeScript ກໍ່ຄື JavaScript ດີໆນີ້ເອງ ເຊິ່ງມັນຈະເປັນ superset ຂອງ JavaScript , ເຊິ່ງຫຼັງຈາກທີ່ເຮົາຂຽນ TypeScript ແລ້ວມັນກໍ່ຈະທຳການແປງໄຟລ໌ດັ່ງກ່າວກັບໄປເປັນຮູບແບບຂອງ JavaScript, ສ່ວນສາເຫດທີ່ມີການແປງໄຟລ໌ກໍ່ຄື Browser ຈະບໍ່ຮູ້ຈັກໄຟລ໌ .ts(ນາມສະກຸນຂອງTypeScript) ນັ້ນເອງ.

ທີ່ມາ: https://medium.com/@basarat/typescript-won-a4e0dfde4b08
  • ປະໂຫຍດຂອງການຂຽນ TypeScript
  • TypeScript ເປັນ superset ຂອງ ES6 ນັ້ນໝາຍຄວາມວ່າ: ເຮົາສາມາດນຳໃຊ້ຄວາມສາມາດທີ່ມີຢູ່ໃນ ES6 ໄດ້ທັງໝົດ.
  • ການກຳນົດປະເພດໃຫ້ກັບຕົວປ່ຽນໄດ້ເຮັດໃຫ້ເຮົາຫຼຸດຄວາມຜິດພາດໃນການປ້ອນຂໍ້ມູນຜິດຊະນິດ.
  • ເນື່ອງຈາກເຮົາສາມາດຂຽນແບບ OOP ໄດ້ຈຶ່ງເຮັດງ່າຍເວລາຕາມ code.

ຂຽນ ​TypeScript ເບື້ອງຕົ້ນ

ກ່ອນອື່ນເຮົາຕ້ອງຕິດຕັ້ງ TypeScript ດ້ວຍ npm ກັນກ່ອນ.

npm install -g typescript//ຈາກນັ້ນກໍ່ກວດສອບເວີຊັ້ນຂອງ TypeScript ດ້ວຍຄຳສັ່ງtsc -v
//ຖ້າສະແດງເລກ version ຂຶ້ນມາກໍ່ຖືວ່າໃຊ້ໄດ້

ຄຳສັ່ງພື້ນຖານຂອງ TypeScript.

// compile ແບບໄຟລ໌ດຽວ
tsc demo.ts

// compile ແບບຫຼາຍໄຟລ໌ພ້ອມກັນ
tsc demo11.ts, demo2.ts, demo3.ts

// compile ຫຼາຍໄຟລ໌ ແລະ ລວມເປັນໄຟລ໌ດຽວ
tsc demo1.ts demo2.ts --out demo.js

// compile ແບບ auto ເມື່ອມີການແກ້ໄຂໄຟລ໌
tsc demo.ts --watch
  • variables type

ຊະນິດຂອງຕົວປ່ຽນໃນ TypeScript ພື້ນຖານກໍ່ຈະມີ string, number, Boolean ເປັນຕົ້ນ.

demo.ts

ເຮົາສາມາດໃຊ້ຄຳສັ່ງ tsc demo.ts ເພື່ອສັ່ງ compile code ດັ່ງກ່າວໄປເປັນ JavaScript, ໂດຍໃຊ້ terminal (ຫຼືຈະເປັນ cmd ກໍ່ໄດ້)ເຂົ້າໄປໃນ path ທີ່ເຮົາ save ໄຟລ໌ TypeScript ແລ້ວພິມຄຳສັ່ງດ້ານເທິງ, ພຽງເທົ່ານີ້ເຮົາກໍ່ຈະໄດ້ JavaScript ມາແລ້ວ.

demo.js
  • ໝາຍເຫດ: ປະເພດຂໍ້ມູນທີ່ທ່ານກຳນົດໄວ້ແລ້ວໃນ TypeScript ທ່ານຈະບໍ່ສາມາດປ່ຽນແປງໄດ້, ແຕ່ເຖິງຢ່າງໃດກໍ່ດີ ມັນກໍ່ຍັງສາມາດແປງເປັນ JavaScript ໃຫ້ຢູ່ດີ.
error ທີ່ເກີດຈາກ ໃສ່ຂໍ້ມູນຜິດຊະນິດ
  • Array

ການປະກາດ Array ໃນ TypeScript ມີ 2 ແບບຄື: ແບບໃສ່[]ຕາມຫຼັງຊະນິດຂໍ້ມູນ ແລະ ແບບທີ່ໃຊ້ Array<ຊະນິດຂໍ້ມູນ>.

ຈະເຫັນໄດ້ວ່າທຸກໆຂໍ້ມູນທີ່ເຮົາໃສ່ລົງໄປລ້ວນແລ້ວແຕ່ເປັນຂໍ້ມູນຊະນິດດຽວກັນທັງນັ້ນ.

  • Tuple

ເປັນການລະບຸຊະນິດຂໍ້ມູນຕ່າງກັນທີ່ເຮົາຕ້ອງການໃນ Array.

  • Any

ເປັນຊະນິດຂໍ້ມູນທີ່ເກັບໄດ້ທຸກຄ່າ(ມັນເກັບທຸກຄ່າອີ່ຫຼີໃດ໋) ບໍ່ວ່າຈະເປັນຂໍ້ຄວາມ, ຕົວເລກ ຫຼື Boolean ກໍ່ຍັງໄດ້ ເຮົາມາລອງປະກາດ Array ທີ່ມີຊະນິດຂໍ້ມູນທີ່ເປັນ Any ເບິ່ງວ່າຈະເປັນແນວໃດ.

ຈະເຫັນໄດ້ວ່າ: ເຖິງເຮົາຈະປ້ອນຄ່າໃດໆກໍ່ຕາມ any ກໍ່ຍັງຮັບສະເໝີ, ການນຳໃຊ້ any ແມ່ນມີປະໂຫຍດຫຼາຍໃນການຣັນໂປຣເຈັກທີ່ເຮົາບໍ່ແນ່ໃຈວ່າເປັນຂໍ້ມູນຊະນິດໃດ ເຊິ່ງໃນນັ້ນອາດຈະເປັນໂປຣເຈັກທີ່ເຮົາພັດທະນາຕໍ່ຈາກຄົນອື່ນບໍ່ ເຊິ່ງເຮົາໃຊ້ any ເພື່ອໃຫ້ໂປຣເຈັກມັນເຮັດວຽກໄດ້.

  • Enum

ສົມມຸດ: ເຮົາມີສິນຄ່າ 3 ຂະໜາດ ເຊິ່ງເຮົາຕ້ອງການແທນຄ່າໃຫ້ກັບຂະໜາດຂອງສິນຄ້າແຕ່ລະຂະໜາດເຊິ່ງຈະມີ: ຂະໜາດນ້ອຍແມ່ນ1,ຂະໜາດກາງແມ່ນ 2 ແລະ ຂະໜາດໃຫຍ່ແມ່ນ 3, ໃນການແກ້ໄດ້ບັນຫານີ້ Enum ຈຶ່ງເປັນຄຳຕອບ.

ເມື່ອ compile code ໄປເປັນ JavaScript.

  • Void

void ສາມາດເກັບຄ່າທີ່ເປັນ null ຫຼື undefined ກໍ່ໄດ້,ແຕ່ສ່ວນຫຼາຍຈະໃຊ້ເພື່ອຄວບຄຸມວ່າ function ນັ້ນຈະບໍ່ມີການ return ຄ່າໃດໆອອກມາ.

  • Type assertions

ເປັນການບອກຊະນິດຂໍ້ມູນໃຫ້ແກ່ TypeScript ໃນຕອນທີ່ເຮົາເອີ້ນໃຊ້ເຊັ່ນ: ບາງຕົວປ່ຽນທີ່ເຮົາປະກາດໄວ້ເປັນ any ແຕ່ເມື່ອເຮົາກຳລັງຈະໃຊ້ຕົວປ່ຽນດັ່ງກ່າວ ເຮົາຕ້ອງການບອກວ່າ: ມັນເປັນຕົວປ່ຽນປະເພດ string ດັ່ງນີ້ເປັນຕົ້ນ.

ສະຫຼຸບ

ສຳຫຼັບ TypeScript ນີ້ກໍ່ຖືວ່າຄຸ້ມຄ່າແກ່ການສຶກສາຢູ່ພໍໂຕກັນເລີຍແຫຼະ, ເນື່ອງຈາກມັນເປັນ superset ຂອງ JavaScript ແນ່, ຖ້າທ່ານກຳລັງສຶກສາ JavaScript ຢູ່ແລ້ວ ຖືໂອກາດອັບເກຣດຄວາມຮູ້ໄປອີກຂັ້ນເລີຍຖືວ່າຄຸ້ມຄ່າ ຫຼື ທ່ານອາດຈະມາຈາກສາຍ Object ຢ່າງ OOP ກໍ່ຍິ່ງເປັນການດີໃນການເລີ່ມຕົ້ນສຶກສາ TypeScript.

--

--