TypeScript ແມ່ນຫຍັງ?

Saleumsack KEOBOUALAY
LaoITDev
Published in
3 min readOct 23, 2017

ຫາກເວົ້າເລື່ອງພາສາໃນການພັດທະນາ web application ທີ່ມາແຮງ ໃນຕອນນີ້ ຄົງໜີບໍ່ພົ້ນພາສາ JavaScript. ຖ້າທຽບໃສ່ກັບ ເຄັກ ກ້ອນໜື່ງ JavaScript ກໍເປັນສ່ວນປະສົມໜື່ງຂອງເຄັກກ້ອນນັ້ນ ໝາຍຄວາມວ່າເປັນພາສາທີ່ Browser ເຂົ້າໃຈ ສາມາດອ່ານ script ຂອງ JavaScript ນີ້ໄດ້ :)

ເວັບໄຊ້ໜື່ງ === ເຄັກກ້ອນໜື່ງ

ແຕ່ດ້ວຍຄວາມທີ່ພາສາ JavaScript ມີການໃຊ້ມາດຕະຖານ ECMAScript* ທີ່ມີການປ່ຽນແປງເລື້ອຍໆ ແລະ ມີຄວາມຫຼາກຫຼາຍ ບໍ່ວ່າຈະເປັນ ES5, ES6, etc. (ps. ES5 ກັບ ES6 ຂຽນບໍ່ຄືກັນ 555) ເຮັດໃຫ້ການສຶກສາ ຫຼື ການນຳໃຊ້ໂດຍສະເພາະແມ່ນນັກພັດທະນາມືໃໝ່ທີ່ຢາກສຶກສາ ຫຼື ຮຽນຕາມແມ່ນບໍ່ທັນ ແລະ ມີຄວາມສັບສົນວ່າຈະເລີ່ມຈາກໂຕໃດໄປ. ລ້າສຸດ, ມາດຕະຖານ ECMAscript ແມ່ນຮອດເວີຊັ່ນ 8th edition ຫຼື ທີ່ຮູ້ກັນໃນຊື່ຂອງ ECMAScript 2017

  • ECMA ໃນຊື່ເຕັມ European Computer Manufacturers Association ເປັນອົງກອນທີ່ບໍ່ສະແຫວງຫາຜົນກຳໄລ. ອົງກອນນີ້ໜ້າທີຫຼັກແມ່ນ ເປັນຜູ່ຄວບຄຸມ, ວາງມາດຕະຖານດ້ານການຈັດການຂໍ້ມູນ ເຕັກໂນໂລຊີການສື່ສານ ແລະ ການໃຊ້ງານເອເລັກໂຕນິກ
  • ECMAScript* ຫຼື ES(ໂຕຫຍໍ້) ເປັນມາດຕະຖານໜື່ງທີ່ ອົງກອນ ECMA ກຳນົດອອກໄວ້ສຳລັບພາສາຕ່າງໆດັ່ງເຊັ່ນ: JScript, ActionScript ແລະ JavaScript. ວ່າພາສາໂປແກມດັ່ງກ່າວໃຫ້ມີຄວາມສາມາດຫຍັງແນ່?
https://www.javascript.com/

TypeScript

TypeScript ເປັນພາສາຄອມພີວເຕີ້ ທີຖືກພັດທະນາໂດຍ ບໍລິສັດ microsoft. ການເຮັດວຽກໂດຍຫຍໍ້, ໂຄ໊ດທີຖືກພັດທະນາໂດຍພາສາ TypeScript ນັ້ນຈະຖືກ compile ໃຫ້ເປັນພາສາ JavaScript ກ່ອນຈິງຈະສາມາດເອົາໄປໃຊ້ງານຈິງໄດ້.

ເວົ້າງ່າຍໆ ມັນຄື JavaScript ທີ່ມີການປັບປຸງມາ, ເຮັດໃຫ້ເຮົາສາມາດ ພັດທະນາ Web Application ດ້ວຍພາສາ TypeScript ແລ້ວ compile ເປັນ JavaScript ໃນ version ໃດກໍໄດ້ ເຊັ່ນ: ພັດທະນາແລ້ວ ໃຫ້ compile ອອກເປັນ JavaScript ຕາມມາດຕະຖານ ES5 ຫຼື ES6 ຫຼື ES ອື່ນໆໄດ້

ເຮັດໃຫ້ຫຼຸດເວລາໃນການພັດທະນາ ສົມມຸດວ່າມີມາດຕະຖານ ES(ໃໝ່) ອອກມາກໍນຳເອົາໂຄ໊ດທີພັດທະນາໂດຍພາສາ TypeScript ໄປ compile ໃຊ້ງານຕໍ່ໄດ້ເລີຍ

TypeScript ຖືເປັນ superset ຂອງ javascript ອີກເທື່ອໜື່ງ. ໝາຍຄວາມວ່າໂຄ໊ດທີມາຈາກພາສາ typescript ແມ່ນສາມາດ compile ໄດ້ກັບພາສາ javascript ໄດ້ທຸກ ES. ແຕ່ຈະຂຽນ ຈາກ ES ກັບໄປ compile ເປັນ typescript ແມ່ນບໍ່ສາມາດເຮັດໄດ້

ໃນວົງຂອງ JavaScript ຈະຮວມມາດຕະຖານ ECMAScript(ES) ໄວ້

ຕິດຕັ້ງ

ຫຼັງຈາກໄດ້ຮຽນຮູ້ກັນໄປເບື້ອງຕົ້ນກ່ຽວກັບພາສາ TypeScript ໄປແລ້ວ ເຮົາມາຕິດຕັ້ງກັນ :)

