# TypeScript

### 😎 TypeScript มันคืออิหยังวะ ?

![](/files/4Qc83pty5UC9bmk3Ptvc)

เออ นั่นสิ .. หลายคนอาจจะยังไม่เคยรู้จัก แต่อย่างน้อย ๆ ขอบอกเลยว่า "TypeScript" ไม่ใช่ของที่เหมาะกับมือใหม่ซักเท่าไหร่ ถ้าใครยังไม่เคยเขียนโปรแกรมซักภาษาจะให้ลองไปเริ่มดูก่อน (จะเป็น C, C++, Python, Java หรือ JavaScript ซักตัวนึงก็ได้)

เพราะอะไรหนะหรอ ? เพราะถ้าว่าตามตรง มันไม่ค่อยมีเนื้อหาที่รองรับผู้เริ่มต้นแบบไม่เคยเขียนโปรแกรมมาเท่าไหร่เลยยังไงหละ 5555 นั่นแหละครับ เหตุผลที่แท้ทรู

เนื่องจากว่าเจ้า TypeScript เนี้ย มันคือภาคต่อของ JavaScript ที่ถูกสนับสนุนโดยพี่ใหญ่อย่าง Microsoft นั่นเอง เพราะว่าปัญหาจุกจิกที่เจอใน JavaScript มันช่างเยอะเหลือเกิ๊นนนน และ TypeScriipt เกิดมาเพื่อทำให้อะไรเหล่านั้นมันง่ายขึ้นนั่นเอง

### ✅ ข้อดีก็ตามชื่อเลยครับ "Type" + "Script"

คือ ก่อนหน้านี้จะต้องบอกว่า การจัดการกับ Data Type ในการเขียนโปรแกรมภาษาปกติมันไม่ยากอะไรหรอก โดยเฉพาะตระกูลที่เป็น Static Type อยู่แล้ว เช่น C, C#, C++, Java หรือ อะไรก็แล้วแต่ที่ต้องประกาศประเภทข้อมูลมาก่อน 

> นึกถึง int x = 10; เห็นมั้ยว่าเราประกาศประเภทของข้อมูลในตัวแปรนั้น ๆ ไว้เลย

แต่เจ้า JavaScript เจ้ากรรมของเรามันแปลกประหลาดกว่าใครเขา คือ Type ของตัวแปร มันจะเป็นอะไรก็ได้ และ มันก็จะเปลี่ยนไปได้เรื่อย ๆ นั่นเอง 5555 

> ลองคิดดูว่าถ้าตอนแรกเราประกาศตัวแปรที่เก็บตัวเลข จำนวนเงินแบบ money ที่ตอนแรกอาจจะเป็น float (double) แล้วอยู่ ๆ มันสามารถกระโดดไปเป็น String หรือ Boolean ได้ดูคงแปลกพิลึก

### 🔥 อะ ถ้าใครยังนึกไม่ออก มาลองดูตัวอย่างกัน

จากเจ้าตัวอย่างนี้ถ้าหากเราต้องการประกาศตัวแปร myMoney เพื่อเก็บเงินในกระเป๋าของเราเป็นตัวเลขแล้ว ถ้าจะใช้งานเราก็สามารถใช้ได้แบบตัวเลขตัวไปที่ทำได้ ผ่านตัว Operator บวก ลบ คูณ หาร ต่าง ๆ ถูกมะ ?

```typescript
// ประกาศตัวแปร myMoney เก็บตังของเราตามปกติ
let myMoney:number = 112.00
console.log(myMoney) //บรรทัดนี้ log จะออกมาเป็น 112 ให้

//แล้ว..ถ้าเราลองใส่ค่าใหม่ที่เป็นคนละประเภทลงไปหละ ?
myMoney = "Sawasdee" //บรรทัดนี้จะ Error ทันที
//พร้อมขึ่้นด่าเราว่า Type 'string' is not assignable to type 'number'.(2322)

```

ซึ่งถ้าเป็นภาษาทั่ว ๆ ไปเราจะประกาศทับไม่ได้ว่า เออ อยู่ ๆ ให้ข้อมูลใน myMoney เป็น String นะซึ่งรูปแบบ Static Type แบบนี้แหละ คือคุณสมบัติที่ทำให้ TypeScript มันปลอดภัย ไว้ใจได้ง่ายกว่า JavaScript แบบเดิม ๆ นั่นเอง 

### ✅ ไม่ใช่แค่นั้น แต่ยังตรวจสอบ Code ช่วง Compile Time ได้ด้วยนะ !

ถ้าเราสามารถรู้ว่ามีอะไรจะระเบิด ก่อนที่มันจะระเบิดจริง ๆ เราจะได้รับมือได้ก่อนถูกต้องใช่มั้ยฮะ เจ้า TypeScript นี่มีคุณสมบัติเดียวกันเลย คือ "มันจะบอกคุณก่อนตอน Compile Time ว่าจะมี Error อะไรที่ดักจับได้บ้างนั่นเอง" ทำให้ลดปัญหาที่เจอตอน Runtime ไปได้เยอะมาก ๆ เลยหละครับคุณผู้ชมม

### 📖 เนื้อหาในหมวด TypeScript นี้จะมีอะไรบ้าง ?

ตอนนี้แอดเปรม และ ทีมงาน borntoDev กำลังรวบรวมกำลัง ทรัพยากร และ ความรู้ความสามารถทั้งหมด สร้างหลักสูตรที่อ่านง่าย และ มีทั้งวีดีโอประกอบ เผยแพร่ฟรีใน Open Access Tutorial อีกเพียบบ หากใครสนใจสนับสนุนโครงการดี ๆ แบบนี้ สามารถ[คลิกได้ที่นี่](https://www.borntodev.com/sponsorship-program/) หรือ ลงทะเบียนเรียนหลักสูตร Online Premium ของเราได้เลย !

* 🐣 Get Started with TypeScript- กำลังจัดทำ ( 4 / 20 )
* 🐥 TypeScript Pro Tips - พบกันเร็ว ๆ นี้
* 🐔 React & TypeScript - พบกันเร็ว ๆ นี้
* 🐔 Debugging in TypeScript - พบกันเร็ว ๆ นี้
* 🐔 Migrating to TypeScript - พบกันเร็ว ๆ นี้
* 🦖 Advanced TypeScript - พบกันเร็ว ๆ นี้
* 🦖 Real World App with TypeScript - พบกันเร็ว ๆ นี้
* 🐣 TypeScript for Educator - พบกันเร็ว ๆ นี้
* 🐔 Software Testing in TypeScript - พบกันเร็ว ๆ นี้

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

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://open.borntodev.com/open-access-tutorial/software-development/typescript.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.