บทช่วยสอน TypeScript: รู้เกี่ยวกับพื้นฐานของ TypeScript

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

• รู้เบื้องต้นเกี่ยวกับ TypeScript
• ประเภท TypeScript
• ตัวแปร
• ตัวดำเนินการ
• ลูป
• ฟังก์ชั่น
• สตริง
• อาร์เรย์
• อินเทอร์เฟซ
• ชั้นเรียน
• วัตถุ
• TypeScript Use Case

รู้เบื้องต้นเกี่ยวกับ TypeScript

TypeScript คือส่วนเหนือของ JavaScript แบบพิมพ์ที่คอมไพล์เป็น JavaScript ธรรมดา TypeScript เป็นอ็อบเจ็กต์เชิงวัตถุที่มีคลาสอินเทอร์เฟซและภาษาโปรแกรมพิมพ์แบบคงที่เช่น ค # หรือ . ต้องใช้คอมไพเลอร์เพื่อคอมไพล์และสร้างในไฟล์ JavaScript โดยทั่วไป TypeScript เป็นเวอร์ชัน ES6 ของ JavaScript ที่มีคุณสมบัติเพิ่มเติมบางอย่าง

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

ไวยากรณ์:

ข้อความ var: string = 'ยินดีต้อนรับสู่ Edureka!' console.log (ข้อความ)

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

// สร้างโดย typescript 1.8.10 var message = 'ยินดีต้อนรับสู่ Edureka!' console.log (ข้อความ)

คุณสมบัติของ TypeScript

• ข้ามแพลตฟอร์ม: สามารถติดตั้งคอมไพเลอร์ TypeScript บนระบบปฏิบัติการใดก็ได้เช่น Windows, MacOS และ Linux

  
  
  

• ภาษาเชิงวัตถุ : TypeScript มีคุณสมบัติเช่น ชั้นเรียน , อินเทอร์เฟซและโมดูล ดังนั้นจึงสามารถเขียนโค้ดเชิงวัตถุสำหรับฝั่งไคลเอ็นต์เช่นเดียวกับการพัฒนาฝั่งเซิร์ฟเวอร์

• การตรวจสอบประเภทคงที่ : TypeScript ใช้การพิมพ์แบบคงที่และช่วยตรวจสอบประเภทในเวลาคอมไพล์ ดังนั้นคุณจะพบข้อผิดพลาดขณะเขียนโค้ดโดยไม่ต้องเรียกใช้สคริปต์

• ตัวเลือกการพิมพ์แบบคงที่ : TypeScript ยังอนุญาตให้พิมพ์แบบคงที่ซึ่งเป็นทางเลือกในกรณีที่คุณใช้การพิมพ์แบบไดนามิกของ JavaScript

• การจัดการ DOM : คุณสามารถใช้ TypeScript เพื่อจัดการ DOM เพื่อเพิ่มหรือลบองค์ประกอบ

• คุณสมบัติ ES 6 : TypeScript มีคุณสมบัติส่วนใหญ่ของ ECMAScript 2015 (ES 6, 7) ที่วางแผนไว้เช่นคลาสอินเทอร์เฟซฟังก์ชัน Arrow เป็นต้น

ข้อดีของการใช้ TypeScript

• TypeScript คือ รวดเร็วง่ายและง่ายต่อการเรียนรู้ และทำงานบนเบราว์เซอร์หรือเอ็นจิ้น JavaScript

• มันคือ คล้ายกัน ถึง JavaScript และใช้ไวยากรณ์และความหมายเดียวกัน

• ซึ่งจะช่วยให้นักพัฒนาแบ็กเอนด์เขียนส่วนหน้าได้ รหัสเร็วขึ้น .

• รหัส TypeScript สามารถเรียกได้จากไฟล์ โค้ด JavaScript ที่มีอยู่ . นอกจากนี้ยังทำงานร่วมกับเฟรมเวิร์กและไลบรารี JavaScript ที่มีอยู่โดยไม่มีปัญหาใด ๆ

• ไฟล์คำจำกัดความที่มีนามสกุล. d.ts ให้การสนับสนุนไลบรารี JavaScript ที่มีอยู่เช่น Jquery, D3.js เป็นต้นดังนั้นโค้ด TypeScript สามารถเพิ่มได้ ไลบรารี JavaScript การใช้คำจำกัดความประเภทเพื่อประโยชน์ของการตรวจสอบประเภทการเติมโค้ดอัตโนมัติและเอกสารประกอบในไลบรารี JavaScript ที่พิมพ์แบบไดนามิกที่มีอยู่

• มันมีคุณสมบัติจาก ES6 และ ES7 ที่สามารถทำงานในเอ็นจิ้น JavaScript ระดับ ES5 เช่น โหนด js .

เมื่อคุณเข้าใจแล้วว่า TypeScript คืออะไรมาดูบทช่วยสอน TypeScript นี้และดูประเภทต่างๆ

ประเภท TypeScript

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

สามารถแบ่งออกเป็นสองประเภทเช่น:

• ในตัว : ซึ่งรวมถึงตัวเลขสตริงบูลีนโมฆะโมฆะและไม่ได้กำหนด
• ผู้ใช้กำหนด : ประกอบด้วย Enumerations (enums) คลาสอินเทอร์เฟซอาร์เรย์และทูเพิล