Coding time~~~~~~~

ໃນສ່ວນຕໍ່ໄປນີ້ຈະເປັນການລົງເຄື່ອງມືພັດທະນາແບບພຽວໆ 555 ຖ້າໃຜໃຊ້ IDE ຢ່າງ WebStorm ກໍບໍ່ຈຳເປັນເພາະເຂົາ Add ເຂົ້າໃຫ້ແລ້ວ, ຖ້າເປັນ Editor ຢ່າງ Visual Studio Code ອາດຕ້ອງໄດ້ລົງ Extension ເສີມໂດຍການ add extension ແລ້ວຄົ້ນຫາຄຳວ່າ “typescript” ->ຕິດຕັ້ງ->restart vscode. ເພື່ອຊ່ວຍໃນການພັດທະນາ :)

ມາເລີ່ມກັນ!!!!

ເຮົາຈະໃຊ້ເຄື່ອງມືໃນ node.js ຢ່າງ npm ເປັນໂຕຕິດຕັ້ງ typescript

  • ເຂົ້າໄປ terminal ໃຊ້ຄຳສັ່ງລຸ່ມນີ້
// Check node
node -v
// Check npm
npm -v
ຜົນລັບ, ຖ້າບໍ່ເຫັນແມ່ນໃຫ້ທຳການຕິດຕັ້ງກ່ອນ :D
  • ທຳການ install typescript
npm install -g typescript 
  • ຫຼັງຈາກທຳການ install ແລ້ວໆ ກວດເບິ່ງໂດຍຄຳສັ່ງນີ້
tsc -v
ມາແລ້ວວວວ ^0^
  • ຈົບພິທີ

ເລີ່ມຂຽນກັນ

ພາສາ TypeScript ນັ້ນຈະໃຊ້ນາມສະກຸນຟາຍເປັນ (.ts)

  • ໃຫ້ທຳການສ້າງໂຟເດີໂປເຈັກກັນກ່ອນ ເອົາເປັນຊື່ tsc-awesome
mkdir tsc-awesome
  • ເຂົ້າໄປໃນໂຟເດີ tsc-awesome ເພື່ອທຳການສ້າງຟາຍ typescript ທີ່ຊື່ວ່າ hello.ts
cd tsc-awesome
vim hello.ts
ກົດ esc ແລ້ວ :wq
hello.ts ມາແລ້ວ~~~~~~~
  • ເປີດຟາຍ hello.ts ຜ່ານ vscode. ຖ້າໃຊ້ຄຳສັ່ງ code ບໍ່ໄດ້ແມ່ນໃຫ້ໄປ download extension ເສີມທີຊື່ວ່າ code ຈະມີລາຍລະອຽດບອກປະມານວ່າເປີດດ້ວຍຄຳສັ່ງ code
code .
  • ຕອນນີ້ເຮົາມີຟາຍ hello.ts ເປົ່າໆມາ ໜື່ງຟາຍ
  • ຂຽນ function ໃໝ່ຂຶ້ນມາຊື່ວ່າ greeter ໃນຟາຍ hello.ts
  • ສ້າງຟາຍ index.html ໃນໂຟເດີ tsc-awesome ມາເພື່ອໃຫ້ browser ອ່ານ
ຂຽນໂຄ່ງສ້າງ HTML ທຳມະດາຕາມໃຈ
  • ຈະ run ຟາຍ typescript ເຮົາໄດ້ຕ້ອງທຳການ compile ເປັນ javascript ກ່ອນ. ດັ່ງທີ່ເວົ້າໄປກ່ອນໜ້ານີ້ວ່າ browser ບໍ່ສາມາດອ່ານຟາຍ typescript ໄດ້
tsc hello.ts
ຈະໄດ້ຟາຍໃໝ່ທີຊື່ວ່າ hello.js
  • ຕອນນີ້ໃນໂປເຈັກ tsc-awesome ເຮົາມີຢູ່ສາມຟາຍໄດ້ແກ່: index.html, hello.ts, hello.js
  • ກັບໄປທີ ຟາຍ index.html ເພື່ອເພີ່ມ tag script
ລະບຸ src=hello.js
  • ທົດສອບໂດຍການ ເປີດຟາຍ index.html
ພາມ!!!!!!!!!

ດຽວມາຕໍ່

ສະຫຼຸບ

ເຮົາໄດ້ຮູ້ຈັກກ່ຽວກັບພາສາໃໝ່ຢ່າງ typescript, ການຕິດຕັ້ງ, ຊຸດເຄື່ອງມືຕ່າງໆ

ຊື່ງຈຸດດີທີຜູ່ຂຽນເຫັນເດັ່ນໆ ກໍຄືໂຄ່ງສ້າງການຂຽນ typescript ນັ້ນຈະຄ້າຍຄືກັນກັບການຂຽນແບບ Object Oriented Programming(OOP) ຊື່ງຖ້າໃຜທີມາຈາກການຂຽນພາສາ Java ມາກ່ອນ learning curve ກໍຈະບໍ່ສູງຫຼາຍເທົ່າກັບຜູ່ທີ່ບໍ່ທັນມີປະສົບການ

ປລ. ບົດຄວາມນີ້ຈະມາອັບເດດຕື່ມ ອິອິອິ

ຖ້າບົດຄວາມນີ້ເປັນປະໂຫຍດ ສາມາດສົ່ງເສີມຜູ່ຂຽນດ້ວຍການ Share ຫຼື ກົດປຸ່ມ Clap ຄ້າງໄວ້ໄດ້ ເພື່ອເປັນກຳລັງໃຈກັນ :)

--

--