วิธีการเริ่มต้นด้วย TypeScript

Sep 14, 2025
วิธีการ

TypeScript เป็นหนึ่งในกลุ่มของภาษาที่ใช้ จาวาสคริปต์ รันไทม์เป็นสภาพแวดล้อมการดำเนินการ:. P ที่มีโค้ด TysScript ถูกรวบรวมเป็น JavaScript ปกติซึ่งสามารถเรียกใช้โดยเบราว์เซอร์

Jeremy Ashkenas ทำแนวคิดนี้เป็นที่นิยมด้วยภาษา CoffeeScript ของเขา แต่น่าเศร้าที่ไวยากรณ์ที่ค่อนข้างย้อนกลับเป็นเรื่องยากที่จะเรียนรู้สำหรับนักพัฒนาที่คุ้นเคยกับ C # หรือ Visual Basic

เนื่องจาก Microsoft ขยายเป็นเทคโนโลยี Web 2.0 จึงเลือกที่จะรับแรงบันดาลใจจาก Jeremy Ashkenas เนื่องจากความสามารถของ Visual Studio นักพัฒนาสามารถแฮ็คได้ในขณะที่ทำกำไรจากส่วนขยายภาษาต่างๆ

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

01. ติดตั้ง Visual Studio

Visual Studio 2017 comes with a new installer; the required features are split into payloads to make deployment easier

Visual Studio 2017 มาพร้อมกับตัวติดตั้งใหม่ คุณสมบัติที่ต้องการแบ่งออกเป็น Payloads เพื่อให้การปรับใช้ง่ายขึ้น

แม้ว่า Typescript ยังสามารถใช้กับ Linux หรือ MacOS ได้หรือไม่เราจะยึดครอง IDE อย่างเป็นทางการของ Microsoft ดาวน์โหลด Visual Studio 2017 Free Edition ของ Visual Studio 2017 จาก Microsoft ที่นี่ และตรวจสอบให้แน่ใจว่าได้ทำเครื่องหมายเพย์โหลด ASP.NET ในระหว่างการปรับใช้

02. เพิ่ม SDK

เนื่องจากจังหวะการปล่อยที่รวดเร็วของ Typescript, Visual Studio จำเป็นต้องขยายด้วยโมดูล SDK ซึ่งสามารถดาวน์โหลดได้จาก ไซต์ Microsoft ที่นี่ . เพียงเรียกใช้โปรแกรมติดตั้งราวกับว่าเป็นแอปพลิเคชัน Windows มาตรฐาน

03. ดาวน์โหลด Typescript สำหรับจริง

มันจะไม่เป็น Microsoft หากไม่มีความยุ่งยากเพิ่มเติมบางอย่างที่เกี่ยวข้อง: ในขณะที่ SDK อัพเกรดการติดตั้ง Visual Studio ของคุณคอมไพเลอร์ TSC จริงจะไม่ถูกเพิ่มเข้าไปในบรรทัดคำสั่งของคุณ ปัญหานี้ได้รับการแก้ไขอย่างดีที่สุดโดยใช้ตัวจัดการแพ็กเกจ NPM ของ node.js บนบรรทัดคำสั่ง

PS C: \ ผู้ใช้ \ Tamha \ Download & GT; การติดตั้ง NPM -G Typescript

C: \ ผู้ใช้ \ tamha \ appdata \ โรมมิ่ง \ npm \ tsc - & gt; C: \ ผู้ใช้ \ tamha \ appdata \ โรมมิ่ง \ npm \ node_modules \ typescript \ bin \ tsc

C: \ ผู้ใช้ \ tamha \ appdata \ โรมมิ่ง \ npm \ tsserver - & gt; C: \ ผู้ใช้ \ tamha \ appdata \ โรมมิ่ง \ npm \ node_modules \ typescript \ bin \ tsserver

C: \ ผู้ใช้ \ tamha \ appdata \ โรมมิ่ง \ npm

