# 4 - TypeScript Syntax

การที่เราจะสลับมาเขียนภาษาใดซักภาษา สิ่งสำคัญที่สุดมันอยู่ตรง Syntax นี่แหละ ว่าเราจะเขียนคำสั่งออกมาได้ยังไง มีรูปแบบการเขียนยังไงนั่นเอง เพราะ Algorithm โดยรวม ๆ มันก็ไม่ได้ยึดติดกับภาษาอยู่แล้วว ดังนั้นเรามาลองดูกันว่าใน TypeScript นี้เราจะเขียนออกมาได้ยังไง !

### ✍🏻 โครงสร้างไวยกรณ์ของ TypeScript

จากที่เราเห็นในตอนที่แล้ว ที่ทำการแสดงผล "Hello World" ออกมาบนหน้าจอ จะพบว่าเมื่อ Compile เรียบร้อยจะมีการ Generate ไฟล์ของโค้ดที่เป็น JavaScript ออกมา แน่นอนว่าทั้งสองภาษานี้มีความเหมือนที่แตกต่างกันอยู่ในหลายส่วนด้วยกัน ในบทนี้เราจะมารวมทุกอย่างที่เราควรรู้ไว้ให้แล้ว

### 🐳 เรื่องราวของ Identifiers ในภาษา TypeScript

แปลง่าย ๆ มันคือชื่อที่เราระบุไว้ใน Element ต่าง ๆ ภายในโปรแกรมของเรานั่นเอง ไม่ว่าจะเป็น ตัวแปร, ชื่อฟังก์ชันต่าง ๆ ซึ่งในส่วนนี้ก็มีกฏกติกาในการตั้ง Identifier ไว้ดังนี้จ้า

* การตั้งชื่อ Identifier นั้นจะต้องไม่ใช่คำ ๆ เดียวกับที่มีใน Keyword (ดูจากตารางในหัวข้อถัดไป)
* การตั้งชื่อใช้ผสมระหว่างตัวอักษร และ ตัวเลขได้ แต่ห้ามขึ้นต้นด้วยตัวเลข แค่นั้น
* ตัวอักษรพิเศษใช้ได้แค่ Underscore \_ หรือ เครื่องหมายดอลล่าห์ $ เท่านั้นนะ :smile:
* Identifier ต้องมีความ Unique เหมือนพวกชื่อ ตัวแปรในภาษาอื่น ๆ เลย
* รูปแบบ Identifier เป็นรูปแบบ Case-sensitive ดังนั้นพิมพ์เล็กใหญ่มีผลนะ !
* สุดท้าย Identifier ต้องไม่มีเว้นวรรค หรือ Space นะคร้าบ

พวกนี้รู้ไว้เพื่อก่อนจะตั้งชื่อตัวแปร ฟังก์ชันต่าง ๆ เช่น เรารู้แล้วว่า ตั้งชื่อตัวแปรว่า <mark style="color:blue;">number, string, var</mark> อะไรพวกนี้ไม่ได้ และ ตั้งชื่อตัวแปรแบบพวก <mark style="color:red;">112prayuthza</mark> แบบนี้ไม่ได้ เพราะมันผิดกฏที่ขึ้นชื่อ identifier ด้วยตัวเลขนั่นเอง ซึ่งเอาจริง ๆ ก็เหมือน ๆ กับการตั้งตัวแปรในภาษาอื่น ๆ ดังนั้นสบายใจได้ ใครเขียนโปรแกรมมาก่อนก็ไม่มีอะไรต้องกังวลเยอะจ้า 🤣

### 🔍 Keyword ทั้งหมดใน TypeScript

แน่นอนว่าทุกภาษาย่อมมี Keyword คือ คำหลักที่ถูกสงวนไว้ใช้งานเฉพาะในภาษานั้น ๆ โดยใน TypeScript มีทั้งหมด 47 ตัวด้วยกันดังนี้เลย

| break    | as         | any        | switch   |
| -------- | ---------- | ---------- | -------- |
| case     | if         | throw      | else     |
| var      | number     | string     | get      |
| module   | type       | instanceof | typeof   |
| public   | private    | enum       | export   |
| finally  | for        | while      | void     |
| null     | super      | this       | new      |
| in       | return     | true       | false    |
| any      | extends    | static     | let      |
| package  | implements | interface  | function |
| new      | try        | yield      | const    |
| continue | do         | catch      |          |

