> For the complete documentation index, see [llms.txt](https://open.borntodev.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://open.borntodev.com/open-access-tutorial/software-development/typescript/get-started-with-typescript/4-typescript-syntax.md).

# 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;