3 - Hello World!

เริ่มทดสอบโปรแกรมแรก และ การติดตั้งทั้งหมดของเราด้วย Hello World

Previous2 - Setting up & Tools Next4 - TypeScript Syntax

Last updated 3 years ago

Was this helpful?

3 - Hello World!

เริ่มทดสอบโปรแกรมแรก และ การติดตั้งทั้งหมดของเราด้วย Hello World

โอเคครับทุกคนนน หลังจากเราติดตั้งเรียบร้อยแล้ว มาสู่ Step ถัดไปนั่นก็คือการทดลองใช้งาน Hello World กันดีกว่า ! สำหรับใครที่สงสัยว่าทำไมต้องเป็น Hello World เอาง่าย ๆ มันเอาไว้ทดสอบว่า เจ้าพวกที่เราติดตั้งมาทั้งหมดเนี้ย มันพร้อมใช้งานไหมนั่นเอง ! ดังนั้น อย่ารอช้า ไปลุยกันเลยย

🔥 ขั้นตอนการสร้าง Hello World แบบง่าย ๆ

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

ต่อมาเมื่อเราทำการสร้างเรียบร้อยให้เรากำเนินการเขียนคำสั่งสำหรับแสดง Hello World ออกมา โดยในที่นี้เราจะประกาศตัวแปรชื่อ Message ที่มีประเภทข้อมูลเป็น string เก็บข้อความ "Hello World" ไว้ภายใน และ แสดงออกมาผ่านคำสั่ง console.log นั่นเอง ซึ่งจะได้โค้ดออกมาประมาณนี้

let message: string = 'Hello World';
console.log(message);

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

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

กรณีที่เราติดตั้ง Node.js ไว้อยู่แล้วให้เราทำการ Run โดยใช้งานคำสั่ง node HelloWorld.js ได้เลย

และ เมื่อเราลองไปดูในไฟล์ของ HelloWorld.js ที่ถูก Compiler สร้างขึ้นมาจะพบคำสั่งภายในไฟล์ดังกล่าวเป็นในลักษณะนี้นั่นเอง

var message = 'Hello World';
console.log(message);

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

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

เราจะได้เห็นว่าจริง ๆ แล้วการทำงานของ TypeScript Compiler ทำงานในลักษณะใด อย่างไร และ การแปลงในเรื่องของ Data Type ที่กลับไปเป็นไฟล์ .js แบบเดิม ๆ ซึ่งในบทต่อไป เราจะมาดูกันแบบไว ๆ ในเรื่องของ Syntax และ Data Types ไปพร้อมกันเลยคร้าบ ! ^^

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

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

Previous2 - Setting up & Tools Next4 - TypeScript Syntax

Last updated 3 years ago

Was this helpful?

🔥 ขั้นตอนการสร้าง Hello World แบบง่าย ๆ

let message: string = 'Hello World';
console.log(message);

var message = 'Hello World';
console.log(message);

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

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

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

| | |