TypeScript - ไวยากรณ์พื้นฐาน

ไวยากรณ์กำหนดชุดของกฎสำหรับการเขียนโปรแกรม ข้อกำหนดทุกภาษากำหนดไวยากรณ์ของตัวเอง โปรแกรม TypeScript ประกอบด้วย -

  • Modules
  • Functions
  • Variables
  • คำสั่งและนิพจน์
  • Comments

รหัส TypeScript แรกของคุณ

เริ่มต้นด้วยตัวอย่าง "Hello World" แบบดั้งเดิม -

var message:string = "Hello World" 
console.log(message)

ในการคอมไพล์จะสร้างโค้ด JavaScript ต่อไปนี้

//Generated by typescript 1.8.10
var message = "Hello World";
console.log(message);
  • บรรทัดที่ 1 ประกาศตัวแปรด้วยข้อความชื่อ ตัวแปรเป็นกลไกในการจัดเก็บค่าในโปรแกรม

  • บรรทัดที่ 2 พิมพ์ค่าของตัวแปรไปยังพร้อมต์ ในที่นี้คอนโซลหมายถึงหน้าต่างเทอร์มินัล บันทึกฟังก์ชัน()ใช้เพื่อแสดงข้อความบนหน้าจอ

คอมไพล์และรันโปรแกรม TypeScript

ให้เราดูวิธีการคอมไพล์และรันโปรแกรม TypeScript โดยใช้ Visual Studio Code ทำตามขั้นตอนด้านล่าง -

Step 1- บันทึกไฟล์ด้วยนามสกุล. ts เราจะบันทึกไฟล์เป็น Test.ts ตัวแก้ไขโค้ดจะทำเครื่องหมายข้อผิดพลาดในโค้ด (ถ้ามี) ขณะที่คุณบันทึก

Step 2- คลิกขวาที่ไฟล์ TypeScript ภายใต้ตัวเลือก Working Files ในบานหน้าต่างสำรวจของ VS Code เลือกเปิดในตัวเลือกพร้อมรับคำสั่ง

Step 3 - ในการคอมไพล์ไฟล์ให้ใช้คำสั่งต่อไปนี้บนหน้าต่างเทอร์มินัล

tsc Test.ts

Step 4- ไฟล์ถูกคอมไพล์เป็น Test.js ในการรันโปรแกรมที่เขียนขึ้นให้พิมพ์ดังต่อไปนี้ในเทอร์มินัล

node Test.js

ธงคอมไพเลอร์

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

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

ส. แฟล็กคอมไพเลอร์และคำอธิบาย
1.

--help

แสดงคู่มือช่วยเหลือ

2.

--module

โหลดโมดูลภายนอก

3.

--target

กำหนดเวอร์ชัน ECMA เป้าหมาย

4.

--declaration

สร้างไฟล์. d.ts เพิ่มเติม

5.

--removeComments

ลบความคิดเห็นทั้งหมดออกจากไฟล์เอาต์พุต

6.

--out

รวบรวมไฟล์หลายไฟล์เป็นไฟล์เอาต์พุตเดียว

7.

--sourcemap

สร้างไฟล์ sourcemap (.map)

8.

--module noImplicitAny

ปิดการใช้งานคอมไพลเลอร์จากการอนุมานประเภทใด ๆ

9.

--watch

เฝ้าดูการเปลี่ยนแปลงไฟล์และคอมไพล์ใหม่ได้ทันที

Note - สามารถรวบรวมไฟล์ได้หลายไฟล์พร้อมกัน

tsc file1.ts, file2.ts, file3.ts

ตัวระบุใน TypeScript

ตัวระบุคือชื่อที่กำหนดให้กับองค์ประกอบในโปรแกรมเช่นตัวแปรฟังก์ชัน ฯลฯ กฎสำหรับตัวระบุคือ -

  • ตัวระบุอาจมีทั้งอักขระและตัวเลข อย่างไรก็ตามตัวระบุไม่สามารถขึ้นต้นด้วยตัวเลข

  • ตัวระบุไม่สามารถใส่สัญลักษณ์พิเศษยกเว้นขีดล่าง (_) หรือเครื่องหมายดอลลาร์ ($)

  • ตัวระบุไม่สามารถเป็นคำหลัก

  • พวกเขาต้องมีเอกลักษณ์

  • ตัวระบุเป็นกรณี ๆ ไป

  • ตัวระบุต้องไม่มีช่องว่าง

