โครงสร้างไวยากรณ์ของภาษา TypeScript

12 December 2021

ในบทนี้ คุณจะได้เรียนรู้เกี่ยวกับโครงสร้างและไวยากรณ์ของภาษา TypeScript ซึ่งสิ่งเหล่านี้จะใช้เป็นกฏและข้อบังคับสำหรับโปรแกรมเมอร์ที่จะต้องปฏิบัติตามในการเขียนโปรแกรม และนี่เป็นเนื้อหาในบทนี้

  • Statements
  • Blocks
  • Expressions
  • Comments
  • Literals
  • Indentation and white-space
  • Delimiters
  • Keywords

Statements

Statement คือคำสั่งที่เขียนขึ้นเพื่อกำหนดให้โปรแกรมทำงานสำหรับผลลัพธ์บางอย่าง โดยแต่ละคำสั่งจะจบการทำงานด้วยเครื่องหมายเซมิโคลอน (;) ยกตัวอย่างเช่น ถ้าคุณต้องการเขียนโปรแกรมเพื่อบวกเลข คุณสามารถเขียนคำสั่งเพื่อสั่งโปรแกรมให้ทำงานดังกล่าวได้ และนี่เป็นตัวอย่างของการเขียนคำสั่งในภาษา TypeScript

let a: number = 10;
let b: number = 20;
let sum: number = a + b;
console.log(`sum of a and b = ${sum}`);

ในตัวอย่างนี้ โปรแกรมประกอบไปด้วย 4 คำสั่ง โดยแต่ละคำสั่งจะจบด้วยเครื่องหมายเซมิโคลอน (;) สองคำสั่งแรกเป็นการประกาศและกำหนดค่าให้กับตัวแปร คำสั่งต่อมาเป็นการหาผลรวมจากสองตัวแปรก่อนหน้าและนำมาเก็บไว้ในตัวแปร sum คำสั่งสุดท้ายเป็นการเรียกใช้ฟังก์ชันเพื่ิอแสดงค่าในตัวแปรออกทางหน้าจอ และนี่เป็นผลลัพธ์การทำงานของโปรแกรม

sum of a and b = 30

เนื่องจากเครื่องหมายเซมิโคลอนนั้นใช้สำหรับจบคำสั่งของโปรแกรม ดังนั้นมันเป็นไปได้ที่เราจะเขียนหลายคำสั่งไว้ในบรรทัดเดียวกัน ยกตัวอย่างเช่น

let a: number = 10; let b: number = 20;

ในตัวอย่างนี้ ตัวแปรถูกประกาศและเขียนไว้ในบรรทัดเดียวกัน นี่สามารถทำได้เนื่องจาก TypeScript ใช้เครื่องหมายเซมิโคลอนในการแยกแยะคำสั่งออกจากกัน ดังนั้นมันสามารถทราบได้ว่าโค้ดดังกล่าวประกอบไปด้วยสองคำสั่ง หรือในบางครั้ง หนึ่งคำสั่งสามารถขยายไปได้หลายบรรทัด ยกตัวอย่างเช่น

let sum: number =
    a + b;
console.log(
    `sum of a and b = ${sum}`
);

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

ในการเขียนหนึ่งคำสั่งแบบหลายบรรทัดนั้นสามารถพบได้ทั่วไปในการเขียนโปรแกรมภาษา TypeScript เนื่องจากในบางครั้ง มันสามารถช่วยทำให้โค้ดเป็นระเบียนและอ่านได้ง่ายขึ้น เช่นการประกาศค่าของอาเรย์หรือออบเจ็คโดยกำหนดแต่ละค่าในทีละบรรทัด

let user: User = {
    id: 1,
    name: "Metin"
};

let colors = [
    "Red",
    "Green",
    "Blue"
];

ซึ่งนี่ให้ผลลัพธ์เช่นเดียวกันกับการเขียนทั้งหมดลงในบรรทัดเดียวกันดังตัวอย่างต่อไปนี้

let user: User = { id: 1, name: "Metin" };
let colors = ["Red", "Green", "Blue"];