ตอนนี้เรามาดูบทช่วยสอน TypeScript นี้และทำความเข้าใจเพิ่มเติมเกี่ยวกับตัวแปร

บทช่วยสอน TypeScript: ตัวแปร

ตัวแปรคือช่องว่างที่มีชื่อในหน่วยความจำซึ่งใช้ในการจัดเก็บค่า

ประเภทไวยากรณ์สำหรับการประกาศตัวแปรใน TypeScript ประกอบด้วยเครื่องหมายโคลอน (:) หลังชื่อตัวแปรตามด้วยประเภท คล้ายกับ JavaScript เราใช้ไฟล์ คำหลัก var เพื่อประกาศตัวแปร

มีสี่ตัวเลือกเมื่อเราประกาศตัวแปร:

var [ตัวระบุ]: [type-annotation] = value

var [ตัวระบุ]: [type-annotation]

var [ตัวระบุ] = ค่า

var [ระบุ]

ตัวอย่าง:

ชื่อ var: string = 'Daisy' var empid: number = 1001 console.log ('name' + name) console.log ('รหัสพนักงาน' + empid)

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

// สร้างโดย typescript 1.8.10 var name = 'Daisy' var empid = 1001 console.log ('name' + name) console.log ('รหัสพนักงาน:' + empid)

เอาท์พุต:

ชื่อ: เดซี่
รหัสพนักงาน: 1001

ตอนนี้เรามาดูหัวข้อถัดไปของบทช่วยสอน TypeScript ของเรากัน

ตัวดำเนินการ

ตัวดำเนินการใช้เพื่อกำหนดฟังก์ชันที่จะดำเนินการกับข้อมูล ข้อมูลที่ตัวดำเนินการทำงานเรียกว่าตัวถูกดำเนินการ มีหลายประเภท ตัวดำเนินการ ใน TypeScript เช่น:

• ตัวดำเนินการเลขคณิต
• ตัวดำเนินการทางตรรกะ
• ตัวดำเนินการเชิงสัมพันธ์
• ตัวดำเนินการ Bitwise
• ตัวดำเนินการมอบหมาย

ตัวดำเนินการเลขคณิต

ตัวอย่าง:

var num1: number = 10 var num2: number = 2 var res: number = 0 res = num1 + num2 console.log ('Sum:' + res) res = num1 - num2 console.log ('ความแตกต่าง:' + res) res = num1 * num2 console.log ('ผลิตภัณฑ์:' + res)

เอาท์พุต:

ผลรวม: 12
ความแตกต่าง: 8
สินค้า: 20

ตัวดำเนินการทางตรรกะ

ตัวอย่าง:

var avg: number = 20 var percent: number = 90 console.log ('Value of avg:' + avg + ', value of percent:' + percent) var res: boolean = ((avg> 50) && (percent> 80 )) console.log ('(เฉลี่ย> 50) && (เปอร์เซ็นต์> 80):', res)

เอาท์พุต:

มูลค่าเฉลี่ย: 20 ค่าเปอร์เซ็นต์: 90
(เฉลี่ย> 50) && (เปอร์เซ็นต์> 80): เท็จ

ตัวดำเนินการเชิงสัมพันธ์

ตัวอย่าง:

var num1: number = 10 var num2: number = 7 console.log ('Value of num1:' + num1) console.log ('Value of num2:' + num2) var res = num1> num2 console.log ('num1 มากกว่า num2: '+ res) res = num1
 เอาท์พุต: 
ค่า num1: 10 
 ค่าของ num2: 7 
 num1 มากกว่า num2: จริง 
 num1 น้อยกว่า num2: false
 ตัวดำเนินการ Bitwise 
 ตัวดำเนินการ 
 คำอธิบาย 
 Bitwise AND (&) 
ดำเนินการบูลีน AND กับอาร์กิวเมนต์จำนวนเต็มแต่ละบิต
 Bitwise หรือ (|) 
ดำเนินการบูลีนหรือการดำเนินการกับอาร์กิวเมนต์จำนวนเต็มแต่ละบิต
 Bitwise XOR (^) 
ดำเนินการหรือดำเนินการบูลีนเอกสิทธิ์เฉพาะบุคคลในอาร์กิวเมนต์จำนวนเต็มแต่ละบิต
 บิตไม่ (~) 
นี่คือตัวดำเนินการยูนารีและดำเนินการโดยการย้อนกลับบิตทั้งหมดในตัวถูกดำเนินการ
 เลื่อนซ้าย (<<) 
มันย้ายบิตทั้งหมดในตัวถูกดำเนินการตัวแรกไปทางซ้ายตามจำนวนตำแหน่งที่ระบุในตัวถูกดำเนินการที่สอง
 เลื่อนขวา (>>) 
ค่าของตัวถูกดำเนินการด้านซ้ายจะถูกย้ายไปทางขวาตามจำนวนบิตที่ระบุโดยตัวถูกดำเนินการด้านขวา
 ขวา Shift กับศูนย์ (>>>) 
