การแสดงผล ในภาษา TypeScript

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

• การแสดงผลออกทางหน้าจอ
• การจัดรูปแบบการแสดงผล
• การแสดงผลข้อผิดพลาด
• การแสดงผลด้วยเมธอดของ Node.js

การแสดงผลออกทางหน้าจอ

การแสดงผลออกทางหน้าจอสำหรับการเขียนโปรแกรมแบบ CLI ที่รันบน Node.js นั้นคือการแสดงผลเป็นลำดับของตัวอักษรผ่านทาง Console หรือ Terminal ซึ่งสามารถทำได้โดยการใช้เมธอดจากโมดูล Console และเมธอดพื้นฐานที่ใช้แสดงผลในภาษา TypeScript คือเมธอด console.log

นี่เป็นตัวอย่างการใช้งานเมธอด console.log เพื่อแสดงผลข้อมูลประเภทต่างๆ ออกทางหน้าจอในภาษา TypeScript

console.log("Hello TypeScript");
console.log(10);
console.log(true);

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

Hello TypeScript
10
true

ในตัวอย่างนี้ เราได้ใช้เมธอด console.log แสดงข้อมูลสามประเภทออกทางหน้าจอ ได้แก่ ตัวเลข Boolean และ String เมธอดถูกออกแบบมาให้สามารถใช้งานร่วมกับข้อมูลทุกประเภทในภาษา TypeScript ซึ่งข้อมูลจะถูกแปลงเป็น String และจะส่งผ่านช่องทางการแสดงผลมาตรฐาน (stdout) ที่เชื่อมต่อกับ Console

จากตัวอย่าง จะเห็นว่าในแต่ละคำสั่งของการเรียกใช้เมธอด console.log จะแสดงการขึ้นบรรทัดใหม่อัตโนมัติเสมอ นี่ช่วยอำนวยความสะดวกและทำให้เราไม่ต้องแสดงการขึ้นบรรทัดใหม่ด้วยตัวเองโดยใช้ตัวอักษรสำหรับการขึ้นบรรทัดใหม่ \n

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

console.log("Name:", "Matteo");
console.log(1, 2, 3, 4, 5);

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

Name: Matteo
1 2 3 4 5

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

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

let a: number = 10;
let b: number = 20;
console.log(a, b, a + b);

let user = {
    id: 1,
    name: "Metin"
};
console.log(user);

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

10 20 30
{ id: 1, name: 'Metin' }

ในตัวอย่าง เป็นการแสดงค่าของตัวแปรออกทางหน้าจอด้วยเมธอด console.log ซึ่งเป็นค่าของตัวเลขและออบเจ็ค Literal คุณสามารถใช้เมธอดสำหรับแสดงข้อมูลทุกประเภทไม่ว่าจะเป็นออบเจ็ค อาเรย์ ฟังก์ชัน และข้อมูลประเภทอื่นๆ ในภาษา TypeScript

การจัดรูปแบบการแสดงผล

นอกจากเมธอด console.log จะใช้แสดงผลค่า Literal และตัวแปรออกทางหน้าจอแล้ว มันยังสามารถใช้งานด้วยการจัดรูปแบบการแสดงผลได้ นี่จะช่วยให้เราไม่ต้องจัดเตรียมข้อมูลด้วยการเชื่อมต่อ String ก่อนการแสดงผล แต่ใช้การแทนค่าใน String แทน นี่เป็นตัวอย่าง

let name: string = "Matteo";
console.log("My name is %s", name);

let a: number = 2;
let b: number = 3;
console.log("%d + %d = %d", a, b, a + b);

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

My name is Matteo
2 + 3 = 5

ในตัวอย่างนี้ เป็นการแสดงผลด้วยการจัดรูปแบบการแสดงผล โดยพารามิเตอร์แรกจะเป็น Format string ที่ใช้จัดรูปแบบการแสดงผล ซึ่งประกอบไปด้วยตัวระบุการแสดงผลที่กำหนดในรูปแบบ %{ch} โดยที่ ch เป็นตัวอักษรที่กำหนดประเภทข้อมูลที่ต้องการแสดงผล

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

console.log("My name is %s", name);
...
console.log("%d + %d = %d", a, b, a + b);

จากนั้นตั้งแต่พารามิเตอร์ที่สองเป็นต้นไป เป็นการส่งค่าที่จะนำไปแทนที่ในตัวระบุการแสดงผลที่กำหนดไว้ใน Format string พารามิเตอร์แรกของเมธอด ในตัวอย่าง %s จะถูกแทนที่ด้วยค่าในตัวแปร name และ %d ทั้งสามตัว จะถูกแทนที่ด้วยค่าในตัวแปร a, b และผลลัพธ์จาก a + b ตามลำดับ

และนี่เป็นตัวระบุการแสดงผลที่สามารถใช้งานได้กับเมธอด console.log เมื่อคุณเขียนโปรแกรมบน Node.js อย่างไรก็ตาม การทำงานเหล่านี้อาจแตกต่างกันออกไปเมื่อคุณเขียนโปรแกรมในสภาพแวดล้อมอื่น เช่น เว็บเบราว์เซอร์ เป็นต้น