ซึ่งเราคงไม่ต้องไปจำมันทั้งหมดหรอก แต่สำหรับการสลับมาเขียนใหม่ ๆ ก็ให้ดูผ่าน ๆ ตาไว้ เช่น คำว่า function ที่มีมาให้ หรือ คำว่า number ที่มีติดมา ทำให้ใครที่อาจจะเอาไปตั้งชื่อตัวแปร หรือ อะไรพวกนี้ก็ต้องดูไว้ก่อนเพื่อไม่ให้มีปัญหาตามมาในภายหลังจ้า

### ✅ มาดู Guideline ในการตั้งชื่อ Identifier กัน

การเขียนให้ได้มันก็ดี แต่เขียนให้ดี คนอื่นเข้าใจ ตรงตามมาตรฐาน คงจะดีกว่าไม่น้อย ซึ่งการตั้งชื่อ Identifier พวกนี้ก็มีได้หลากหลาย Style แต่ในคอร์ส borntoDev Open Tutorial นี้ เราได้นำข้อตกลงบางส่วนจาก <mark style="color:yellow;">**Google TypeScript Style Guide**</mark> มาให้ทุกคนดูกันตามนี้ฮะ

ในสไตล์ของ Google นี้เขาได้ระบุไว้ว่า Identifier จะต้องใช้แค่ตัวอักษรที่อยู่ใน ASCII, ตัวเลข และ Underscore รวมถึง Regular Expression เท่านั้น ซึ่งได้มีการกำหนดไว้ชัด ๆ เลยว่า การตั้งชื่อแต่ละส่วน ควรใช้เคสแบบใด

| `UpperCamelCase` | ใช้กับ class / interface / type / enum / decorator / type parameters      |
| ---------------- | ------------------------------------------------------------------------- |
| `lowerCamelCase` | ใช้กับ variable / parameter / function / method / property / module alias |
| `CONSTANT_CASE`  | global constant values, including enum values                             |
| `#ident`         | private identifiers are never used.                                       |

