5 - Variable & Data Types

ประเภทข้อมูล และ การประกาศตัวแปรของ TypeScript มันเป็นยังไง ไหนเล่าให้ฟังหน่อย ?

ถ้าบอกว่าบทไหนสำคัญที่สุด คงไม่พ้นบทนี้แน่ ๆ เพราะ ถ้าหากใครเขียนมาก่อนซักภาษาแล้ว และ เข้าใจว่าใน TypeScript มันมี Data Types แบบไหนให้ใช้ และ ประกาศตัวแปรยังไง ก็แทบจะเอาไปเขียนต่อเองได้เลย เอาเป็นว่าไม่สาธยายให้มากความ ไปดูกันเลยฮะ !

ว่าด้วยเรื่อง Data Types กันก่อน

เพราะก่อนประกาศตัวแปรเพื่อชี้เป้าไปที่ข้อมูล เราต้องรู้จักกับประเภทของข้อมูลใน TypeScript ให้เข้าใจตรงกันเสียก่อนจริงไหมครับ ? ในส่วนของ TypeScript นั้น มี 3 อย่างที่เราจะต้องรู้เกี่ยวกับประเภทหลักของประเภทข้อมูลดังนี้

• ประเภท Any เจ้าตัวนี้คือประเภทที่ใหญ่ที่สุด เรียกว่าเป็น Super Type สำหรับ Data Type ทุกตัว

• ประเภท Built-in Types เป็นประเภทที่ติดมาให้กับตัวภาษาอยู่แล้ว เช่น number, string, void, boolean และก็พวก undefined

• ประเภท User-defined Types หรือ ประเภทที่เราสร้างขึ้นมาเองจาก Class ต่าง ๆ รวมถึง Array, Enum และ interface ด้วยนะ

Built-in Types แต่ละตัวมันมีอะไรบ้าง ?

ต่อจากประเภทใหญ่แล้ว เรามาดูภายในประเภท Built-in กันบ้างดีกว่า ว่าเขาให้อะไรเรามาใช้บ้าง

ชื่อ Data type	Keyword ที่ใช้	คำอธิบายคร่าว ๆ
Number	number	ใช้สำหรับตัวเลข ซึ่งสามารถใช้ได้ทั้งตัวเลขจำนวนเต็ม และ ทศนิยม (เก็บในรูปแบบ 64-bit)
Boolean	boolean	ใช้สำหรับแทนข้อมูลด้านตรรกะเก็บเป็น true / false
String	string	ใช้ในการเก็บสายอักขระ (Sequence of Characters) หรือ ข้อความนั่นแหละ
Void	void	โดยปกติจะใช้ในฟังก์ชันที่ไม่มีการ return หรือ ส่งค่ากลับ
Null	null	ใช้สำหรับกรณีที่ object นั้น ๆ ไม่มีค่าใด ๆ
Undefined	undefined	เป็นการบอกว่าตัวแปรดังกล่าวยังไม่เคยถูก Initialized นั่นเอง

ดังนั้นที่เห็นคงไม่มีอะไรแปลกใจเท่าไหร่ แต่มือใหม่หลายคนอาจเจอ Null และ Undefined เยอะหน่อยจนเกิดความสับสนคิดว่าทั้งสองตัวนี้เหมือนกัน แต่เอาจริง ๆ แล้วไม่เหมือนกันนะ ! ให้ลองดูจากตัวอย่างนี้ที่แอดเปรมได้ทำไว้ให้ดูได้เลย

var myname: string;
console.log(myname) 
console.log(typeof(myname))
/* ผลลัพธ์ที่ได้
undefined
undefined
/*

var myname2: string = null;
console.log(myname2) 
console.log(typeof(myname2))
/* ผลลัพธ์ที่ได้
null
object
/*

console.log(null === undefined) 
console.log(null == undefined) 
console.log(null === null) 
/* ผลลัพธ์ที่ได้
false
true
true
/*

มาต่อด้วยเรื่องของการประกาศตัวแปรกันบ้างดีกว่า

การประกาศตัวแปรทุกคนก็รู้ว่าเป็นส่วนสำคัญในการกำหนดชื่อให้กับข้อมูล หรือ Object ต่าง ๆ ที่เราให้กำเนิดมันขึ้นมา ในการประกาศตัวแปรของ Type Script เราสามารถกำหนดได้หลากหลายรูปแบบมาก ๆ ตามลักษณะการใช้งาน ซึ่งทำได้หลัก ๆ ตาม Pattern ดังนี้เลย

รูปแบบที่ 1 ประกาศตัวแปร พร้อมทั้งประเภทข้อมูล และ กำหนดข้อมูลในคำสั่งเดียว

var [identifier] : [data-type] = value

รูปแบบที่ 2 ประกาศตัวแปร พร้อมทั้งประเภทข้อมูล แต่ยังไม่กำหนดข้อมูลให้กับตัวแปรในคำสั่งเดียว

var [identifier] : [data-type]

แน่นอนว่าผลลัพธ์ที่ได้ของคำสั่งนี้คือการกำหนดตัวแปรไว้ แต่จะเป็นรูปแบบ undefined นั่นเอง

รูปแบบที่ 3 ประกาศตัวแปร พร้อมกำหนดข้อมูล แต่ไม่ได้ทำการกำหนด Data Type ตรงนี้ตัวแปรจะถูกกำหนดประเภทตามข้อมูลที่เราใส่ไปนั่นเอง

var [identifier] = value

รูปแบบที่ 4 ประกาศแค่เพียงชื่อตัวแปรเปล่า ๆ ออกมา จะทำให้ Data Type ถูกกำหนดให้เป็ร undefined

var [identifier]

ซึ่งทั้งหมดนี้เป็นเรื่องสำคัญสำหรับการเริ่มต้นเขียน TypeScript เพราะแค่เราพอประกาศตัวแปรได้ ก็เอาไปเขียนได้แล้วแหละจริงไหมฮะ 555 😄 แต่เอาจริง ๆ แล้วยังมีอีกหลากหลายเรื่องที่เราควรรู้ไว้ต่อจากนี้ ไม่ว่าจะเป็น...

สร้างสรรค์เนื้อหาสุดเฟี้ยวฟ้าวโดย

🐲 Kittikorn Prasertsak (แอดเปรม) - CEO @ borntoDev Co., Ltd.

Facebook | YouTube | Instagram | TikTok