นอกจากนี้ ในหนึ่งคำสั่งนั้นยังสามารถมีการทำงานได้มากกว่าหนึ่งอย่าง โดยเราสามารถแยกการทำงานภายในคำสั่งได้ด้วยเครื่องหมายคอมมา (,) ยกตัวอย่างเช่น เราสามารถประกาศหลายตัวแปรได้ภายในคำสั่งเดียว

let id: number = 1, name: string = "Metin";

ในตัวอย่างนี้ เป็นการประกาศสองตัวแปรพร้อมกับการกำหนดค่าโดยการใช้เพียงหนึ่งคำสั่ง ในการแบ่งการทำงานโดยคั่นแต่ละตัวแปรด้วยเครื่องหมายคอมมา

ทั้งหมดนี้สามารถทำได้ในภาษา TypeScript และไม่ได้บังคับว่าคุณต้องเขียนอย่างไร อย่างไรก็ตาม เราแนะนำให้เขียนหนึ่งคำสั่งเพื่อทำงานเพียงหนึ่งอย่างเท่านั้น และหนึ่งคำสั่งสามารถมีหลายบรรทัดได้ตามความเหมาะสม นี่จะทำให้โค้ดของคุณอ่านง่ายและเป็นระเบียบ

Blocks

บล็อค (Block) เป็นการกำหนดขอบเขตการทำงานของโปรแกรมโดยการรวมหลายคำสั่งเข้าด้วยกันให้อยู่ในระหว่างวงเล็บปีกกา {} ที่เรียกว่าขอบเขตของบล็อค ในภาษา TypeScript นั้นบล็อคสามารถสร้างได้จากหลายวิธี รูปแบบของบล็อคที่ง่ายที่สุดคือการสร้างบล็อคแบบไม่ระบุชื่อ

console.log('Top level');

{
    let name = "Metin";
    console.log(`Hello ${name}`);
}

{
    let name = "Block 2";
    console.log(`Hello from ${name}`);
}

ในตัวอย่างนี้ เราได้สร้างสองบล็อคโดยแต่ละบล็อคประกอบไปด้วยคำสั่งที่อยู่ภายในวงเล็บปีกกา {} บล็อคในรูปแบบนี้จะทำงานในทันทีเนื่องจากมันเป็นบล็อคที่ไม่มีชื่อหรือ Anonymous block บล็อคไม่สามารถกำหนดไว้ในตัวแปรหรือทำให้มันทำงานในภายหลังได้

แต่ละบล็อคในภาษา TypeScript มีขอบเขตตัวแปรเป็นของมันเอง นั่นหมายความว่าตัวแปรที่ประกาศในบล็อคจะสามารถใช้งานได้เพียงในบล็อคเท่านั้น นี่มีประโยชน์เป็นอย่างมากเมื่อเราต้องการใช้ตัวแปรชื่อเดียวกันในสถานที่ที่แตกต่างกัน

สำหรับการสร้างบล็อคที่พบได้ในการเขียนโปรแกรมทั่วไปคือการสร้างบล็อคจากคำสั่งควบคุมประเภทต่างๆ ในภาษา TypeScript เช่น คำสั่ง if for while หรือ do while นี่เป็นตัวอย่างการสร้างบล็อคด้วยคำสั่ง if else สำหรับตรวจสอบคะแนนในตัวแปร

let score = 70;
if (score > 50) {
    console.log(`Your score is ${score}`);
    console.log("It's greater than 50");
} else {
    console.log("Your score is unacceptable");
}

ในตัวอย่างนี้ เป็นโปรแกรมตรวจสอบคะแนนจากตัวแปร score ด้วยคำสั่งควบคุม if และ else ซึ่งในการใช้งานสองคำสั่งนี้ เราสามารถกำหนดบล็อคเพื่อให้โปรแกรมทำงานในบล็อคของคำสั่ง if เมื่อเงื่อนไขเป็นจริงและทำงานในบล็อคของคำสั่ง else เมื่อเงื่อนไขเป็นเท็จได้

นั่นหมายความว่าถ้าคะแนนในตัวแปรมีค่ามากกว่า 50 โปรแกรมจะทำงานในบล็อคของคำสั่ง if ที่ประกอบไปด้วยสองคำสั่ง และถ้าหากเงื่อนไขไม่เป็นจริง โปรแกรมจะทำงานในบล็อคของคำสั่ง else ที่ประกอบไปด้วยหนึ่งคำสั่ง