หากใครต้องการดูแบบเต็ม ๆ ว่าเราจะต้องเขียนอะไร ตั้งชื่อแบบไหน อะไรควรใช้ และ ไม่ควรใช้ตาม Google TypeScript Style Guide ก็สามารถดูได้จาก[ที่นี่](https://google.github.io/styleguide/tsguide.html)เลย

### 👨🏻‍💻 เรื่องอื่น ๆ ที่รู้ไว้ก็ดีมาก เกี่ยวกับ TypeScript

* การเว้นวรรค (Whitespace) และ เว้นบรรทัด (Line break)&#x20;
* อย่าลืมเรื่อง Case-sensitive ไว้ให้ดี เพราะ แค่พิมพ์เล็ก พิมพ์ใหญ่ก็แตกต่างกันแล้วนะ
* เครื่องหมาย Semicolon ; ใส่หรือไม่ใส่ก็ได้เป็น optional แต่ละบรรทัดถือเป็น statement ในตัวอยู่แล้ว แต่ !! ถ้าจะใส่หลายคำสั่งไว้ในบรรทัดเดียวลักษณะด้านล่างนี้ จะต้องใส่ semicolon เพื่อแยกคำสั่งทุกครั้งนะ
* ```
  ⛔️ let message: string = 'Hello World' console.log(message)
  ✅ let message: string = 'Hello World'; console.log(message);
  ```
* การ Comment ใน TypeScript มีทั้งแบบ Single-line (ใช้ <mark style="color:green;">//</mark> ) และ Multi-line (ใช้ <mark style="color:green;">/\* \*/</mark>)

### 🏛 โครงสร้าง หน้าตาคร่าว ๆ ของการเขียนแบบ Object Oriented

สำหรับการทำงานจริงแล้วคงไม่พ้นต้องมาดูเรื่อง Object Oriented ว่าเราจะจำลองโมเดลต่าง ๆ มาอยู่ในโปรแกรมได้อย่างไร ในวันนี้เรามีตัวอย่างคร่าว ๆ มาให้ทุกคนได้ดู Pattern การเขียนใน TypeScript กันครับ

```
class Human {
    name: string = ''
    lastname: string = ''
    age: number = 0
 
    sayHello(){
      return "Hello ! I'm "+ this.name + " and " + this.age +" years old."
    }
 }
 
 const user1: any = new Human()
 user1.name = 'Prayuay Huakud'
 user1.age = 65
 console.log(user1.sayHello()) 
```

เราจะเห็นได้ว่าลักษณะของหน้าตาจะคล้าย ๆ กับการเขียนในรูปแบบ OO ทั่ว ๆ ไปมาก ๆ ที่จะประกอบไปด้วย 3 ส่วนหลักคือ <mark style="color:yellow;">Class, Method และ Object</mark> ที่ถูก init มาแล้วนั่นเอง โดยการสร้าง Class นั้นจะต้องขึ้นด้วย Keyword คำว่า Class และ ตามด้วยชื่อคลาสนั้น ๆ หรือ ที่เราเรียกว่า Identifier ก่อนหน้านี้นั่นแหละ ถ้าลืมแล้วเลื่อนขึ้นไปข้างบนเลย

ซึ่งภายใน Class ก็จะประกอบไปด้วยตัวแปร หรือ การทำงานต่าง ๆ ที่เปรียบเสมือนเป็นพิมพ์เขียวของ Object ที่เราจะสร้างขึ้น และ เมื่อเราทำการ Init เจ้าตัว Object ให้มันมีชีวิตขึ้นมา มันก็จะมี 3 ส่วนหลักก็คือ Identity, State และ Behavior ตามหลักของ OO เลยนั่นเอง (ใครเรียน OO มาแล้วก็ถือว่าทบทวนแล้วกันนะฮะ 🤣 )

และ พอแปลงกลับมาเป็น JavaScript ผ่านการใช้ TypeScript Compiler ในคำสั่ง tsc HelloWorld.ts เราก็จะได้โค้ดที่เป็น JavaScript ตามนี้ออกมา

```
var Human = /** @class */ (function () {
    function Human() {
        this.name = '';
        this.lastname = '';
        this.age = 0;
    }
    Human.prototype.sayHello = function () {
        return "Hello ! I'm " + this.name + " and " + this.age + " years old.";
    };
    return Human;
}());
var user1 = new Human();
user1.name = 'Prayuay Huakud';
user1.age = 65;
console.log(user1.sayHello());

```

ซึ่งเราจะเห็นได้ว่า "เอ่อ ไอหน้าตาของ TypeScript มันดูดีมีชาติตระกูล เข้าใจง่าย และ เป็นมิตรกับการเขียนแบบ OO มากกว่าจริง ๆ เว้ย 555" แต่ทั้งนี้ทั้งนั้นขึ้นกับ version ของ TypeScript ที่ทำการ Generate มาให้เราด้วยเช่นกั (เอาจริง ๆ แล้วถ้าคำสั่งพื้นฐานแบบนี้มันก็คงไม่เปลี่ยนไปไหนแล้วหละ)

### ❤️ สรุปสั้น ๆ ก่อนจากกันไป

ในตอนนี้เราก็พอจะทราบหน้าตาคร่าว ๆ แล้วว่ามันเป็นยังไงสำหรับการเขียน TypeScript เบื้องต้น อะไรที่ใช้ได้ อะไรที่เป็น Keyword และ หน้าตาแบบเต็ม ๆ ถ้าดูจากการเขียนแบบ OO ก็พอเข้าใจได้คร่าว ๆ แล้วว่า เราจะสร้าง Class, Object เรียกใช้งาน Attribute ต่าง ๆ ได้ยังไง ซึ่งหลายคนก็น่าจะหยิบไปเขียนกันเองได้บ้างแล้ว&#x20;

แต่ในตอนหน้าเราจะมาลองดูเกี่ยวกับเรื่อง Data Types กันดีกว่า ว่าภายใน TypeScript นี้มีอะไรให้เราเล่นกันบ้าง ไปดูกันเลยย

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

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

[Facebook](https://www.facebook.com/borntodev) | [YouTube](https://www.youtube.com/c/borntodevTH) | [Instagram](https://www.instagram.com/borntodev/) | [TikTok](https://www.tiktok.com/@borntodev)&#x20;


---

# 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/get-started-with-typescript/4-typescript-syntax.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.