`- [email protected]

04. แยกออกจากโครงการ

Visual Studio คาดว่าจะทำงานในกระบวนการทางออกที่เป็นศูนย์กลาง: ในขณะที่น่าสนใจนี่เป็นสิ่งที่เหมาะสำหรับความต้องการของเรา ให้สร้างไฟล์ที่เรียกว่า worker.ts และวางไว้ในที่ที่สะดวกในระบบไฟล์ของคุณ เปิดด้วยการลากเข้าไปใน Visual Studio และวางไว้ในแถบเครื่องมือที่ด้านบน ถัดไปปรับเปลี่ยนเนื้อหาเพื่อรวมรหัสต่อไปนี้: 

 ฟังก์ชั่น Sayoi () {
  Alert ("Oi!");
}
Sayoi ();

05. สร้างจุดเข้า

ดังที่ได้กล่าวไว้ในการแนะนำไฟล์. TTS ไม่สามารถทำอะไรได้มาก เนื่องจากให้ดำเนินการสร้างไฟล์ที่เรียกว่า index.html ซึ่งจะต้องอยู่ในโฟลเดอร์เดียวกัน ถัดไปเพิ่มรหัสโครงกระดูกที่แสดงพร้อมกับขั้นตอนนี้ มันโหลดเอาต์พุตของคอมไพเลอร์และรันราวกับว่ามันเป็นจาวาสคริปต์อื่น ๆ 

 & lt; html & gt;
  & lt; หัว & gt;
  & lt; สคริปต์ src = "worker.js" & gt; & lt; / script & gt;
  & lt; / head & gt;
  & lt; ร่างกาย & gt; & lt; / body & gt;
& lt; / html & gt;

06. คอมไพล์และวิ่ง

ขั้นตอนต่อไปเกี่ยวข้องกับการรวมไฟล์. ths ด้วยตนเอง เปิด PowerShell และป้อนคำสั่ง TSC ตามด้วยชื่อของไฟล์อินพุต โดยค่าเริ่มต้นไฟล์เอาต์พุตจะแชร์ชื่อไฟล์ฐาน แต่จะมีส่วนต่อขยายของ. js แทน. ths ในที่สุดเปิดไฟล์ index.html ในเบราว์เซอร์ที่มีให้เลือกเพื่อพิสูจน์ลักษณะของกล่องข้อความ 

 PS C: \ ผู้ใช้ \ Tamha \ Downloads & GT; tsc. \ คนงาน

07. พิมพ์

Use this reference table to find basic static types

ใช้ตารางอ้างอิงนี้เพื่อค้นหาประเภทสแตติกพื้นฐาน

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

08. ลองใช้

In normal JavaScript, this error would be found only when the line in question gets invoked

ใน JavaScript ปกติข้อผิดพลาดนี้จะพบได้เฉพาะเมื่อบรรทัดที่มีปัญหาได้รับการเรียกใช้

การกำหนดประเภทตัวแปร TypeScript เกิดขึ้นผ่าน 'A:' วางไว้หลังจากชื่อตัวแปร ให้เราปรับเปลี่ยนฟังก์ชั่น OI ของเราเพื่อใช้ตัวเลขและให้เราส่งต่อในสตริงแทน ในที่สุดเรียกคอมไพเลอร์ TSC อีกครั้งเพื่อฉลองสายตาของคุณในข้อความแสดงข้อผิดพลาดที่แสดงในภาพหน้าจอด้านบน - Visual Studio โดยบังเอิญจะเน้นบรรทัดที่เป็นปัญหา 

 ฟังก์ชั่น Sayoi (Whattosay: หมายเลข) {
  แจ้งเตือน (whattosay);
}
Sayoi ("สวัสดี");

09. หลีกเลี่ยงต้นแบบ

Javascript ใช้การวางแนววัตถุผ่านการสร้างต้นแบบ: รูปแบบของรหัสที่ผิดปกติใน. NET และ C / C ++ โลก Typescript แก้ปัญหานี้ได้ด้วยการอนุญาตให้มีการสร้างชั้นเรียน - กระบวนการที่แสดงในตัวอย่างที่มาพร้อมกับขั้นตอนนี้ 

 Class Imagine {
  Myresult สาธารณะ: จำนวน;
  MYA สาธารณะ: จำนวน;
  MYB สาธารณะ: จำนวน;
  Constructor (_A: หมายเลข, _b: หมายเลข)
  {
  นี่.myresult = _a + _b;
  นี่คือ. mya = _a;
  }
}

10. ชื่นชมประชาชน

The holding values created by setting the public attribute get populated automatically

ค่าการถือครองที่สร้างขึ้นโดยการตั้งค่าแอตทริบิวต์สาธารณะได้รับการเติมข้อมูลโดยอัตโนมัติ

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

 Class Imagine {
  Myresult สาธารณะ: จำนวน;
  // MYA สาธารณะ: จำนวน;
  Constructor (Public MYA: จำนวนสาธารณะ _b: หมายเลข)
  {
  นี่.myresul = mya + _b;
  นี่.mya = mya;
  }
}

11. วิธีการและตัวอย่าง

ให้เราขยายคลาสตัวอย่างของเราโดยให้วิธีการที่เข้าถึงค่าที่เก็บไว้ใน myresult และ mya และเอาต์พุตบนหน้าจอ ในที่สุดพารามิเตอร์ใหม่จะใช้ในการสร้างอินสแตนซ์ของคลาส - ใช้สำหรับการเรียกใช้วิธีการ 

 Class Imagine {
  Myresult สาธารณะ: จำนวน;
  . . .
  สาธารณะกล่าวว่า (): เป็นโมฆะ {
  แจ้งเตือน (..myresult);
  }
}
ให้ myimagine: ลองนึกภาพ = นิวจินตนาการ (2, 2);
myimagine.saysomething ();

12. ใช้คุณสมบัติที่มีมนต์ขลัง

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

 Class Imagine {
  Myresult สาธารณะ: จำนวน;
  Constructor (Public Mya: จำนวน MYB สาธารณะ: หมายเลข)
  {
  นี่.myresult = mya + myb;
  }
  สาธารณะกล่าวว่า (): เป็นโมฆะ {
  การแจ้งเตือน (นี่.mya + "" + นี้ ..myb);
  }
}

13. ดำเนินการสืบทอด

Our small example program proves that TypeScript satisfies the core tenets of object inheritance

โปรแกรมตัวอย่างเล็ก ๆ ของเราพิสูจน์ให้เห็นว่า Typescript เป็นไปตามหลักเกณฑ์หลักของการสืบทอดวัตถุ

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

 ชั้นเรียนในอนาคตขยายจินตนาการ
{
  สาธารณะกล่าวว่า (): เป็นโมฆะ {
  console.log (..mya);
  }
}

14. วิเคราะห์การเขียนทับ

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

 ให้ myimagine: ลองนึกภาพ = อนาคตใหม่ (2, 2);
myimagine.saysomething ();
ให้ myfuture: อนาคต = อนาคตใหม่ (9, 9);
myfuture.saysomething ();

15. วิเคราะห์การเขียนทับ Redux

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

16. การเข้าถึงที่ จำกัด

การเปิดเผยตัวแปรสมาชิกที่มีตัวดัดแปลงสาธารณะไม่เป็นที่นิยม: หลังจากทั้งหมดจะควบคุมสิ่งที่ผู้ใช้ทำอะไรกับเนื้อหาของตัวแปร Accessors Typescript ช่วยให้คุณสามารถแก้ไขปัญหานี้ในแฟชั่นที่คล้ายกับ OOP แบบดั้งเดิม โปรดทราบว่าสมาชิกแบบอ่านอย่างเดียวได้รับการสนับสนุน แต่การใช้คุณสมบัตินี้ต้องใช้การเปิดใช้งานการสนับสนุน ECMASCript5 

 สาธารณะ _mycache: สตริง;
  รับ FullCache (): string {
  ส่งคืนนี้ ._mycache;
  }
  ตั้งค่า FullCache (Newx: String) {
  ถ้า (newx == "สวัสดี") {
  this._mycache = newx;
  }
  อื่น {
  console.log ("ข้อมูลผิด!");
  }
  }

17. ทำให้เป็นนามธรรม

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

 คลาสนามธรรมลองนึกภาพ {
  Myresult สาธารณะ: จำนวน;
  นามธรรม Sayname (): เป็นโมฆะ;
  Constructor (Public MYA: หมายเลข MYB สาธารณะ: หมายเลข) {
  นี่.myresult = mya + myb;
  }
  สาธารณะกล่าวว่า (): เป็นโมฆะ {
  การแจ้งเตือน (นี่.mya + "" + นี้ ..myb);
  }
}
ชั้นเรียนในชั้นเรียนขยายจินตนาการ {
  . . .
  Public Sayname () {
  console.log ("สวัสดี");
  }
}

18. สร้างส่วนต่อประสาน

เนื่องจากโครงสร้างวัตถุมีความซับซ้อนมากขึ้นนักพัฒนามักพบว่าตัวเองเผชิญกับสถานการณ์ที่ชั้นหนึ่งใช้ตรรกะหลายบิตหลายชั้น ในกรณีนี้อินเทอร์เฟซทำให้วิธีการแก้ปัญหาที่ดี - ตัวอย่างแสดงสิ่งที่คาดหวัง 

 อินเทอร์เฟซ datainterface {
  ฟิลด์: หมายเลข;
  WorkerMethod (): เป็นโมฆะ;
}

19. ใช้งาน

ในกรณีของชั้นเรียนข้างต้นอินเทอร์เฟซเราไม่ดีถ้าเราไม่สามารถใช้งานได้ โชคดีที่การใช้งานนั้นไม่ยากโดยเฉพาะอย่างยิ่ง: โปรดทราบว่าผู้เขียนอินเตอร์เฟสสามารถนอกจากนี้ประกาศส่วนต่าง ๆ ของการสร้างของพวกเขาที่จะเป็นตัวเลือก 

 ผู้ปฏิบัติงานชั้นเรียนดำเนินการ datainterface {
  ฟิลด์: หมายเลข;
  WorkerMethod (): เป็นโมฆะ {
  โยนข้อผิดพลาดใหม่ ("วิธีการไม่ได้ดำเนินการ");
  }
  }

20. ใช้คลาสทั่วไป

คอมไพเลอร์แบบ Typescript บังคับใช้การตรวจสอบความถูกต้องของตัวแปรที่เข้มงวด เมื่อทำงานกับคลาสเก็บข้อมูลทั่วไปให้คุณปล่อยให้ผู้ใช้ปลายทางกำหนดประเภทที่จะจัดการ นอกจากนี้ TypeScript ยังช่วยให้องค์ประกอบทั่วไปอื่น ๆ เช่นฟังก์ชั่นดังที่แสดงในข้อมูล (Tautological) ที่นำมาจากเอกสาร 

 // ฟังก์ชั่นทั่วไป
ฟังก์ชั่นข้อมูลประจำตัว (arg: number): หมายเลข {
  ส่งคืน arg;
}
// คลาสทั่วไป
Class GenericNumber & LT; T & GT; {
  ศูนย์: t;
  เพิ่ม: (x: t, y: t) = & gt; t; }

21. คำถามของการแจงนับ

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

 enum parserstate {
  idle = 1,
  อ่าน 0
  อ่าน 1
}
Class Imagine {
  Mystate สาธารณะ: ParSerstate;
  Constructor (Public Mya: จำนวน MYB สาธารณะ: หมายเลข)
  {
นี่.mystate = parserstate.idle;

22. เรียนรู้เพิ่มเติม

ครอบคลุมภาษาที่ซับซ้อนเนื่องจาก typescript ในบทความเดียวเป็นไปไม่ได้เกือบ มองไปที่ ตัวอย่างของไซต์ TypeScript เพื่อหาข้อมูลเพิ่มเติมเกี่ยวกับการผูกภาษา

บทความนี้ได้รับการตีพิมพ์ครั้งแรกในฉบับที่ 266 นักออกแบบเว็บไซต์ นิตยสารออกแบบเว็บสร้างสรรค์ - เสนอแบบฝึกหัดผู้เชี่ยวชาญแนวโน้มที่ทันสมัยและทรัพยากรฟรี ซื้อปัญหา 266 ที่นี่ หรือ สมัครสมาชิกกับนักออกแบบเว็บไซต์ที่นี่ .

ข้อเสนอคริสต์มาสพิเศษ: ประหยัดสูงสุดถึง 49% สำหรับการสมัครสมาชิกกับนักออกแบบเว็บไซต์ สำหรับคุณหรือเพื่อนสำหรับคริสต์มาส มันเป็นข้อเสนอที่ จำกัด ดังนั้นย้ายอย่างรวดเร็ว ...

บทความที่เกี่ยวข้อง:

  • 20 JavaScript Tools เพื่อเป่าจิตใจของคุณ
  • เรียนรู้ที่จะทำให้การเข้าถึงจาวาสคริปต์ของคุณเข้าถึงได้
  • ตอบคำถาม Javascript ทั่วไป 12 ข้อ

วิธีการ - บทความยอดนิยม

วิธีการแสดงผลพื้นผิวโปร่งใสจริง

วิธีการ Sep 14, 2025

การสร้างวัสดุที่โปร่งใสเช่นกระจกดูเหมือนง่า..

Anatomy MasterClass: สมบูรณ์แบบตัวเลขของคุณ

วิธีการ Sep 14, 2025

ใน MasterClass นี้ฉันจะเปิดเผยขั้นตอนพื้นฐานที่คุณต�..

วาดฉากเทพนิยายคลาสสิกกับ Procreatee

วิธีการ Sep 14, 2025

Procreate ได้กลายเป็นแอพพลิเคชั่นการวาดภาพดิจิทัล�..

วิธีการสร้างโลโก้ย้อนยุคกับนักออกแบบ Affinity

วิธีการ Sep 14, 2025

ใช้งานง่ายและมีเครื่องมือสร้างสรรค์จำนวนหนึ..

วิธีการทาสีเพชรประดับที่น่ารื่นรมย์

วิธีการ Sep 14, 2025

ต้นกำเนิดของการวาดภาพขนาดเล็กทอดยาวไปถึงยุค..

วิธีการทาสีฉากป่าแฟนตาซีในฝัน

วิธีการ Sep 14, 2025

จิตรกรโรโคโคในศตวรรษที่ 18 ใช้จินตนาการจานสีฝ�..

สร้างเลย์เอาต์ที่ซับซ้อนด้วย Postcss-Flexbox

วิธีการ Sep 14, 2025

FlexBox เป็นเครื่องมือที่ยอดเยี่ยมสำหรับการลด CSS BLOAT..

สร้างผลไฟ 3 มิติ

วิธีการ Sep 14, 2025

ไฟไหม้น้ำท่วมและการทำลายเป็นงานที่พบบ่อยที่..

หมวดหมู่