นอกจากนี้ บล็อคยังสามารถสร้างได้จากการสร้างฟังก์ชัน นั่นหมายความว่าเมื่อคุณสร้างฟังก์ชันคุณได้ทำการสร้างบล็อคโดยปริยาย แต่สำหรับฟังก์ชันนั้นโค้ดจะไม่ทำงานจนกว่าเราจะเรียกใช้งานมัน

function fn1() {
    console.log("fn1 working...");
}

function fn2() {
    console.log("fn2 working...");
}

fn2();

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

fn2 working...

จะเห็นว่ามีเพียงคำสั่งในฟังก์ชันที่สองเท่านั้นที่ทำงานเนื่องจากเราเรียกใช้งานฟังก์ชันดังกล่าว อย่างไรก็ตาม คุณจะได้เรียนเกี่ยวกับฟังก์ชันในภายหลังของบทเรียนนี้

นอกจากนี้ บล็อคสามารถที่จะซ้อนกันได้ มันเป็นเรื่องปกติที่ในการเขียนโปรแกรมคุณจะพบว่าบล็อคอาจจะซ้อนกันเป็นจำนวนมาก นี่เป็นการใช้งานคำสั่ง for loop และคำสั่ง if อยู่ด้านใน ดังนั้นจึงทำให้เกิดการซ้อนกันของบล็อคขึ้น

for (let i = 1; i <= 10; i++) {
    console.log(i);
    if (i % 2 == 0) {
        console.log("Even");
    } else {
        console.log("Odd");
    }
}

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

let n: number = 10;

if (n == 10) {
    let message: string = "n is ten";
    console.log(message);
}

// Cannot use message here

ในกรณีนี้ ตัวแปร message ที่ประกาศภายในบล็อคของคำสั่ง if จะสามารถใช้ได้แค่ในบล็อคดังกล่าวเท่านั้น เมื่อจบการทำงานของบล็อคตัวแปรนี้จะถูกทำลาย และไม่สามารถใช้งานได้จากภายนอกบล็อค

สำหรับการสร้างบล็อคสามารถสร้างได้จากวิธีที่ได้กล่าวมา เช่น Anonymous block การสร้างด้วยคำสั่งควบคุม และการประกาศฟังก์ชัน อย่างไรก็ตาม เครื่องหมาย {} อาจจะถูกใช้ในไวยากรณ์ส่วนอื่นๆ ของภาษา เช่น เมื่อประกาศออบเจ็ค Literal

let point = {
    x: 10,
    y: 5
};

นี่ไม่ใช่การสร้างบล็อค แต่เป็นการประกาศออบเจ็ค Literal ที่ใช้เครื่องหมาย {} สังเกตว่าเราได้กำหนดค่ามันลงบนตัวแปรซึ่งนี่ไม่สามารถทำได้กับบล็อค และจบการทำงานด้วยเครื่องหมายเซมิโคลอน ซึ่งเป็นการจบคำสั่งของโปรแกรมและบล็อคจะไม่ทำ

Expressions

นิพจน์ (Expression) คือการทำงานร่วมกันของตัวดำเนินการและตัวถูกดำเนินการเพื่อทำให้เกิดผลลัพธ์ใหม่ขึ้น โดยที่ตัวถูกดำเนินการสามารถเป็นได้ทั้ง Literal ตัวแปร หรือออบเจ็คทุกประเภทในภาษา TypeScript นี่เป็นตัวอย่างของ Expression อย่างง่ายในภาษา TypeScript

3 + 5;
1 < 10;
true && false;
4 >> 2;
"marcus" + "code";
!5;

Expression เหล่านี้เกิดจากการทำงานร่วมกันของตัวดำเนินการและตัวถูกดำเนินการ และส่งผลให้เกิดค่าใหม่ขึ้น โดยปกติแล้วแค่ Expression เพียงอย่างเดียวยังไม่สมบูรณ์ที่จะกำหนดการทำงานของโปรแกรมได้ ดังนั้นเราสามารถเก็บ Expression ไว้ในตัวแปร หรือใช้มันร่วมกับคำสั่งอื่นในโปรแกรมได้ ยกตัวอย่างเช่น