มันคล้ายกับ >> ตัวดำเนินการยกเว้นว่าบิตที่เลื่อนไปทางซ้ายจะเป็นศูนย์เสมอ
ข้อใดต่อไปนี้เป็นตัวอย่างของข้อความควบคุม
 ตัวอย่าง: 
var a: number = 2 // การนำเสนอบิต 10 var b: number = 3 // การนำเสนอบิต 11 ผลลัพธ์ผลลัพธ์ var = (a & b) console.log ('(a & b) =>', ผลลัพธ์) ผลลัพธ์ = ( a | b) console.log ('(a | b) =>', ผลลัพธ์)
 เอาท์พุต: 
(a & b) => 2 
 (a | b) => 3
 ผู้ดำเนินการมอบหมาย 
 ตัวดำเนินการ 
 คำอธิบาย 
 การมอบหมายอย่างง่าย (=) 
กำหนดค่าจากตัวถูกดำเนินการด้านขวาไปยังตัวถูกดำเนินการด้านซ้าย
 เพิ่มและมอบหมาย (+ =) 
เพิ่มตัวถูกดำเนินการด้านขวาให้กับตัวถูกดำเนินการด้านซ้ายและกำหนดผลลัพธ์ให้กับตัวถูกดำเนินการด้านซ้าย
 ลบและมอบหมาย (- =) 
มันจะลบตัวถูกดำเนินการด้านขวาออกจากตัวถูกดำเนินการด้านซ้ายและกำหนดผลลัพธ์ให้กับตัวถูกดำเนินการด้านซ้าย
 คูณและกำหนด (* =) 
มันจะคูณตัวถูกดำเนินการด้านขวากับตัวถูกดำเนินการด้านซ้ายและกำหนดผลลัพธ์ให้กับตัวถูกดำเนินการด้านซ้าย
 แบ่งและมอบหมาย (/ =) 
มันแบ่งตัวถูกดำเนินการด้านซ้ายด้วยตัวถูกดำเนินการด้านขวาและกำหนดผลลัพธ์ให้กับตัวถูกดำเนินการด้านซ้าย
 ตัวอย่าง: 
var a: number = 12 var b: number = 10 a = b console.log ('a = b:' + a) a + = b console.log ('a + = b:' + a) a - = b คอนโซล .log ('a- = b:' + a)
 เอาท์พุต: 
a = b: 10 
 a + = b: 20 
 a - = b: 10
นี่คือตัวดำเนินการที่แตกต่างกัน ตอนนี้เรามาดูบทช่วยสอน TypeScript ของเราและเรียนรู้เกี่ยวกับลูป
 ลูป 
อาจมีสถานการณ์ที่จำเป็นต้องดำเนินการบล็อกโค้ดหลาย ๆ ครั้ง ก วน คำสั่งอนุญาตให้เราดำเนินการคำสั่งหรือกลุ่มของคำสั่งหลายครั้ง
ลูป TypeScript สามารถแบ่งได้เป็น:
 สำหรับ Loop 
 สำหรับห่วง เป็นการดำเนินการแบบวนซ้ำที่แน่นอน
 ไวยากรณ์: 