ตารางต่อไปนี้แสดงตัวอย่างของตัวระบุที่ถูกต้องและไม่ถูกต้อง -

ตัวระบุที่ถูกต้อง ตัวระบุไม่ถูกต้อง
ชื่อจริง Var
ชื่อจริง ชื่อจริง
num1 ชื่อจริง
ผลลัพธ์ $ 1 หมายเลข

TypeScript ─คำหลัก

คำหลักมีความหมายพิเศษในบริบทของภาษา ตารางต่อไปนี้แสดงรายการคำหลักบางคำใน TypeScript

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

ช่องว่างและเส้นแบ่ง

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

TypeScript คำนึงถึงขนาดตัวพิมพ์

TypeScript คำนึงถึงขนาดตัวพิมพ์ ซึ่งหมายความว่า TypeScript แยกความแตกต่างระหว่างอักขระตัวพิมพ์ใหญ่และตัวพิมพ์เล็ก

อัฒภาคเป็นทางเลือก

คำสั่งแต่ละบรรทัดเรียกว่า a statement. อัฒภาคเป็นทางเลือกใน TypeScript

Example

console.log("hello world")
console.log("We are learning TypeScript")

บรรทัดเดียวสามารถมีหลายคำสั่ง อย่างไรก็ตามข้อความเหล่านี้ต้องคั่นด้วยอัฒภาค

ความคิดเห็นใน TypeScript

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

TypeScript รองรับความคิดเห็นประเภทต่อไปนี้ -

  • Single-line comments ( // ) - ข้อความใด ๆ ระหว่าง a // และท้ายบรรทัดจะถือว่าเป็นความคิดเห็น

  • Multi-line comments (/* */) - ความคิดเห็นเหล่านี้อาจครอบคลุมหลายบรรทัด

Example

//this is single line comment 
 
/* This is a  
   Multi-line comment 
*/

TypeScript และ Object Orientation

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

  • Object- วัตถุคือการแสดงตามเวลาจริงของเอนทิตีใด ๆ ตาม Grady Brooch วัตถุทุกชิ้นต้องมีคุณสมบัติสามประการ -

    • State - อธิบายโดยคุณลักษณะของวัตถุ

    • Behavior - อธิบายว่าวัตถุจะทำงานอย่างไร

    • Identity - ค่าเฉพาะที่แยกความแตกต่างของวัตถุจากชุดของวัตถุที่คล้ายกัน

  • Class- คลาสในแง่ของ OOP คือพิมพ์เขียวสำหรับสร้างวัตถุ คลาสห่อหุ้มข้อมูลสำหรับออบเจ็กต์

  • Method - วิธีการอำนวยความสะดวกในการสื่อสารระหว่างวัตถุ

Example: TypeScript and Object Orientation

class Greeting { 
   greet():void { 
      console.log("Hello World!!!") 
   } 
} 
var obj = new Greeting(); 
obj.greet();

ตัวอย่างข้างต้นกำหนดระดับอวยพร ชั้นมีวิธีการทักทาย () วิธีนี้จะพิมพ์สตริง“ Hello World” บนเทอร์มินัล newคีย์เวิร์ดสร้างอ็อบเจกต์ของคลาส (obj) วัตถุที่เรียกวิธีการทักทาย ()

ในการคอมไพล์จะสร้างโค้ด JavaScript ต่อไปนี้

//Generated by typescript 1.8.10
var Greeting = (function () {
   function Greeting() {
   }
   Greeting.prototype.greet = function () {
      console.log("Hello World!!!");
   };
	return Greeting;
}());

var obj = new Greeting();
obj.greet()

ผลลัพธ์ของโปรแกรมข้างต้นแสดงไว้ด้านล่าง -

Hello World!!!