// Assign to a variable
let a: number = 3 + 5;

// Use as condition
if (1 < 10) {
    console.log("Of course! one is less than ten");
}

// Use in function calls
console.log(4 >> 2);

นี่เป็นเพียง Expression ที่เรียบง่าย อย่างไรก็ตาม แบบที่ซับซ้อนก็สามารถสร้างได้เช่นเดียวกัน ในตัวอย่างนี้ เป็นโปรแกรมคำนวณหาด้านที่ยาวที่สุดของสามเหลี่ยมมุมฉากโดยใช้ทฤษฎีบทของปีทากรอรัสที่คุณน่าจะคุ้นเคยในวิชาคณิตศาสตร์

let a: number = 3;
let b: number = 4;

let c = Math.sqrt((a * a) + (b * b));
console.log(`c = ${c}`);

จากตัวอย่าง ค่าในตัวแปร c นั้นคำนวณมาจากรากที่สองของ Expression (a * a) + (b * b) ที่หาได้จากการใช้ฟังก์ชัน Math.sqrt ในภาษา TypeScript และในการแสดงผลค่าของตัวแปรออกทางหน้าต่อ การเชื่อมต่อของ Template string c = ${c} นั้นก็เป็นอีกหนึ่ง Expression

Comments

คอมเมนต์ (Comment) คือการเขียนข้อความลงไปในโค้ดเพื่ออธิบายการทำงานของมัน หรือเพื่อเตือนความจำให้กับผู้เขียนโปรแกรมเอง คอมเมนต์จะถุูกเพิกเฉยเมื่อโปรแกรมทำงาน นอกจากนี้ การเขียนคอมเมนต์สามารถช่วยให้เราเข้าใจการทำงานของโค้ดได้อย่างรวดเร็วโดยทีี่ไม่ต้องไปดูเนื้อหาของโค้ดทั้งหมด การคอมเมนต์ในภาษา TypeScript สามารถทำได้สองวิธีคือการคอมเมนต์แบบหนึ่งบรรทัดและการคอมเมนต์แบบหลายบรรทัด

นี่เป็นตัวอย่างของการคอมเมนต์แบบหนึ่งบรรทัด

// Declare variables
let siteName: string = "MarcusCode";
let year: number = 2014;

// Display site's info
console.log(`${siteName} launched in ${year}.`);