สำหรับ (นิพจน์แรกนิพจน์ที่สองนิพจน์ที่สาม) {// คำสั่งที่จะดำเนินการซ้ำ ๆ }
ที่นี่นิพจน์แรกจะถูกดำเนินการก่อนที่ลูปจะเริ่ม นิพจน์ที่สองคือเงื่อนไขสำหรับลูปที่จะดำเนินการ และนิพจน์ที่สามจะถูกดำเนินการหลังจากการดำเนินการของทุกบล็อกโค้ด
 ตัวอย่าง: 
สำหรับ (ให้ i = 0 i<2 i++) { console.log ('Execute block statement' + i) }
 เอาท์พุต: 
ดำเนินการคำสั่งบล็อก 0 
ดำเนินการคำสั่งบล็อก 1
 ในขณะที่วนซ้ำ 
ลูป while ดำเนินการคำสั่งทุกครั้งที่เงื่อนไขที่ระบุประเมินเป็นจริง
 ไวยากรณ์: 
ในขณะที่ (นิพจน์เงื่อนไข) {// code block to beecute}
 ตัวอย่าง: 
ให้ฉัน: หมายเลข = 1 ในขณะที่ (i<3) { console.log( 'Block statement execution no.' + i ) i++ }
 เอาท์พุต: 
การดำเนินการคำสั่งบล็อกหมายเลข 1 
การดำเนินการคำสั่งบล็อกหมายเลข 2
 อย.. ขณะวน 
ลูป do & hellip ขณะนั้นคล้ายกับลูป while ยกเว้นว่าจะไม่ประเมินเงื่อนไขในครั้งแรกที่ลูปทำงาน
 ไวยากรณ์: 
ทำ {// code block to beecute} while (condition expression)
 ตัวอย่าง: 
  
ให้ฉัน: number = 1 ทำ {console.log ('Block statement การดำเนินการ no.' + i) i ++} ในขณะที่ (i<3)
 เอาท์พุต: 
การดำเนินการคำสั่งบล็อกหมายเลข 1 
การดำเนินการคำสั่งบล็อกหมายเลข 2
นอกเหนือจากนี้ยังมีคำสั่ง break และ continue ใน TypeScript ที่ใช้ในการวนซ้ำ
 งบพัก 
คำสั่ง break ใช้เพื่อควบคุมโครงสร้าง การใช้คำสั่ง break ในลูปช่วยโปรแกรมในการออกจากลูป
 ตัวอย่าง: 
var i: number = 1 ในขณะที่ (i<=10) { if (i % 5 == 0) { console.log ('The first multiple of 5 between 1 and 10 is : '+i) break //exit the loop if the first multiple is found } i++ } //outputs 5 and exits the loop
 เอาท์พุต: 
ตัวคูณแรกของ 5 ระหว่าง 1 ถึง 10 คือ 5
 ดำเนินการต่อคำชี้แจง 
คำสั่งต่อจะข้ามคำสั่งที่ตามมาในการวนซ้ำปัจจุบันและนำตัวควบคุมกลับไปที่จุดเริ่มต้นของลูป
 ตัวอย่าง: 
var num: number = 0 จำนวน var: number = 0 สำหรับ (num = 0num<=10num++) { if (num % 2==0) { continue } count++ } console.log (' The count of odd values between 0 and 10 is: '+count)
 เอาท์พุต: 
จำนวนคี่ระหว่าง 0 ถึง 10 คือ: 5
นี่คือลูปต่างๆใน TypeScript ตอนนี้เรามาดูบทช่วยสอน TypeScript และทำความเข้าใจกับฟังก์ชันต่างๆ
 ฟังก์ชั่น 
ใน JavaScript ฟังก์ชั่น เป็นส่วนที่สำคัญที่สุดส่วนหนึ่งเนื่องจากเป็นภาษาโปรแกรมที่ใช้งานได้ ฟังก์ชันช่วยให้มั่นใจได้ว่าโปรแกรมสามารถบำรุงรักษาและใช้ซ้ำได้และจัดเป็นบล็อกที่อ่านได้ แม้ว่า TypeScript จะให้แนวคิดของคลาสและโมดูล แต่ฟังก์ชันก็ยังคงเป็นส่วนสำคัญของภาษา
 ฟังก์ชันที่มีชื่อ 
ฟังก์ชันที่มีชื่อใช้เพื่อประกาศและเรียกใช้ฟังก์ชันตามชื่อที่กำหนด
การเรียนรู้เชิงลึกกับการเรียนรู้ของเครื่องเทียบกับการจดจำรูปแบบ
 ตัวอย่าง: 
ฟังก์ชัน display () {console.log ('TypeScript Function')} display ()
 เอาท์พุต: 
ฟังก์ชัน TypeScript
 ฟังก์ชันนิรนาม 
ฟังก์ชันที่ไม่ระบุชื่อคือฟังก์ชันที่กำหนดให้เป็นนิพจน์ นิพจน์นี้ถูกเก็บไว้ในตัวแปร ฟังก์ชันเหล่านี้เรียกใช้โดยใช้ชื่อตัวแปรที่เก็บฟังก์ชันไว้
 ตัวอย่าง: 
ให้ทักทาย = function () {console.log ('TypeScript Function')} greeting ()
 เอาท์พุต: 
ฟังก์ชัน TypeScript
 ฟังก์ชันลูกศร 
สัญลักษณ์ลูกศรไขมันใช้สำหรับฟังก์ชันที่ไม่ระบุชื่อเช่นสำหรับนิพจน์ฟังก์ชัน เรียกอีกอย่างว่าฟังก์ชันแลมบ์ดาในภาษาอื่น ๆ
 ไวยากรณ์: 
(param1, param2, ... , paramN) => นิพจน์
การใช้ลูกศรอ้วน (=>) ช่วยลดความจำเป็นในการใช้คีย์เวิร์ด 'function' พารามิเตอร์จะถูกส่งผ่านในวงเล็บเหลี่ยมและนิพจน์ฟังก์ชันจะอยู่ภายในวงเล็บปีกกา {}
 ตัวอย่าง: 
ให้ sum = (x: number, y: number): number => {return x + y} sum (10, 30) // ส่งกลับ 40
 ฟังก์ชันโอเวอร์โหลด 
TypeScript ให้แนวคิดของการทำงานมากเกินไป ดังนั้นคุณสามารถมีหลายฟังก์ชันที่มีชื่อเดียวกัน แต่ประเภทพารามิเตอร์และประเภทผลตอบแทนต่างกัน
 ตัวอย่าง: 
function add (a: string, b: string): string function add (a: number, b: number): number return a + b} add ('Hello', 'Edureka') // ส่งกลับ 'Hello Edureka' add ( 10, 10) // ส่งกลับ 20
ในตัวอย่างข้างต้นเรามีฟังก์ชัน add () ที่เหมือนกันโดยมีการประกาศฟังก์ชันสองรายการและการใช้งานฟังก์ชันเดียว ลายเซ็นแรกมีสองพารามิเตอร์ของสตริงชนิดในขณะที่ลายเซ็นที่สองมีพารามิเตอร์สองตัวของหมายเลขประเภท
นี่คือฟังก์ชันประเภทต่างๆ ตอนนี้เรามาดูบทช่วยสอน TypeScript ของเราและทำความเข้าใจกับสตริงใน TypeScript
 บทช่วยสอน TypeScript: สตริง 
  เป็นข้อมูลดั้งเดิมอีกประเภทหนึ่งที่ใช้ในการจัดเก็บข้อมูลแบบข้อความ ค่าสตริงล้อมรอบด้วยเครื่องหมายคำพูดเดี่ยวหรือเครื่องหมายคำพูดคู่
 ไวยากรณ์: 
var var_name = สตริงใหม่ (สตริง)
มีคุณสมบัติที่แตกต่างกันของวิธีการที่มีอยู่ในวัตถุสตริงเช่น:
 ผู้สร้าง - ส่งคืนการอ้างอิงถึงฟังก์ชัน String ที่สร้างวัตถุ
 ความยาว - ส่งกลับค่าความยาวของสตริง
 ต้นแบบ - คุณสมบัตินี้ช่วยให้คุณสามารถเพิ่มคุณสมบัติและวิธีการให้กับวัตถุได้
 ตัวอย่าง: 
ให้ name = new String ('Welcome to Edureka!') console.log ('Message:' + name) console.log ('Length:' + name.length)
 เอาท์พุต: 
ข้อความ: ยินดีต้อนรับสู่ Edureka! 
 ความยาว: 19
 วิธีการสตริง 
รายการวิธีการในวัตถุสตริงประกอบด้วย:
 วิธี 
 คำอธิบาย 
 ถ่าน () 
มันส่งคืนอักขระที่ดัชนีที่ระบุ
 charCodeAt () 
ส่งคืนตัวเลขที่ระบุค่า Unicode ของอักขระที่ดัชนีที่กำหนด
 ประสาน () 
รวมข้อความของสองสตริงและส่งคืนสตริงใหม่
 indexOf () 
ส่งคืนดัชนีภายในอ็อบเจ็กต์สตริงการเรียกของการเกิดขึ้นครั้งแรกของค่าที่ระบุ
 lastIndexOf () 
ส่งคืนดัชนีภายในอ็อบเจ็กต์สตริงการเรียกของการเกิดครั้งสุดท้ายของค่าที่ระบุ
 การแข่งขัน() 
ใช้เพื่อจับคู่นิพจน์ทั่วไปกับสตริง
 localeCompare () 
ส่งคืนตัวเลขที่ระบุว่าสตริงอ้างอิงมาก่อนหรือหลังหรือเหมือนกับสตริงที่กำหนดในลำดับการจัดเรียง
 ค้นหา() 
สิ่งนี้ดำเนินการค้นหาการจับคู่ระหว่างนิพจน์ทั่วไปและสตริงที่ระบุ
 แทนที่() 
ใช้เพื่อค้นหาการจับคู่ระหว่างนิพจน์ทั่วไปและสตริงและเพื่อแทนที่สตริงย่อยที่ตรงกันด้วยสตริงย่อยใหม่
 ชิ้น () 
มันแยกส่วนของสตริงและส่งคืนสตริงใหม่
 แยก () 
แยกออบเจ็กต์ String เป็นอาร์เรย์ของสตริงโดยแยกสตริงออกเป็นสตริงย่อย
 สถานีย่อย () 
ส่งคืนอักขระในสตริงที่เริ่มต้นที่ตำแหน่งที่ระบุผ่านจำนวนอักขระที่ระบุ
 สตริงย่อย () 
จะส่งคืนอักขระในสตริงระหว่างดัชนีสองตัวในสตริง
 toLocaleLowerCase () 
tableau desktop 9 ผู้ร่วมงานที่มีคุณสมบัติเหมาะสม
อักขระภายในสตริงจะถูกแปลงเป็นตัวพิมพ์เล็กในขณะที่เกี่ยวข้องกับโลแคลปัจจุบัน
 toLocaleUpperCase () 
อักขระภายในสตริงจะถูกแปลงเป็นตัวพิมพ์ใหญ่ในขณะที่เกี่ยวข้องกับโลแคลปัจจุบัน
 toLowerCase () 
ส่งคืนค่าสตริงการโทรที่แปลงเป็นตัวพิมพ์เล็ก
 toUpperCase () 
ส่งคืนค่าสตริงการโทรที่แปลงเป็นตัวพิมพ์ใหญ่
 toString () 
ส่งคืนสตริงที่แสดงถึงวัตถุที่ระบุ
 มูลค่าของ() 
ส่งคืนค่าดั้งเดิมของออบเจ็กต์ที่ระบุ
 ตัวอย่าง: 
ให้ str: string = 'ยินดีต้อนรับสู่ Edureka' str.charAt (0) // ส่งกลับ 'w' str.charAt (2) // ส่งคืน 'l' 'ยินดีต้อนรับสู่ Edureka'.charAt (2) ส่งคืน' l 'ให้ str1 : string = 'welcome' ให้ str2: string = 'Edureka' str1.concat (str2) // ส่งคืน 'welcomeEdureka' str1.concat ('', str2) // ส่งคืน 'welcome Edureka' str1.concat ('' ถึง ' ') // ส่งกลับ' ยินดีต้อนรับสู่ '
เมื่อคุณรู้เกี่ยวกับสตริงแล้วเรามาดูบทช่วยสอน TypeScript นี้และทำความเข้าใจกับอาร์เรย์
 อาร์เรย์ใน TypeScript 
อัน อาร์เรย์ เป็นประเภทข้อมูลชนิดพิเศษที่เก็บค่าหลายประเภทของข้อมูลที่แตกต่างกันตามลำดับโดยใช้ไวยากรณ์พิเศษ องค์ประกอบอาร์เรย์ถูกระบุโดยจำนวนเต็มเฉพาะที่เรียกว่าตัวห้อยหรือดัชนีขององค์ประกอบ
 ไวยากรณ์: 
var array_name [: datatype] // การประกาศ array_name = [val1, val2, valn .. ] // การเริ่มต้น
 ตัวอย่าง: 
ให้ชื่อ: Array names = ['John', 'Daisy', 'Rachel'] ให้รหัส: Array ids = [101, 700, 321]
 วิธีการอาร์เรย์ 
นี่คือรายการของวิธีการ Array ที่แตกต่างกันซึ่งสามารถใช้เพื่อวัตถุประสงค์ที่แตกต่างกัน:
 วิธี 
 คำอธิบาย 
 กรอง() 
สร้างอาร์เรย์ใหม่พร้อมองค์ประกอบทั้งหมดของอาร์เรย์นี้ซึ่งฟังก์ชันการกรองที่ให้ไว้จะส่งกลับค่าจริง
 ทุก () 
ส่งคืนค่าจริงหากทุกองค์ประกอบในอาร์เรย์นี้เป็นไปตามฟังก์ชันการทดสอบที่ให้มา
 ประสาน () 
ส่งคืนอาร์เรย์ใหม่ที่ประกอบด้วยอาร์เรย์นี้รวมกับอาร์เรย์อื่น
 indexOf () 
ส่งคืนดัชนีแรกหรือน้อยที่สุดขององค์ประกอบภายในอาร์เรย์เท่ากับค่าที่ระบุ
 แต่ละ() 
เรียกใช้ฟังก์ชันสำหรับแต่ละองค์ประกอบในอาร์เรย์
 เข้าร่วม () 
รวมองค์ประกอบทั้งหมดของอาร์เรย์ลงในสตริง
 lastIndexOf () 
ส่งคืนดัชนีสุดท้ายหรือยิ่งใหญ่ที่สุดขององค์ประกอบภายในอาร์เรย์เท่ากับค่าที่ระบุ
 แผนที่() 
สร้างอาร์เรย์ใหม่พร้อมผลลัพธ์ของการเรียกใช้ฟังก์ชันที่จัดเตรียมไว้ให้กับทุกองค์ประกอบในอาร์เรย์นี้
 ดัน () 
เพิ่มองค์ประกอบอย่างน้อยหนึ่งรายการที่ส่วนท้ายของอาร์เรย์และส่งกลับความยาวใหม่ของอาร์เรย์
 ป๊อป () 
ลบองค์ประกอบสุดท้ายออกจากอาร์เรย์และส่งคืนองค์ประกอบนั้น
 ลด() 
ใช้ฟังก์ชันพร้อมกันกับค่าสองค่าของอาร์เรย์จากซ้ายไปขวาเพื่อลดค่าเป็นค่าเดียว
 ลดขวา () 
ใช้ฟังก์ชันพร้อมกันกับค่าสองค่าของอาร์เรย์จากขวาไปซ้ายเพื่อลดค่าเป็นค่าเดียว
 ย้อนกลับ () 
กลับลำดับขององค์ประกอบของอาร์เรย์
 กะ () 
ลบองค์ประกอบแรกออกจากอาร์เรย์และส่งคืนองค์ประกอบนั้น
 ชิ้น () 
แยกส่วนของอาร์เรย์และส่งคืนอาร์เรย์ใหม่
 บาง() 
มันจะคืนค่าเป็นจริงถ้าอย่างน้อยหนึ่งองค์ประกอบในอาร์เรย์นี้ตรงตามฟังก์ชันการทดสอบที่ให้มา
 เรียงลำดับ () 
จัดเรียงองค์ประกอบของอาร์เรย์
 toString () 
ส่งคืนสตริงที่แสดงอาร์เรย์และองค์ประกอบ
 ประกบ () 
เพิ่มและ / หรือลบองค์ประกอบจากอาร์เรย์
 คลาย () 
เพิ่มองค์ประกอบอย่างน้อยหนึ่งรายการที่ด้านหน้าอาร์เรย์และส่งกลับความยาวใหม่ของอาร์เรย์
 ตัวอย่าง: 
ชื่อ var: Array = ['John', 'Daisy', 'Tara'] name.sort () console.log (ชื่อ) // เอาต์พุต: ['Daisy', 'John', 'Tara'] console.log ( name.pop ()) // ผลลัพธ์: Tara name.push ('Rachel') console.log (name) // output: ['John', 'Daisy', 'Rachel']
ตอนนี้เรามาดูบทช่วยสอน TypeScript และเรียนรู้เกี่ยวกับอินเทอร์เฟซ
 อินเทอร์เฟซ TypeScript 
อินเทอร์เฟซเป็นโครงสร้างที่กำหนดสัญญาในแอปพลิเคชันของคุณ เป็นการกำหนดไวยากรณ์สำหรับคลาสที่จะปฏิบัติตาม มีเพียงการประกาศของสมาชิกและเป็นความรับผิดชอบของคลาสที่ได้มาในการกำหนดสมาชิก
 ตัวอย่าง: 
อินเทอร์เฟซพนักงาน {empID: number empName: string getSalary: (number) => number // arrow function getManagerName (number): string}
ในตัวอย่างข้างต้นไฟล์ พนักงาน อินเทอร์เฟซประกอบด้วยสองคุณสมบัติ empID และ empName . นอกจากนี้ยังรวมถึงการประกาศวิธีการ getSalaray ใช้ไฟล์ ฟังก์ชันลูกศร ซึ่งรวมถึงพารามิเตอร์ตัวเลขหนึ่งตัวและประเภทการส่งคืนตัวเลข getManagerName วิธีการถูกประกาศโดยใช้ฟังก์ชันปกติ
 TypeScript  ชั้นเรียน 
TypeScript แนะนำคลาสเพื่อให้สามารถใช้ประโยชน์จากเทคนิคเชิงวัตถุเช่นการห่อหุ้มและนามธรรม คลาสใน TypeScript ถูกคอมไพล์เป็นฟังก์ชัน JavaScript ธรรมดาโดยคอมไพเลอร์ TypeScript เพื่อทำงานข้ามแพลตฟอร์มและเบราว์เซอร์
ชั้นเรียนมีดังต่อไปนี้:
 ผู้สร้าง 
 คุณสมบัติ 
 วิธีการ 
 ตัวอย่าง: 
คลาสพนักงาน {empID: number empName: string constructor (ID: number, name: string) {this.empName = name this.empID = ID} getSalary (): number {return 40000}}
 มรดก 
รองรับ TypeScript มรดก เนื่องจากเป็นความสามารถของโปรแกรมในการสร้างคลาสใหม่จากคลาสที่มีอยู่ คลาสที่ขยายเพื่อสร้างคลาสที่ใหม่กว่านี้เรียกว่าคลาสพาเรนต์หรือซูเปอร์คลาส คลาสที่สร้างขึ้นใหม่เรียกว่าคลาสย่อยหรือคลาสย่อย
คลาสที่สืบทอดมาจากคลาสอื่นโดยใช้คีย์เวิร์ด 'expands' คลาสย่อยสืบทอดคุณสมบัติและวิธีการทั้งหมดยกเว้นสมาชิกส่วนตัวและตัวสร้างจากคลาสแม่ แต่ TypeScript ไม่สนับสนุนการสืบทอดหลายรายการ
 ไวยากรณ์: 
คลาส child_class_name ขยาย parent_class_name
 ตัวอย่าง: 
คลาส Person {name: string constructor (name: string) {this.name = name}} class Employee ขยาย Person {empID: number constructor (empID: number, name: string) {super (name) this.empID = empid} displayName (): void {console.log ('Name =' + this.name + ', Employee ID =' + this.empID)}} ให้ emp = พนักงานใหม่ (701, 'Jason') emp.displayName () // ชื่อ = เจสันรหัสพนักงาน = 701
เมื่อคุณรู้เกี่ยวกับคลาสแล้วเรามาดูบทช่วยสอน TypeScript นี้และเรียนรู้เกี่ยวกับ Objects กัน
 วัตถุใน TypeScript 
ออบเจ็กต์คืออินสแตนซ์ที่มีคู่คีย์ - ค่าต่างกัน ค่าสามารถเป็นค่าสเกลาร์หรือฟังก์ชันหรือแม้กระทั่งอาร์เรย์ของวัตถุอื่น ๆ
 ไวยากรณ์: 
var object_name = {key1:“ value1”, // ค่าสเกลาร์ key2:“ value”, key3: function () {// functions}, key4: [“ content1”,“ content2”]
วัตถุสามารถมีค่าสเกลาร์ฟังก์ชันและโครงสร้างเช่นอาร์เรย์และทูเปิล
 ตัวอย่าง: 
var person = {firstname: 'Danny', lastname: 'Green'} // เข้าถึงค่าวัตถุ console.log (person.firstname) console.log (person.lastname)
ในการคอมไพล์จะสร้างโค้ดเดียวกันใน JavaScript
 เอาท์พุต: 
แดนนี่ 
 เขียว
นี่คือองค์ประกอบสำคัญที่แตกต่างกันของ TypeScript ตอนนี้เรามาดูบทช่วยสอน TypeScript นี้และดูตัวอย่างเพื่อทำความเข้าใจกรณีการใช้งาน
 บทช่วยสอน TypeScript: ใช้กรณี 
ที่นี่เราจะเรียนรู้วิธีการแปลงไฟล์  เป็น TypeScript
เมื่อเราคอมไพล์ไฟล์ TypeScript มันจะสร้างไฟล์ JavaScript ที่มีชื่อเดียวกัน ที่นี่เราต้องตรวจสอบให้แน่ใจว่าไฟล์ JavaScript ดั้งเดิมของเราซึ่งทำหน้าที่เป็นอินพุตไม่สามารถอยู่ในไดเร็กทอรีเดียวกันได้ดังนั้น TypeScript จะไม่แทนที่ไฟล์เหล่านั้น
กระบวนการย้ายจาก JavaScript ไปยัง TypeScript ประกอบด้วยขั้นตอนต่อไปนี้:
 1. เพิ่มไฟล์ tsconfig.json ในโปรเจ็กต์ 
คุณต้องเพิ่มไฟล์ tsconfig.json ในโปรเจ็กต์ TypeScript ใช้ไฟล์ tsconfig.json สำหรับจัดการตัวเลือกการคอมไพล์ของโปรเจ็กต์เช่นไฟล์ที่คุณต้องการรวมและแยกออก
{'compilerOptions': {'outDir': './built', 'allowJs': true, 'target': 'es5'}, 'include': ['./src/**/*']}
 2. ผสานรวมกับเครื่องมือสร้าง 
โครงการ JavaScript ส่วนใหญ่มีเครื่องมือสร้างแบบบูรณาการเช่น gulp หรือ webpack คุณสามารถรวมโครงการกับ webpack ได้ด้วยวิธีต่อไปนี้:
รันคำสั่งต่อไปนี้บนเทอร์มินัล:
$ npm ติดตั้ง Awesome-typescript-loader source-map-loader
ในการรวม webpack คุณใช้ตัวโหลดสคริปต์ที่ยอดเยี่ยมร่วมกับซอร์ส - แมป - โหลดเดอร์เพื่อการดีบักซอร์สโค้ดที่ง่ายขึ้น
ประการที่สองผสานคุณสมบัติการกำหนดค่าโมดูลในไฟล์ webpack.config.js ของเราเพื่อรวมตัวโหลด
 3. ย้ายไฟล์. js ทั้งหมดไปที่ไฟล์. ts 
ในขั้นตอนนี้คุณต้องเปลี่ยนชื่อไฟล์. js เป็นไฟล์. ts ในทำนองเดียวกันหากไฟล์ใช้ JSX คุณจะต้องเปลี่ยนชื่อเป็น. tsx ตอนนี้ถ้าเราเปิดไฟล์นั้นในโปรแกรมแก้ไขที่รองรับ TypeScript โค้ดบางตัวอาจเริ่มให้ข้อผิดพลาดในการคอมไพล์ ดังนั้นการแปลงไฟล์ทีละไฟล์จะช่วยให้จัดการข้อผิดพลาดในการคอมไพล์ได้ง่ายขึ้น หาก TypeScript พบข้อผิดพลาดในการคอมไพล์ระหว่างการแปลงแสดงว่ายังสามารถแปลโค้ดได้
 4. ตรวจสอบข้อผิดพลาด 
หลังจากย้ายไฟล์ js ไปยังไฟล์ ts ทันที TypeScript จะเริ่ม Type Checking ของโค้ดของเรา ดังนั้นคุณอาจได้รับข้อผิดพลาดในการวินิจฉัยในโค้ด JavaScript
 5. ใช้ไลบรารี JavaScript ของบุคคลที่สาม 
โครงการ JavaScript ใช้ไลบรารีของบุคคลที่สามเช่น  หรือ Lodash ในการคอมไพล์ไฟล์ TypeScript จำเป็นต้องทราบประเภทของอ็อบเจ็กต์ทั้งหมดในไลบรารีเหล่านี้ ไฟล์นิยาม TypeScript Type สำหรับไลบรารี JavaScript มีอยู่แล้วที่ DefinelyTyped ดังนั้นจึงไม่จำเป็นต้องติดตั้งประเภทนี้จากภายนอก คุณต้องติดตั้งเฉพาะประเภทที่ใช้ในโครงการของเรา
สำหรับ jQuery คุณสามารถติดตั้งคำจำกัดความ:
$ npm install @ types / jquery
หลังจากนี้ทำการเปลี่ยนแปลงโครงการ JavaScript เรียกใช้เครื่องมือสร้าง ตอนนี้คุณควรมีโครงการ TypeScript ที่รวบรวมเป็น JavaScript ธรรมดาที่สามารถเรียกใช้ในเบราว์เซอร์ได้
ด้วยเหตุนี้เราจึงมาถึงตอนท้ายของบทช่วยสอน TypeScript นี้ ฉันหวังว่าคุณจะเข้าใจองค์ประกอบที่สำคัญทั้งหมดของ TypeScript
 ตรวจสอบไฟล์     โดย Edureka  การฝึกอบรมการรับรองการพัฒนาเว็บจะช่วยให้คุณเรียนรู้วิธีสร้างเว็บไซต์ที่น่าประทับใจโดยใช้ HTML5, CSS3, Twitter Bootstrap 3, jQuery และ Google API และปรับใช้กับ Amazon Simple Storage Service (S3) 
 มีคำถามสำหรับเรา? โปรดระบุไว้ในส่วนความคิดเห็นของ 'TypeScript Tutorial' แล้วเราจะติดต่อกลับไป