การแสดงผลข้อผิดพลาด

การแสดงผลข้อผิดพลาดนั้นสามารถทำได้โดยใช้เมธอด console.error มันถูกออกแบบมาสำหรับการแสดงข้อผิดพลาดที่จะเชื่อมต่อกับ Standard error (stderr) นี่จะช่วยแยกการแสดงผลปกติและการแสดงผลที่เป็นข้อผิดพลาดออกจากกัน

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

let n: number = -3; 
if (n < 0) {
    console.error("Number to find factorial cannot be negative.");
} else {
    let fac: number = 1;
    for (let i = 1; i <= n; i++) {
        fac *= i;
    }
    console.log(`${n}! = ${fac}`);
}

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

Number to find factorial cannot be negative.

ในตัวอย่าง เมื่อตัวเลขที่นำมาหาค่าแฟกทอเรียลเป็นจำนวนเต็มลบ เราแสดงข้อผิดพลาดออกทางหน้าจอด้วยเมธอด console.error เพื่อบอกว่านี่เป็นข้อความของข้อผิดพลาดในโปรแกรม ในบาง Command line หรือบนเว็บเบราว์เซอร์ ข้อความของข้อผิดพลาดอาจแสดงเป็นสีแดง นี่จะทำมันแยกแยะจากการแสดงผลปกติได้ง่ายขึ้น

เช่นเดียวกับเมธอด console.log เราสามารถส่งมากกว่าหนึ่งพารามิเตอร์เพื่อแสดงผลในเมธอด console.error ได้ และมันทำงานได้กับออบเจ็คทุกประเภท นี่เป็นตัวอย่างของการส่งสองพารามิเตอร์ไปยังเมธอด

try {
    null.f();
} catch (err) {
    console.error(err.name, err.message);
}

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

TypeError Cannot read property 'f' of null

นี่จะทำให้เกิดข้อผิดพลาด TypeError ขึ้นเนื่องจากเราเรียกใช้เมธอด f ซึ่งไม่มีอยู่บนออบเจ็ค null ดังนั้นเราใช้คำสั่ง try catch เพื่อตรวจสอบข้อผิดพลาด และแสดงชื่อและข้อความของข้อผิดพลาดออกทางหน้าจอ

การแสดงผลด้วยเมธอดของ Node.js

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

process.stdout.write("Hello");
process.stdout.write("World");

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

HelloWorld

เมธอด write นั้นเป็นเมธอดจากออบเจ็ค process.stdout ที่ใช้สำหรับแสดงข้อมูลออกทางหน้าจอเช่นเดียวกับเมธอด console.log แต่สิ่งที่แตกต่างคือมันไม่มีการขึ้นบรรทัดใหม่ และข้อมูลที่สามารถใช้ได้กับเมธอดจะต้องเป็น String หรือ Buffer เท่านั้น

นั่นหมายความว่าคุณไม่สามารถใช้มันเพื่อแสดงข้อมูลประเภทอื่นได้ ยกตัวอย่างเช่น

process.stdout.write(1);
process.stdout.write({ id: 1, user: "Matteo" });

นี่เป็นข้อผิดพลาดที่เกิดขึ้นเมื่อตัวอย่างนี้ถูกรัน

TypeError [ERR_INVALID_ARG_TYPE]: The "chunk" argument must be of type string or an instance of Buffer or Uint8Array. Received type number (1)

ในตัวอย่างนี้ จะทำให้เกิดข้อผิดพลาดเมื่อคุณพยายามให้มันแสดงค่าอื่นที่นอกเหนือจาก String และ Buffer นั่นหมายความว่าคุณควรใช้เมธอดนี้เมื่อต้องการควบคุมการแสดงผลด้วยตัวเอง และโปรแกรมของคุณรันบน Node.js

และในการแสดงผลการขึ้นบรรทัดใหม่ คุณสามารถควบคุมมันด้วยตัวเองโดยการใส่ตัวอักษรสำหรับการขึ้นบรรทัดใหม่ \n ลงไปบน String ที่ต้องการได้โดยตรง

process.stdout.write("Moving at light speed\n");
process.stdout.write("And I don't need\ngravity\n");

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

Moving at light speed
And I don't need
gravity

ในตอนนี้เราสามารถควบคุมการแสดงผลการขึ้นบรรทัดใหม่ได้ด้วยตัวเองแล้วโดยการใช้เมธอด process.stdout.write ของ Node.js

ในบทนี้ คุณได้เรียนรู้การแสดงผลข้อมูลออกทางหน้าจอในภาษา TypeScript ด้วยเมธอด console.log และ console.error สำหรับการแสดงผลปกติและการแสดงผลข้อผิดพลาด และการแสดงผลด้วยเมธอด process.stdout.write ของ Node.js