การคอมเมนต์โค้ดแบบหนึ่งบรรทัดสามารถทำได้โดยเริ่มต้นด้วยเครื่องหมาย Double back slash (//) ตามด้วยข้อความที่ต้องการคอมเมนต์ ซึ่งบรรทัดเหล่านี้จะถูกเพิกเฉยเมื่อโปรแกรมทำงาน หรือกล่าวอีกนัยหนึ่ง มันไม่มีผลต่อการทำงานของโปรแกรมนั่นเอง

นอกจากนี้ คุณยังสามารถคอมเมนต์ในบรรทัดเดียวกันกับคำสั่งของโปรแกรมได้ ยกตัวอย่างเช่น

let apples: number = 3; // Number of apples
let oranges: number = 2; // Oranges in the basket

// Total fruits we have right now
let sum: number = apples + oranges;
console.log(sum);

ที่ท้ายของบรรทัดเพียงแค่เริ่มต้นเครื่องหมาย // และพิมพ์ข้อความที่ต้องการคอมเมนต์ของคุณ ซึ่งข้อความหลังจากเครื่องหมายนี้ไปจนจบบรรทัดจะถือว่าเป็นการคอมเมนต์

รูปแบบที่สองคือการคอมเมนต์แบบหลายบรรทัด เราสามารถทำได้โดยเขียนสิ่งที่ต้องการคอมเมนต์ระหว่าง /* และ */ ซึ่งทุกอย่างที่เขียนในระหว่างเครื่องหมายเหล่านี้จะถูกเพิกเฉยและไม่มีผลต่อการทำงานของโปรแกรม

นี่เป็นตัวอย่างโปรแกรมแปลงค่าอุณหภูมิจากองศาเซลเซียสเป็นองศาฟาเรนไฮต์ และเราได้เขียนคอมเมนต์เป็นจำนวนมากเพื่ออธิบายว่าโค้ดแต่ละส่วนใช้ทำอะไรบ้าง

temperature_converter.ts
/*
This Celsius to Fahrenheit Converter
Define temperature in Celsius
To convert to Fahrenheit
*/
let celsius: number = 35;

/* Start the conversion */
let fahrenheit: number = celsius + 1.8 + 32;

/*
And finally
Display the result
*/
console.log(`${celsius} Celsius = ${fahrenheit} Fahrenheit`);

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

35 Celsius = 68.8 Fahrenheit

ในตัวอย่างนี้ เป็นโปรแกรมสำหรับแปลงอุณหภูมิจากองศาเซลเซียสไปยังฟาเรนไฮต์ เพื่ออธิบายการทำงานของโค้ดอย่างละเอียด เราจะต้องเขียนข้อความเป็นจำนวนมาก ดังนั้นเราใช้การคอมเมนต์แบบหลายบรรทัดแทน

นอกจากนี้ คุณยังสามารถใช้มันคอมเมนต์ในบรรทัดเดียวกันได้ โดยการเปิดและปิดภายในบรรทัดเดียวกัน หรือแทรกคอมเมนต์ไปที่ส่วนใดๆ ของโค้ดที่ต้องการคอมเมนต์ ยกตัวอย่างเช่น

let fahrenheit: number = /* This is the formula */ celsius + 1.8 + 32;

หรือใช้สำหรับการคอมเมนต์บางค่าของอาเรย์ออกไปชั่วคราว ในตัวอย่างนี้ "Thomas" ถูกลบออกไปแทนที่เราจะลบมันออกจากโค้ด

let names: string[] = ["Christop", /*"Thomas",*/ "Julia", "Emily"];

Literals

Literal คือค่าคงที่ที่แสดงถึงค่าของประเภทข้อมูลพื้นฐานในภาษา TypeScript ซึ่งประกอบไปด้วย ตัวเลข ข้อความ Boolean null และ undefined นี่ถือว่าเป็นส่วนที่เล็กที่สุดของข้อมูลที่จะทำให้เกิดข้อมูลประเภทอื่นๆ ตามมา เช่น ออบเจ็ค หรืออาเรย์ เป็นต้น

นี่เป็นตัวอย่างของ Literal ที่แสดงข้อมูลพื้นฐานประเภทต่างๆ ในภาษา TypeScript

// Numbers
12
-3
4.15
34
0b100010
0o42
0x22

// String
"A"
"Blue"
"TypeScript"

// Boolean
true
false

// Others
null
undefined

Literal เป็นหน่วยที่เล็กที่สุดของข้อมูลที่ใช้สำหรับสร้างข้อมูลประเภทอื่นๆ ในโปรแกรมหรือรวมกันเพื่อให้เกิดข้อมูลที่ซับซ้อน เราใช้มันสำหรับกำหนดค่าให้กับตัวแปร ใช้ร่วมกับตัวดำเนินการ หรือส่งเป็นค่าของฟังก์ชัน

let age: number = 31;
let sum: number = -2 + 4;
console.log("I love TypeScript");

ในตัวอย่างนี้ เป็นการใช้งาน Literal ในการกำหนดค่าให้กับตัวแปร ใช้ร่วมกับ Expression และส่งค่า Literal ของ String เพื่อแสดงผลออกทางหน้าจอด้วยฟังก์ชัน console.log ดังนั้น Literal ก็คือค่าคงที่ที่เราใช้สำหรับการคำนวณและแสดงผลในโปรแกรม

Indentation and white-space

การย่อหน้าและการเว้นวรรคเป็นวิธีในการกำหนดรูปแบบของโปรแกรมให้สามารถอ่านและเข้าใจได้ง่ายโดยโปรแกรมเมอร์ และในบางส่วนนั้นมันเป็นข้อบังคับจากไวยากรณ์ของภาษาที่ใช้สำหรับแยกแยะส่วนประกอบต่างๆ ของโปรแกรมที่เราเขียนขึ้นจากคำสั่งสงวนต่างๆ มาเริ่มต้นจากการเว้นวรรค

let myName: string = "Matteo";

ตัวแปรภาษาใช้การเว้นวรรคสำหรับแยกแยะคำสั่งของภาษาและส่วนที่กำหนดโดยโปรแกรมเมอร์ ยกตัวอย่างเช่น ในการประกาศตัวแปรเราจะใช้คำสั่ง let ตามด้วยการเว้นวรรค และชื่อของตัวแปรที่ต้องการประกาศ

function greet(name) {
    console.log(`Hello ${name}`);
}

เช่นเดียวกันกับการประกาศฟังก์ชัน เราจะต้องเว้นวรรคระหว่างคำสั่ง function และชื่อของฟังก์ชัน นี่เป็นข้อบังคับเนื่องจากถ้าหากไม่มีการเว้นวรรค ตัวแปรภาษาจะไม่สามารถแยกแยะระหว่างคำสั่งและชื่อที่เรากำหนดได้

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

// Good
let a = 1 + 2;

// Bad
let b=1+2;

เรามักจะเว้นวรรคระหว่างตัวดำเนินการและตัวถูกดำเนินการ เหมือนกับที่คุณเห็นในตัวอย่าง ถึงแม้ว่าทั้งสองแบบจะสามารถทำได้ แต่การเขียนในรูปแบบแรกจะทำให้โค้ดของเราเป็นระเบียบและอ่านง่ายกว่าและเป็นวิธีที่ควรทำ มาดูตัวอย่างเพิ่มเติม

// Good
let a = [1, 2, 3, 4, 5];
let b = { id: 1, name: "Matteo" };

// Bad
let c = [1,2,3,4,5];
let d = {id:1,name:"Matteo"};

ในการกำหนดสมาชิกให้กับอาเรย์ เรามักจะเขียนหนึ่งเว้นวรรคหลังเครื่องหมายคอมมา (,) ในขณะที่การกำหนดฟิลด์ให้กับออบเจ็ค จะมีการเว้นวรรคก่อนและหลังวงเล็บ {} หนึ่งเว้นวรรคหลังเครื่องหมายโคลอน (:) หนึ่งเว้นวรรคหลังเครื่องหมายคอมมา (,) เช่นเดียวกัน

คำแนะนำนี้ถูกนำไปใช้เช่นเดียวกันในส่วนอื่นๆ ที่มีการใช้งานเครื่องหมายคอมมา เช่น การประกาศพารามิเตอร์ของฟังก์ชัน และการเรียกใชงานฟังก์ชัน

// Good
function fn1(a, b, c) {
   ...
}
fn1(1, 2, 3);

// Bad
function fn2(a,b,c) {
   ...
}
fn1(1,2,3);

อีกส่วนหนึ่งที่ควรทำก็คือการใส่เว้นวรรคหลังจากคำสั่ง if และก่อนวงเล็บ { ของบล็อคของคำสั่ง ซึ่งนี่รวมไปถึงคำสั่งควบคุมอื่นๆ หรือแม้แต่การประกาศฟังก์ชันก็ควรทำเช่นเดียวกัน

// Good
if (true) {
    ...
}

// Bad
if(true){
    ...  
}

อย่างไรก็ตาม รูปแบบการเขียนทั้งหมดที่กล่าวมานี้ไม่ได้เป็นข้อบังคับ แต่มันเป็นคำแนะนำที่จะทำให้โค้ดเป็นระเบียบและอ่านง่าย และผู้คนเป็นจำนวนมากก็ทำในรูปแบบที่เราแนะนำไป

การใส่เว้นวรรคเป็นจำนวนมากนั้นสามารถทำได้และไม่มีผลต่อการทำงานของโปรแกรม แต่มันก็ไม่มีเหตุผลอะไรที่จะทำเช่นนั้น ยกตัวอย่างเช่น

// Bad
let  a: number = 1   +   2;
let numbers = [10,  20,  30];

แต่ในบางกรณี เราใช้การเว้นวรรคเป็นจำนวนมากเพื่อจัดระเบียบของโค้ดเพื่อทำให้มันอ่านง่ายมากขึ้น เช่น การจัดระยะสำหรับการกำหนดค่าของตัวแปรในคอลัมน์เดียวกัน

let name: string       = "Matteo";
let age: number        = 26;
let occupation: string = "Artist";

นอกจากการเว้นวรรคแล้ว ยังมีการย่อหน้าที่เป็นสิ่งที่คุณควรให้ความสำคัญในขณะที่เขียนโปรแกรม โดยทั่วไปแล้วทุกครั้งที่มีการสร้างบล็อคใหม่จะมีการย่อหน้าใหม่หนึ่งแท็บเกิดขึ้นเสมอ

let username: string = "admin";
let password: string = "secret";

if (username == "admin" && password == "secret") {
    console.log("Login successfully");
    console.log(`You're logged in as ${username}`);
} else {
    console.log("Invalid username or password");

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

และถ้าหากบล็อคมีการซ้อนกัน เราก็ทำการย่อหน้าบล็อคภายในโดยอ้างอิงจากบล็อคภายนอกหนึ่งแท็บเช่นเดียวกัน ยกตัวอย่างเช่น

console.log("Top level");

function login(username: string, password: string): void {
    console.log("Logging you in...");
    if (username == "admin" && password == "secret") {
        console.log("Login successfully");
        console.log(`You're logged in as ${username}`);
    } else {
        console.log("Invalid username or password");
    }
}

let username: string = "admin";
let password: string = "secret";

login(username, password);

ในกรณนี้ ฟังก์ชันเป็นบล็อคที่สร้างขึ้นจาก Top level และมันเว้นวรรคหนึ่งแท็บตามปกติ จากนั้นภายในฟังก์ชันได้มีการใช้งานคำสั่ง if สำหรับตรวจสอบเงื่อนไข ดังนั้นบล็อคของมันจะถูกย่อหน้าอ้างอิงจากบล็อคของฟังก์ชันหนึ่งแท็บ และเมื่ออ้างอิงจาก Top level การเว้นวรรคทั้งหมดของมันคือสองแท็บ

Delimiters

Delimiter หรือตัวแบ่ง คือสัญลักษณ์หรือตัวอักษรที่ใช้โดยตัวแปรของภาษาเพื่อระบุขอบเขต หรือแบ่งส่วนต่างๆ ของโค้ดออกจากกัน ตัวอย่างของตัวแบ่งก็คือ เครื่องหมายคอมมา (,) มันถูกใช้เป็นตัวแบ่งซึ่งอยู่ในหลายบริบทของโปรแกรม ยกตัวอย่างเช่น

let a: number = 1, b: number = 2;
let languages: string[] = ["TypeScript", "Python", "Ruby", "GO"];
let user = { id: 1, name: "Metin" };
console.log(a, b, languages, user);

มันสามารถใช้แบ่งการทำงานในคำสั่งของโปรแกรม ในบรรทัดแรกเราได้ประกาศสองตัวแปรในคำสั่งเดียว โดยใช้เครื่องหมายคอมมาเพื่อแบ่งการประกาศแต่ละตัวแปร และมันยังใช้เป็นตัวแบ่งแต่ละสมาชิกในอาเรย์และฟิลด์ของออบเจ็ค หรือแบ่งรายการอาร์กิวเมนต์ที่ส่งไปยังฟังก์ชัน

เครื่องหมายโคลอน (:) ใช้เป็นตัวแบ่งเพื่อกำหนดประเภทข้อมูลให้กับตัวแปร นอกจากนี้ มันยังใช้เป็นตัวแบ่งระหว่างคีย์และค่าของฟิลด์ของออบเจ็คในรูปแบบ key: value เหมือนในออบเจ็ค user ที่คุณเห็นในตัวอย่าง

function add(a: number, b: number) {
    return a + b;
}
let sum: number = add(10, 20);
console.log(sum);

นอกจากนี้ เครื่องหมายคอมมายังใช้สำหรับกำหนดรายการของพารามิเตอร์ในตอนประกาศฟังก์ชัน และแบ่งแยกอาร์กิวเมนต์ในตอนเรียกใช้ฟังก์ชัน เหมือนกับฟังก์ชัน add ที่ได้ประกาศไปด้านบน

อีกตัวแบ่งหนึ่งที่เราคุ้นเคยและใช้มันอยู่ตลอดก็คือเซมิโคลอน (;) มันใช้เพื่อจบคำสั่งการทำงานคำสั่งของโปรแกรม ดังนั้นมันจึงปรากฏอยู่ทุกที่ในโปรแกรมของเรา

let productName: string = "iPad";
let productPrice: number = 12000;
console.log(`${productName} price is ${productPrice} THB`);

นอกจากนี้ ในภาษา TypeScript เครื่องหมายเซมิโคลอนยังถูกใช้ในบริบทอื่นของโปรแกรม เช่นการกำหนดส่วนการทำงานของคำสั่ง for loop ที่ประกอบไปด้วย ค่าเริ่มต้น เงื่อนไข และการเปลี่ยนแปลงค่าของลูป

for (let i: number = 0; i < 10; i++) {
    console.log(i);
}

นี่ไม่ใช่การจบคำสั่งของโปรแกรมเหมือนกับการใช้งานเครื่องหมายเซมิโคลอนแบบปกติ แต่มันเป็นการกำหนดวิธีการทำงานของคำสั่ง for loop ที่ถูกกำหนดโดยไวยากรณ์ของภาษา

นอกจากนี้ ในภาษา TypeScript ยังมีตัวแบ่งแบบกำหนดขอบเขตหรือวงเล็บ ซึ่งวงเล๋็บแต่ละประเภทถูกใช้สำหรับกำหนดการทำงานของโปรแกรมและมีหน้าที่แตกต่างกัน คุณได้เห็นเราใช้งานมันมาแล้วในตัวอย่างที่ผ่านมา

วงเล็บปีกกา {} ใช้เพื่อสร้างบล็อคใหม่สำหรับรวมกลุ่มของคำสั่งเข้าด้วยกันให้เป็นหนึ่งเดียว ซึ่งนี่จะถูกใช้งานเมื่อเราสร้างบล็อคด้วยคำสั่งควบคุม เช่น if else for หรือ while loop ยกตัวอย่างเช่น

if (condition) {
    // statements
}

for (initial; condition; updates) {
    // statements
}

วงเล็บแบบ Brackets [] ใช้ในการประกาศค่าของอาเรย์และระบุ Index ในการเข้าถึงค่าของอาเรย์หรือออบเจ็คผ่าน Key ของมัน

let items: string[] = ["Computers", "Pancake", "Mountain"];
console.log(`I like ${items[0]}`);

สุดท้ายวงเล็บ () ถูกใช้ในสองวัตุประสงค์คือเพื่อควบคุมลำดับความสำคัญการทำงานของนิพจน์ และเพื่ิอกำหนดส่วนของพารามิเตอร์ของฟังก์ชัน คำสั่งควบคุม หรือคอนสตรัคเตอร์ของคลาส ยกตัวอย่างเช่น

let result: number = (1 + 2) * 3;

function (param1, param2, ...) {
    // statements
}

if (condition) {
    // statements
}

Keywords

Keyword คือคำสั่งที่สงวนไว้สำหรับการทำงานของตัวแปรภาษาเอง และมันไม่สามารถใช้งานเพื่อตั้งชื่อสิ่งที่ต่างๆ ที่กำหนดโดยโปรแกรมเมอร์ได้ ยกตัวอย่งเช่น ชื่อของตัวแปร เมธอด คลาส อินเตอร์เฟส ประเภทข้อมูล เป็นต้น และนี่เป็น Keyword ในภาษา TypeScript ที่แบ่งออกเป็นสามหมวดหมู่

Reserved words

catch class const continue
debugger default delete do
else enum export extends
false finally for function
if import in instanceof
new null return super
switch this throw true
try typeof var void
while with

Strict mode reserved words

as implements interface let
package private protected public
static yield

Contextual keywords

any boolean constructor declare
get module require number
set string symbol type
from of

แหล่งที่มา: https://github.com/microsoft/TypeScript/issues/2536#issuecomment-87194347

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

บทความนี้เป็นประโยชน์หรือไม่? Yes · No