TypeScript บทเรียน: อินเทอร์เฟซ, เอนัม และอาร์เรย์ คืออะไร

ความหมายของ TypeScript?

TypeScript เป็น superset ของ Javaต้นฉบับ TypeScript เป็นภาษาโปรแกรมเชิงวัตถุที่รองรับคลาส อินเทอร์เฟซ และอื่นๆ เป็นภาษาโอเพนซอร์สที่พัฒนาโดย Microsoft ซึ่งรวบรวมโค้ดแบบคงที่ Javaสคริปต์นี้สามารถใช้งานได้ง่ายในเบราว์เซอร์หรือใน Nodejs

รองรับฟีเจอร์ล่าสุดทั้งหมดที่เปิดตัวสำหรับ ECMAScript TypeScriptและนอกจากนี้ TypeScript มีคุณสมบัติเชิงวัตถุเฉพาะตัว เช่น อินเทอร์เฟซ การประกาศตัวแปรแบบแอมเบียนต์ และการสืบทอดคลาส ซึ่งช่วยในการพัฒนาping แอปพลิเคชันขนาดใหญ่ที่หากไม่เช่นนั้นแล้วจะสร้างได้ยาก Javaต้นฉบับ.

ความสัมพันธ์เป็นแบบทิศทางเดียว ทุกค่าที่ถูกต้อง Javaไฟล์สคริปต์ถูกต้องแล้ว TypeScriptแต่ในทางกลับกันนั้นไม่เป็นความจริง เพราะคำอธิบายประเภทมีอยู่เฉพาะใน TypeScript และจะถูกลบออกในระหว่างกระบวนการคอมไพล์

ทำไมต้องใช้ TypeScript?

ต่อไปนี้คือประโยชน์ที่สำคัญของการใช้งาน TypeScript:

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

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

TypeScript ประวัติขององค์กร

มาดูกันว่ามีเหตุการณ์สำคัญอะไรบ้างในประวัติศาสตร์ของ... TypeScript:

• หลังจากสองปีของการพัฒนาภายในที่ Microsoft, TypeScript เวอร์ชัน 0.9 เปิดตัวในปี 2013
• TypeScript เวอร์ชัน 1.0 ซึ่งเพิ่มการรองรับเจเนริกส์ ได้ถูกปล่อยออกมาในงาน Build 2014
• ในเดือนกรกฎาคม 2014 ใหม่ TypeScript มีคอมไพเลอร์รุ่นใหม่ที่เร็วกว่ารุ่นก่อนถึงห้าเท่าออกมาแล้ว
• ในเดือนกรกฎาคม 2015 ได้มีการเพิ่มการรองรับโมดูล ES6, คีย์เวิร์ด namespace, for…of และ decorators
• ในเดือนพฤศจิกายน 2016 ได้มีการเพิ่มประเภทแผนที่ ประเภทคีย์และประเภทการค้นหา รวมถึงการคงค่าและการกระจายของอ็อบเจ็กต์
• เมื่อวันที่ 27 มีนาคม 2018 ได้มีการเพิ่มประเภทเงื่อนไขและคีย์ออฟที่ได้รับการปรับปรุงพร้อมประเภทจุดตัด
• TypeScript เวอร์ชัน 5.0 ซึ่งวางจำหน่ายในเดือนมีนาคม 2023 ได้ปรับปรุงโปรแกรมตกแต่งภาพให้ทันสมัยยิ่งขึ้น และลดขนาดแพ็กเกจลง
• TypeScript เวอร์ชัน 6.0 เปิดตัวในเดือนมีนาคม 2026 ซึ่งเป็นเวอร์ชันสุดท้ายที่พัฒนาต่อยอดจากเวอร์ชันก่อนหน้า Javaโค้ดเบสของสคริปต์
• TypeScript เวอร์ชัน 7.0 เปลี่ยนคอมไพเลอร์ไปใช้การใช้งาน Go ดั้งเดิม ซึ่ง Microsoft รายงานว่าเร็วกว่าเวอร์ชัน 6.0 ประมาณสิบเท่า

ใครใช้ TypeScript?

TypeScript ไม่ใช่ตัวเลือกเฉพาะกลุ่มอีกต่อไปแล้ว มันเป็นพื้นฐานสำคัญของเครื่องมือ front-end และ back-end ที่ใช้กันอย่างแพร่หลายหลายอย่าง และรายการด้านล่างนี้แสดงให้เห็นว่าผู้เริ่มต้นมีโอกาสพบเจอกับมันได้ที่ไหนมากที่สุด

• เชิงมุม: เฟรมเวิร์ก Angular เขียนด้วยภาษา TypeScriptและคาดว่าโค้ดแอปพลิเคชันจะถูกเขียนด้วยภาษาดังกล่าวเช่นกัน
• โปรเจ็กต์ React และ Vue: ทั้งสองระบบนิเวศจัดส่งสินค้าอย่างเป็นทางการ TypeScript เทมเพลตส่วนใหญ่ และโปรแกรมเริ่มต้นใช้งานสมัยใหม่ส่วนใหญ่เปิดใช้งานฟังก์ชันนี้โดยค่าเริ่มต้น
• ส่วนแบ็กเอนด์ Node.js: เฟรมเวิร์กฝั่งเซิร์ฟเวอร์ เช่น NestJS ถูกสร้างขึ้นโดยคำนึงถึงสิ่งต่อไปนี้เป็นหลัก TypeScript ชั้นเรียนและนักตกแต่ง
• เครื่องมือสำหรับบรรณาธิการ: Visual Studio Code ตัวมันเองมีขนาดใหญ่ TypeScript โค้ดเบสนี้เองที่ทำให้รองรับภาษาได้อย่างสมบูรณ์แบบ
• ส่วนหน้าสำหรับองค์กรขนาดใหญ่: ทีมที่มีผู้ร่วมงานจำนวนมากมักใช้เครื่องมือนี้เพื่อตรวจจับข้อผิดพลาดในการผสานรวมก่อนการปรับใช้

วิธีดาวน์โหลดและติดตั้ง TypeScript

นี่คือกระบวนการทีละขั้นตอนในการดาวน์โหลดและติดตั้ง TypeScript:

ขั้นตอนที่ 1) ดาวน์โหลดและติดตั้ง Nodejs

เข้าไปที่เว็บไซต์อย่างเป็นทางการของ Nodejs https://nodejs.org/en/download/และดาวน์โหลดและติดตั้ง Nodejs สำหรับระบบปฏิบัติการของคุณ คำแนะนำโดยละเอียดมีอยู่ในคู่มือบน วิธีดาวน์โหลดและติดตั้ง Node.js.

ขั้นตอนที่ 2) ตรวจสอบเวอร์ชัน Nodejs และ npm

หากต้องการตรวจสอบว่า Nodejs และ npm ติดตั้งอยู่แล้วหรือไม่ ให้ตรวจสอบเวอร์ชันในหน้าต่าง Command Prompt ของคุณ

D:\typeproject>node --version
v22.14.0

D:\typeproject>npm --version
10.9.2

สามารถใช้งานได้กับ Node LTS เวอร์ชันใดก็ได้ในปัจจุบัน TypeScript ตัวคอมไพเลอร์เองนั้นต้องการเพียงแค่เวอร์ชัน Node ที่รองรับเท่านั้น

ขั้นตอน 3) TypeScript การติดตั้ง

สร้างไดเร็กทอรีโปรเจ็กต์ของคุณโดยใช้ชื่อ typeproject\ แล้วรันคำสั่ง npm init ดังแสดงในคำสั่งด้านล่าง:

npm init

ขั้นตอนที่ 4) เริ่มการติดตั้ง

ขั้นตอนนี้จะสร้างไฟล์ package.json ซึ่งจะใช้เก็บข้อมูลการพึ่งพา (dependencies) สำหรับโปรเจ็กต์ของเรา

เมื่อเสร็จแล้ว ให้ติดตั้ง TypeScript ดังต่อไปนี้:

npm -g install typescript

คำสั่งดังกล่าวจะดูแลการติดตั้ง TypeScriptการเพิ่ม “-g” ลงใน npm install จะติดตั้ง TypeScript ทั่วโลก ข้อดีของการใช้ -g คือ คุณจะสามารถใช้งานได้ TypeScript tsk สามารถเรียกใช้คำสั่งจากไดเร็กทอรีใดก็ได้ เนื่องจากมีการติดตั้งไว้ทั่วโลก ในกรณีที่คุณไม่ต้องการติดตั้ง TypeScript สำหรับการใช้งานทั่วโลก ให้ใช้คำสั่งด้านล่างนี้:

npm install --save-dev typescript

สร้างโฟลเดอร์ src\ ในไดเร็กทอรีโปรเจ็กต์ของคุณ และภายในโฟลเดอร์ src\ ให้สร้างไฟล์ต่อไปนี้ TypeScript ไฟล์ test.ts และเขียนโค้ดของคุณ

ตัวอย่าง : test.ts

function add(x:number, y:number) {
	return x+y;
}

let sum = add(5,10);
console.log(sum);

คอมไพล์ TypeScript รหัสถึง Javascript

ในการคอมไพล์โค้ดข้างต้น ให้ใช้คำสั่งต่อไปนี้

If TypeScript หากต้องการติดตั้งแบบทั่วโลก ให้ใช้คำสั่งด้านล่าง:

tsc test.ts

If TypeScript หากติดตั้งไว้ในโปรเจ็กต์ของคุณ คุณต้องใช้พาธของไฟล์นั้น TypeScript จากโฟลเดอร์ node_modules ตามที่แสดง หรือเรียกใช้งานผ่าน npx ก็ได้:

node_modules\typescript\bin\tsc test.ts

OR

npx tsc test.ts

คำสั่งข้างต้นจะสร้างไฟล์ test.js ซึ่งจะมีโค้ดที่คอมไพล์แล้ว Javaต้นฉบับ

ตัวอย่าง : test.js

function add(x, y) {
    return x + y;
}
var sum = add(5, 10);
console.log(sum);

ดำเนินงาน Javascript โดยใช้ Nodejs

ต่อไปนี้เราจะรันไฟล์ test.js ใน Nodejs ดังนี้:

D:\typeproject\src>node test.js
15

ค่าที่ส่งไปยัง console.log จะถูกแสดงผลเมื่อไฟล์ test.js ทำงาน

ดำเนินงาน Javaสคริปต์ในเบราว์เซอร์

ตัวอย่าง:

<html>
<head></head>
<body>
<script type="text/javascript" src="test.js"></script>
</body>
</html>

คอมไพล์ TypeScript รหัสถึง Javascript โดยใช้เวอร์ชัน EcmaScript

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

ตัวอย่าง : test.ts

var addnumbers = (a, b) => {
    return a+b;
}

addnumbers(10, 20);

หากต้องการคอมไพล์เป็นเวอร์ชัน ES ที่คุณเลือก คุณสามารถใช้ตัวเลือก target หรือ t ในคำสั่งของคุณดังนี้:

tsc --target ES6  test.ts

OR

tsc -t ES6 test.ts

โดยค่าเริ่มต้น เป้าหมายคือ ES3 สำหรับคอมไพเลอร์แบบคลาสสิก หากคุณต้องการเปลี่ยน คุณสามารถใช้คำสั่งด้านบนได้

ในปัจจุบัน เราจะใช้ ES6 เป็นเป้าหมาย:

tsc --target ES6  test.ts

test.ts ถึง test.js

var addnumbers = (a, b) => {
    return a+b;
}

addnumbers(10, 20);

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

โดยค่าเริ่มต้นเป้าหมายคือ ES3 ดังนั้นหากไม่ได้ระบุเป้าหมาย คุณจะได้ไฟล์ test.js ดังนี้:

var addnumbers = function (a, b) {
    return a + b;
};
addnumbers(10, 20);

ดังนั้น ในที่นี้ ลูกศรขนาดใหญ่จึงถูกเปลี่ยนเป็นฟังก์ชันนิรนามธรรมดา

ตัวแปรใน TypeScript

ตัวแปร ใช้เพื่อจัดเก็บค่า และค่าอาจเป็นสตริง ตัวเลข บูลีน หรือนิพจน์ เมื่อพูดถึงตัวแปรใน TypeScriptพวกมันคล้ายกันกับ Javaต้นฉบับดังนั้นเรามาเรียนรู้วิธีการประกาศและกำหนดค่าให้กับตัวแปรในภาษาโปรแกรมกันเถอะ TypeScript.

ตัวแปรไม่สามารถนำไปใช้ในโค้ดได้หากยังไม่ได้กำหนดค่า ในการประกาศตัวแปร คุณสามารถใช้ `@`

คือ คำสำคัญ,

ให้ คีย์เวิร์ด

const คีย์เวิร์ด

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

การประกาศตัวแปรโดยใช้ var

ไวยากรณ์:

var firstname = "Roy";

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

1 ตัวอย่าง:

var k = 1; // variable k will have a global scope

function test() {
    var c = 1; // variable c is local and accessible only inside function test
    return k++;
}

test(); // output as 1
test(); // output as 2
alert(c); // will throw error, Uncaught ReferenceError: c is not defined

2 ตัวอย่าง:

var t = 0; // variable t is declared in global scope
function test() {
    var t = 10; // t is redeclared inside the function, so changes stay local
    return t;
}
test(); // will return 10
console.log(t); // will console 0

3 ตัวอย่าง:

var i = 0;
function test() {
    if (i > 0) {
      var t = 1;
    }
    return t;
}

test(); // returns undefined. The if block did not run, yet t is still declared
        // because var declarations are hoisted to the whole function.
i++;    // value of i is incremented
test(); // since i > 0 the if block runs and the value returned is 1

การประกาศตัวแปรโดยใช้คำสั่ง Let

การขอ TypeScript ไวยากรณ์ของ Let มีดังต่อไปนี้:

ไวยากรณ์:

let name = "Roy";

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

ตัวอย่าง:

let i = 1;
function test() {
    if (i > 0) {
	  let t = 1;
    }
    return t;
}

test(); // throws an error: Cannot find name 't'

ดังกล่าวข้างต้น TypeScript ตัวอย่างนี้ทำให้เกิดข้อผิดพลาด แต่โค้ดเดียวกันนี้จะทำงานได้หากใช้ คือ คีย์เวิร์ด ตัวแปรที่ประกาศโดยใช้ ให้ ตัวแปร t จะใช้งานได้เฉพาะภายในบล็อกที่ประกาศไว้เท่านั้น ในตัวอย่างนี้ ตัวแปร t จะมีอยู่เฉพาะภายในบล็อก if เท่านั้น ไม่ได้มีอยู่ในฟังก์ชันทั้งหมด

หลักการเดียวกันนี้ใช้ได้กับการทำงานภายในฟังก์ชันใดๆ ก็ตาม ไม่ว่าจะเป็นลูป for, ลูป while หรือบล็อก switch ตัวแปร let จะใช้งานได้เฉพาะภายในบล็อกนั้นเท่านั้น และการอ้างอิงถึงตัวแปรนั้นจากภายนอกจะทำให้เกิดข้อผิดพลาด นี่คือความแตกต่างหลักระหว่าง var และ let

การประกาศตัวแปรโดยใช้ const

`const` หมายถึงตัวแปรคงที่ มีลักษณะคล้ายกับตัวแปร `let` แต่ต่างตรงที่เมื่อกำหนดค่าแล้วจะไม่สามารถเปลี่ยนแปลงได้ ดังนั้น การประกาศตัวแปร `const` จึงต้องกำหนดค่าเริ่มต้นไว้ในบรรทัดเดียวกัน

ไวยากรณ์:

const name = "Roy";

ตัวอย่าง:

const age = "25";
age = "30"; // error: Cannot assign to 'age' because it is a constant

const total; // error: 'const' declarations must be initialized

ดังนั้น ให้ใช้ `const` ทุกครั้งที่คุณรู้ว่าค่าที่กำหนดจะไม่ถูกกำหนดค่าใหม่ โปรดทราบว่า `const` ป้องกันการกำหนดค่าใหม่ของตัวแปรที่ผูกอยู่ ไม่ใช่การแก้ไขวัตถุที่ตัวแปรนั้นชี้ไป

ประเภทเข้า TypeScript

TypeScript เป็นภาษาที่มีการกำหนดประเภทข้อมูลอย่างเข้มงวด ในขณะที่ Javaสคริปต์ไม่ใช่แบบนั้น ตัวแปรที่มีค่าเป็นสตริงสามารถเปลี่ยนเป็นตัวเลขได้โดยไม่มีปัญหาใดๆ Javaบทสคริปต์ การกระทำเช่นเดียวกันนี้เป็นสิ่งที่ยอมรับไม่ได้ใน TypeScript. ใน TypeScriptชนิดของตัวแปรจะถูกกำหนดไว้ตั้งแต่เริ่มต้น และตลอดการทำงาน ตัวแปรจะต้องคงชนิดนั้นไว้ การเปลี่ยนแปลงใดๆ จะทำให้เกิดข้อผิดพลาดขณะคอมไพล์ Javaต้นฉบับ

ประเภทพื้นฐานมีดังต่อไปนี้:

จำนวน

รับเฉพาะจำนวนเต็ม ทศนิยม เศษส่วน และค่าตัวเลขที่คล้ายคลึงกันเท่านั้น

ไวยากรณ์:

let a :number = 10;
let marks :number = 150;
let price :number = 10.2;

ต่อไปนี้เป็นวิธีการสำคัญบางประการที่สามารถนำไปใช้กับประเภทตัวเลขได้:

แก้ไข () – ฟังก์ชันนี้จะแปลงตัวเลขเป็นสตริงและคงจำนวนทศนิยมตามที่ระบุไว้ในเมธอด

toString () – วิธีนี้จะแปลงตัวเลขให้เป็นสตริง

มูลค่าของ() – วิธีนี้จะคืนค่าดั้งเดิมของตัวเลข

ถึงความแม่นยำ() – วิธีนี้จะจัดรูปแบบตัวเลขให้มีความยาวตามที่กำหนด

ตัวอย่าง: ด้วยวิธีการคำนวณตัวเลขทั้งหมด

let _num :number = 10.345;
_num.toFixed(2);      // "10.35"
_num.valueOf();      // 10.345
_num.toString();     // "10.345"
_num.toPrecision(2); // "10"

เชือก

สตริง: รับเฉพาะค่าที่เป็นสตริงเท่านั้น

ไวยากรณ์:

let str :string = "hello world";

ต่อไปนี้คือวิธีการสำคัญบางประการที่สามารถใช้กับประเภทข้อมูลสตริงได้:

• แยก() – เมธอดนี้จะแยกสตริงออกเป็นอาร์เรย์
• อักขระ() – เมธอดนี้จะให้ค่าอักขระที่ดัชนีที่กำหนด
• ดัชนีของ() – เมธอดนี้จะให้ตำแหน่งของการปรากฏครั้งแรกของค่าที่กำหนดให้
• แทนที่() – เมธอดนี้รับสตริง 2 สตริง โดยจะค้นหาค่าแรกในสตริง และหากพบ จะแทนที่ด้วยค่าที่สอง แล้วส่งสตริงใหม่กลับมา
• ตัดแต่ง() – วิธีนี้จะลบช่องว่างออกจากทั้งสองด้านของสตริง
• ย่อย() – เมธอดนี้จะให้ส่วนหนึ่งของสตริง โดยขึ้นอยู่กับตำแหน่งเริ่มต้นและความยาวที่กำหนด
• สตริงย่อย() – เมธอดนี้จะให้ส่วนหนึ่งของสตริง โดยขึ้นอยู่กับตำแหน่งเริ่มต้นและตำแหน่งสิ้นสุด อักขระที่ตำแหน่งสุดท้ายจะถูกยกเว้น
• ถึงUpperCase() – จะแปลงสตริงเป็นตัวพิมพ์ใหญ่
• ถึงตัวพิมพ์เล็ก() – จะแปลงสตริงเป็นตัวพิมพ์เล็ก

ตัวอย่าง:

let _str:string = "Typescript";

_str.charAt(1);                // y
_str.split("");                // ["T","y","p","e","s","c","r","i","p","t"]
_str.indexOf("s");             // 4, gives -1 if the value does not exist
_str.replace("Type", "Coffee"); // "Coffeescript"
_str.trim();                    // "Typescript"
_str.substr(4, _str.length);   // "script"
_str.substring(4, 10);         // "script"
_str.toUpperCase();             // "TYPESCRIPT"
_str.toLowerCase();             // "typescript"

บูลีน

ตัวแปรประเภทบูลีนรับค่าได้เพียงสองค่าเท่านั้น คือ จริง และ เท็จ ซึ่งแตกต่างจากตัวแปรประเภททั่วไป Javaในสคริปต์ ตัวเลข 0 และ 1 ไม่ได้รับการยอมรับ เนื่องจากเป็นชนิดข้อมูลตัวเลข

ไวยากรณ์:

let status :boolean = true;
let isDone :boolean = false;

let bflag :boolean = 1;
// error: Type 'number' is not assignable to type 'boolean'

ใด

ไวยากรณ์:

let a :any = 123
a = "hello world"; // changing type will not give any error.

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

เป็นโมฆะ

ชนิดข้อมูล void ส่วนใหญ่ใช้เป็นชนิดข้อมูลส่งคืนของฟังก์ชันที่ไม่ส่งค่าใดๆ กลับมา

ไวยากรณ์:

function testfunc():void{
 //code here
}

TypeScript แถว

An แถว in TypeScript อาร์เรย์เป็นชนิดข้อมูลที่สามารถเก็บค่าได้หลายค่า มาเรียนรู้วิธีการประกาศและกำหนดค่าสำหรับการดำเนินการกับอาร์เรย์ในอาร์เรย์กัน TypeScript.

ตั้งแต่ TypeScript เนื่องจากเป็นภาษาที่มีการกำหนดประเภทข้อมูลอย่างเข้มงวด คุณจึงต้องระบุประเภทข้อมูลของค่าในอาร์เรย์ มิฉะนั้น ระบบจะถือว่าค่าเหล่านั้นเป็นประเภท "any"

ประกาศและเริ่มต้นอาร์เรย์

ไวยากรณ์:

let nameofthearray : Array<typehere>

ตัวอย่าง

let months: Array<string> = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"]; // array with all string values

let years: Array<number> = [2015, 2016, 2017, 2018, 2019]; // array with all numbers

let month_year: Array<string | number> = ["Jan", 2015, "Feb", 2016]; // mixed

let alltypes: Array<any> = [true, false, "Harry", 2000, { "a": "50", "b": "20" }]; // any type

วิธีต่างๆ ในการเข้าถึงองค์ประกอบจากอาร์เรย์

ในการดึงค่าจากอาร์เรย์ ค่าจะเริ่มต้นจากดัชนี 0 ไปจนถึงความยาวของอาร์เรย์ลบหนึ่ง

let years: Array<number> = [2016, 2017, 2018, 2019];
years[0]; // output will be 2016
years[1]; // output will be 2017
years[2]; // output will be 2018
years[3]; // output will be 2019

คุณยังสามารถดึงองค์ประกอบจากอาร์เรย์ได้โดยใช้ TypeScript สำหรับ ห่วงดังแสดงด้านล่าง

การใช้ TypeScript สำหรับห่วง

let years: Array<number> = [2016, 2017, 2018, 2019];
for (let i = 0; i < years.length; i++) {
     console.log(years[i]);
}

Output:

2016
2017
2018
2019

การใช้ for-in วนซ้ำ

let years: Array<number> = [2016, 2017, 2018, 2019];
for (let i in years) {
     console.log(years[i]);
}

Output:

2016
2017
2018
2019

การใช้ for-of loop

let years: Array<number> = [2016, 2017, 2018, 2019];
for (let i of years) {
     console.log(i);
}

Output:

2016
2017
2018
2019

การใช้ลูป forEach

let years: Array<number> = [2016, 2017, 2018, 2019];
years.forEach(function(yrs, i) {
  console.log(yrs);
});

Output:

2016
2017
2018
2019

TypeScript วิธีการอาร์เรย์

การขอ TypeScript อ็อบเจ็กต์อาร์เรย์มีคุณสมบัติและเมธอดมากมาย ซึ่งช่วยให้นักพัฒนาสามารถจัดการอาร์เรย์ได้อย่างง่ายดายและมีประสิทธิภาพ คุณสามารถรับค่าของคุณสมบัติได้โดยระบุ arrayname.property และรับผลลัพธ์ของเมธอดได้โดยระบุ arrayname.method()

ตัวอย่างคุณสมบัติความยาว

let months: Array<string> = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"];

console.log(months.length);  // 12

ตัวอย่างวิธีการย้อนกลับ

console.log(months.reverse());
// ["Dec","Nov","Oct","Sept","Aug","July","June","May","April","March","Feb","Jan"]

ตัวอย่างวิธีการเรียงลำดับ

console.log(months.sort());
// ["April","Aug","Dec","Feb","Jan","July","June","March","May","Nov","Oct","Sept"]

ตัวอย่างวิธีการป๊อป

console.log(months.pop()); // Dec

ตัวอย่างวิธีการกะ

console.log(months.shift()); // Jan

ตัวอย่างวิธีการพุช

let years: Array<number> = [2015, 2016, 2017, 2018, 2019];
console.log(years.push(2020)); // 6, the new length
years.forEach(function(yrs, i) {
  console.log(yrs); // 2015, 2016, 2017, 2018, 2019, 2020
});

ตัวอย่างวิธีการต่อกัน

let array1: Array<number> = [10, 20, 30];
let array2: Array<number> = [100, 200, 300];
console.log(array1.concat(array2)); // [10, 20, 30, 100, 200, 300]

ชั้นเรียนใน TypeScript

TypeScript เป็น superset ของ Javaสคริปต์ ดังนั้นอะไรก็ตามที่เป็นไปได้ใน Javaสคริปต์ยังสามารถทำได้ใน TypeScript.Class เป็นคุณสมบัติที่เพิ่มเข้ามาตั้งแต่ ES6 เป็นต้นไป ก่อนหน้านี้ใน Javaฟังก์ชันการทำงานแบบสคริปต์และคลาสถูกสร้างขึ้นโดยใช้ฟังก์ชันที่มีเมธอดต้นแบบเพื่อนำโค้ดกลับมาใช้ใหม่ การใช้คลาสทำให้โค้ดของคุณใกล้เคียงกับภาษาต่างๆ เช่น Java, C# และ Pythonซึ่งโค้ดสามารถนำกลับมาใช้ซ้ำได้ง่าย

การกำหนดคลาสใน TypeScript

นี่คือไวยากรณ์คลาสพื้นฐานใน TypeScript:

class nameofclass {
     //define your properties here

    constructor() {
     // initialize your properties here
    }

   //define methods for class
}

ตัวอย่าง: ตัวอย่างการทำงานในชั้นเรียน

class Students {
    age : number;
    name : string;
    roll_no : number;

    constructor(age: number, name:string, roll_no: number) {
        this.age = age;
        this.name = name;
        this.roll_no = roll_no;
    }

    getRollNo(): number {
        return this.roll_no;
    }

    getName() : string {
        return this.name;
    }

    getAge() : number {
        return this.age;
    }
}

ในตัวอย่างข้างต้น คุณมีคลาสชื่อ Students ซึ่งมีคุณสมบัติ age, name และ roll_no

ตัวสร้างใน TypeScript ชั้น

คลาส Students ที่กำหนดไว้ข้างต้นมีคอนสตรัคเตอร์ดังแสดงด้านล่าง:

constructor(age: number, name:string, roll_no: number) {
        this.age = age;
        this.name = name;
        this.roll_no = roll_no;
    }

เมธอดคอนสตรัคเตอร์มีพารามิเตอร์คือ อายุ ชื่อ และหมายเลขประจำตัวนักศึกษา คอนสตรัคเตอร์จะจัดการการเริ่มต้นค่าให้กับคุณสมบัติต่างๆ เมื่อมีการสร้างอินสแตนซ์ของคลาส คุณสมบัติเหล่านี้สามารถเข้าถึงได้โดยใช้เมธอดคอนสตรัคเตอร์ นี้ คีย์เวิร์ด เช่น this.age เพื่อเข้าถึงอายุ และ this.roll_no เพื่อเข้าถึงหมายเลขประจำตัวนักเรียน นอกจากนี้ คุณยังสามารถมีคอนสตรัคเตอร์เริ่มต้นได้ ดังแสดงด้านล่าง:

constructor () {}

วิธีการภายในก TypeScript ชั้น

ในคลาส Students มีเมธอดต่างๆ ที่ถูกกำหนดไว้ เช่น getRollNo(), getName() และ getAge() ซึ่งจะส่งคืนค่าของคุณสมบัติ roll_no, name และ age

getRollNo(): number {
        return this.roll_no;
}

getName() : string {
	return this.name;
}

getAge() : number {
	return this.age;
}

การสร้างอินสแตนซ์ของคลาสใน TypeScript

In TypeScriptในการสร้างอินสแตนซ์ของคลาส คุณใช้ตัวดำเนินการ `new` เมื่อคุณสร้างอินสแตนซ์ด้วย `new` คุณจะได้รับอ็อบเจ็กต์ที่สามารถเข้าถึงคุณสมบัติและเมธอดของคลาสได้ ดังแสดงด้านล่าง:

let student_details = new Students(15, "Harry John", 33);
student_details.getAge();  // 15
student_details.getName(); // Harry John

การรวบรวม TypeScript คลาสถึง Javaต้นฉบับ

คุณสามารถใช้คำสั่ง tsc ดังแสดงด้านล่างเพื่อคอมไพล์เป็น Javaต้นฉบับ

Command: tsc  Students.ts

ผลลัพธ์ของไฟล์ Javaโค้ดสคริปต์เมื่อคอมไพล์แล้วมีดังต่อไปนี้:

var Students = /** @class */ (function () {
    function Students(age, name, roll_no) {
        this.age = age;
        this.name = name;
        this.roll_no = roll_no;
    }
    Students.prototype.getRollNo = function () {
        return this.roll_no;
    };
    Students.prototype.getName = function () {
        return this.name;
    };
    Students.prototype.getAge = function () {
        return this.age;
    };
    return Students;
}());

In Javaในสคริปต์ คลาสจะถูกแปลงเป็นฟังก์ชันที่เรียกตัวเอง

การสืบทอดคลาส

คลาสสามารถสืบทอดได้โดยใช้ ขยาย คีย์เวิร์ดใน TypeScript.

ไวยากรณ์การสืบทอดคลาส:

class A {
     //define your properties here

    constructor() {
     // initialize your properties here
    }

   //define methods for class

}

class B extends A {
 //define your properties here

    constructor() {
     // initialize your properties here
    }

   //define methods for class

}

ชั้น B จะสามารถแบ่งปันได้ คลาส A วิธีการและคุณสมบัติ

ต่อไปนี้เป็นตัวอย่างการทำงานของคลาสที่ใช้การสืบทอด:

class Person {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    getName(): string {
        return this.name;
    }

    getAge(): number {
        return this.age;
    }
}

class Student extends Person {
    tmarks: number;
    getMarks(): number {
        return this.tmarks;
    }

    setMarks(tmarks) {
        this.tmarks = tmarks;
    }
}

let _std1 = new Student('Sheena', 24);
_std1.getAge();      // output is 24
_std1.setMarks(500);
_std1.getMarks();    // output is 500

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

ต่อไปเรามาเพิ่มการเปลี่ยนแปลงบางอย่างให้กับคลาสข้างต้นกัน

ตัวอย่าง:

class Person {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    getName(): string {
        return this.name;
    }

    getAge(): number {
        return this.age;
    }
}

class Student extends Person {
    tmarks: number;
    constructor(name: string, age: number, tmarks: number) {
        super(name, age);
        this.tmarks = tmarks; // the derived property must be assigned too
    }
    getMarks(): number {
        return this.tmarks;
    }

    setMarks(tmarks) {
        this.tmarks = tmarks;
    }
}

let _std1 = new Student('Sheena', 24, 500);
_std1.getAge();   // output is 24
_std1.getMarks(); // output is 500

ความแตกต่างจากตัวอย่างก่อนหน้านี้คือ คอนสตรัคเตอร์ที่กำหนดไว้ในคลาส Student คอนสตรัคเตอร์นี้รับพารามิเตอร์เดียวกันกับคลาสพื้นฐาน บวกกับพารามิเตอร์เพิ่มเติมใดๆ ของตัวมันเอง

In TypeScript คุณต้องเรียกเมธอด `super` โดยส่งพารามิเตอร์ทั้งหมดของคลาสพื้นฐานไปด้วย นี่ต้องเป็นคำสั่งแรกภายในคอนสตรัคเตอร์ เพราะ `super` จะเรียกใช้คอนสตรัคเตอร์ของคลาสที่สืบทอดมา จากนั้น คุณสมบัติใดๆ ที่ประกาศโดยคลาสที่สืบทอดมา เช่น `tmarks` จะต้องถูกกำหนดค่าอย่างชัดเจน มิฉะนั้น `getMarks` จะคืนค่าเป็น `undefined`

ตัวแก้ไขการเข้าถึงใน TypeScript

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

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

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

ตัวอย่าง:

class Person {
    protected name: string;
    protected age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    private getName(): string {
        return this.name;
    }

    getDetails(): string {
        return "Name is " + this.getName();
    }
}

class Student extends Person {
    tmarks: number;
    constructor(name: string, age: number, tmarks: number) {
        super(name, age);
        this.tmarks = tmarks;
    }
    getMarks(): number {
        return this.tmarks;
    }

    getFullName(): string {
        return this.name;
    }

    setMarks(tmarks) {
        this.tmarks = tmarks;
    }
}

let _std1 = new Student('Sheena', 24, 500);
_std1.getMarks();    // output is 500
_std1.getFullName(); // output is Sheena
_std1.getDetails();  // output is Name is Sheena

อินเทอร์เฟซเข้า TypeScript

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

ไวยากรณ์ของอินเทอร์เฟซใน TypeScript

interface Dimension {
    width: string;
    height: string;
}

คุณได้กำหนดอินเทอร์เฟซชื่อ Dimension ซึ่งมีคุณสมบัติ width และ height โดยทั้งสองเป็นชนิด string

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

ตัวอย่าง:

interface Dimension {
    width: string;
    height: string;
}

let _imagedim: Dimension = {
    width: "100px",
    height: "200px"
};

ลายเซ็นของอินเทอร์เฟซ Dimension ประกอบด้วยความกว้างและความสูง ซึ่งทั้งสองอย่างเป็นสิ่งที่จำเป็น หากขาดคุณสมบัติใดคุณสมบัติหนึ่ง หรือมีการเปลี่ยนแปลงประเภท จะทำให้เกิดข้อผิดพลาดขณะคอมไพล์โค้ด Javaต้นฉบับ

โค้ดข้างต้น เมื่อคอมไพล์เป็น Javaสคริปต์มีลักษณะดังนี้:

var _imagedim = {
    width: "100px",
    height: "200px"
};

ให้เราดูวิธีการใช้อินเทอร์เฟซกับฟังก์ชัน

การใช้อินเทอร์เฟซในฟังก์ชันเป็นประเภทค่าส่งคืน

interface Dimension {
    width: string;
    height: string;
}

function getDimension() : Dimension {
    let width = "300px";
    let height = "250px";
    return {
        width: width,
        height: height
    }
}

ในตัวอย่างข้างต้น อินเทอร์เฟซ Dimension ถูกใช้เป็นประเภทค่าส่งคืนของฟังก์ชัน getDimension() ค่าที่ส่งคืนต้องตรงกับคุณสมบัติและประเภทที่ประกาศไว้ในอินเทอร์เฟซ

ที่รวบรวม Javaโค้ดสคริปต์จะเป็นดังนี้:

function getDimension() {
    var width = "300px";
    var height = "250px";
    return {
        width: width,
        height: height
    };
}

ในระหว่างการคอมไพล์ หากประเภทค่าส่งคืนไม่ตรงกับอินเทอร์เฟซ จะเกิดข้อผิดพลาดขึ้น

อินเทอร์เฟซในฐานะพารามิเตอร์ฟังก์ชัน

interface Dimension {
    width: string;
    height: string;
}

function getDimension(dim: Dimension) : string {
    let finaldim  = dim.width + "-" + dim.height;
    return finaldim;
}

getDimension({width:"300px", height:"250px"}); // "300px-250px"

ในตัวอย่างข้างต้น คุณได้ใช้อินเทอร์เฟซ Dimension เป็นพารามิเตอร์ให้กับฟังก์ชัน getDimension() เมื่อคุณเรียกใช้ฟังก์ชัน พารามิเตอร์ที่ส่งผ่านจะต้องตรงตามกฎที่กำหนดไว้ในอินเทอร์เฟซ

ที่รวบรวม Javaโค้ดสคริปต์จะเป็นดังนี้:

function getDimension(dim) {
    var finaldim = dim.width + "-" + dim.height;
    return finaldim;
}
getDimension({ width: "300px", height: "250px" });

คลาสที่ใช้งานอินเทอร์เฟซ

ในการใช้งานอินเทอร์เฟซกับคลาส คุณต้องใช้คีย์เวิร์ด การดำเนินการ.

ไวยากรณ์สำหรับคลาสที่ใช้งานอินเทอร์เฟซ:

class NameofClass implements InterfaceName {
}

ตัวอย่างต่อไปนี้แสดงวิธีการทำงานร่วมกันระหว่างอินเทอร์เฟซและคลาส

interface Dimension {
    width : string,
    height: string,
    getWidth(): string;
}

class Shapes implements Dimension {
    width: string;
    height: string;
    constructor (width:string, height:string) {
        this.width = width;
        this.height = height;
    }
    getWidth() {
        return this.width;
    }
}

ในตัวอย่างข้างต้น คุณได้กำหนดอินเทอร์เฟซ Dimension โดยมีคุณสมบัติ width และ height ซึ่งทั้งสองเป็นประเภท string และมีเมธอดชื่อ getWidth() ซึ่งส่งคืนค่า string

ที่รวบรวม Javaโค้ดสคริปต์จะเป็นดังนี้:

var Shapes = /** @class */ (function () {
    function Shapes(width, height) {
        this.width = width;
        this.height = height;
    }
    Shapes.prototype.getWidth = function () {
        return this.width;
    };
    return Shapes;
}());

ฟังก์ชั่นใน TypeScript

ฟังก์ชันคือชุดคำสั่งที่ดำเนินการเพื่อปฏิบัติงานอย่างใดอย่างหนึ่ง Javaในสคริปต์ โค้ดส่วนใหญ่เขียนในรูปแบบของฟังก์ชัน และฟังก์ชันเหล่านี้มีบทบาทสำคัญมาก TypeScript คุณมีคลาส อินเทอร์เฟซ โมดูล และเนมสเปซให้ใช้งาน แต่ฟังก์ชันก็ยังคงมีบทบาทสำคัญ ความแตกต่างระหว่างฟังก์ชันใน Javaสคริปต์และ TypeScript คือพารามิเตอร์และประเภทค่าส่งคืนที่มีให้เลือกใช้กับ TypeScript ฟังก์ชัน

Javaฟังก์ชั่นสคริปต์:

function add (a1, b1) {
   return a1+b1;
}

TypeScript ฟังก์ชั่น:

function  add(a1 : number, b1: number) : number {
    return a1 + b1;
}

ในฟังก์ชันข้างต้น ฟังก์ชันชื่อ add และพารามิเตอร์คือ a1 และ b1ทั้งสองตัวแปรเป็นประเภทตัวเลข และค่าที่ส่งคืนก็เป็นตัวเลขเช่นกัน หากคุณส่งสตริงไปยังฟังก์ชัน จะเกิดข้อผิดพลาดขณะคอมไพล์ Javaต้นฉบับ

การเรียกใช้ฟังก์ชัน: เพิ่ม

let x = add(5, 10);   // will return 15
let b = add(5);       // error TS2554: Expected 2 arguments, but got 1
let c = add(3,4,5);   // error TS2554: Expected 2 arguments, but got 3
let t = add("Harry", "John");
// error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'

พารามิเตอร์ a1 และ b1 พารามิเตอร์และประเภทค่าส่งคืนเป็นสิ่งที่จำเป็น และหากไม่ระบุจะทำให้เกิดข้อผิดพลาด ประเภทพารามิเตอร์และประเภทค่าส่งคืนมีความสำคัญเท่าเทียมกัน และไม่สามารถเปลี่ยนแปลงได้เมื่อกำหนดแล้ว

พารามิเตอร์ทางเลือกสำหรับฟังก์ชัน

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

function getName(firstname: string, lastname?: string): string {
    return firstname + lastname;
}

let a = getName("John");              // returns Johnundefined
let b = getName("John", "Harry");     // returns JohnHarry
let c = getName("John", "H", "Harry"); // error TS2554: Expected 1-2 arguments, but got 3

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

กำหนดค่าเริ่มต้นให้กับพารามิเตอร์

คุณสามารถกำหนดค่าเริ่มต้นให้กับพารามิเตอร์ได้ดังที่แสดงด้านล่าง:

function getName(firstname: string, lastname = "Harry"): string {
    return firstname + lastname;
}

let a = getName("John");      // will return JohnHarry
let b = getName("John", "H"); // will return JohnH

เช่นเดียวกับพารามิเตอร์เสริม พารามิเตอร์ที่กำหนดค่าเริ่มต้นไว้จะต้องถูกเก็บไว้ที่ส่วนท้ายของรายการพารามิเตอร์ด้วย

พารามิเตอร์ที่เหลือ

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

ไวยากรณ์สำหรับพารามิเตอร์ที่เหลือ:

function testFunc(a: string, ...arr: string[]) :string {
    return a + arr.join("");
}

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

ตัวอย่าง:

let a = testFunc("Monday", "Tuesday", "Wednesday", "Thursday");
// output is MondayTuesdayWednesdayThursday

ฟังก์ชั่นลูกศร

ฟังก์ชั่นลูกศรเป็นหนึ่งในคุณสมบัติที่สำคัญที่เปิดตัวใน ES6 และมีให้ใช้งานได้ใน TypeScript เช่นกัน ไวยากรณ์มีลูกศรขนาดใหญ่ ซึ่งเป็นที่มาของชื่อนี้

ไวยากรณ์ของฟังก์ชันลูกศร:

var nameoffunction = (params) => {
 // code here
}

ฟังก์ชันลูกศรมีประโยชน์อย่างไร?

เรามาดูตัวอย่างเพื่อทำความเข้าใจการใช้งานฟังก์ชันลูกศรกัน

ตัวอย่าง:

var ScoreCard = function () {
    this.score = 0;

    this.getScore = function () {
        setTimeout(function () {
            console.log(this.score);    // gives undefined
        }, 1000);
    }
}

var a = new ScoreCard();
a.getScore();

คุณได้สร้างฟังก์ชันที่มีคุณสมบัติ score ที่กำหนดค่าเริ่มต้นเป็น 0 และเมธอด getScore ซึ่งภายในใช้ setTimeout และหลังจากหนึ่งวินาที จะแสดงค่า this.score ออกมา ค่าที่แสดงออกมาเป็น undefined แม้ว่า this.score จะถูกกำหนดและกำหนดค่าเริ่มต้นแล้วก็ตาม ปัญหาอยู่ที่... นี้ คีย์เวิร์ด ฟังก์ชันภายใน setTimeout มี this เป็นของตัวเอง และเนื่องจาก score ไม่ได้ถูกกำหนดไว้ ผลลัพธ์จึงเป็น undefined

สามารถจัดการปัญหาเดียวกันนี้ได้โดยใช้ฟังก์ชันลูกศร ดังแสดงด้านล่าง:

var ScoreCard = function () {
    this.score = 0;

    this.getScore = function () {
        setTimeout(() => {
            console.log(this.score);   // you get 0
        }, 1000);
    }
}

var a = new ScoreCard();
a.getScore();

ฟังก์ชันลูกศรไม่มีฟังก์ชันของตัวเอง นี้และจะใช้ตัวแปรจากขอบเขตแม่แทน ดังนั้นตัวแปรที่ประกาศไว้ภายนอกจึงสามารถเข้าถึงได้ด้วยคำสั่ง `this` ภายในฟังก์ชันลูกศร คำสั่งนี้มีประโยชน์เนื่องจากมีไวยากรณ์ที่สั้นกว่า รวมถึงใช้สำหรับฟังก์ชันเรียกกลับ (callback), ตัวจัดการเหตุการณ์ (event handlers) และฟังก์ชันจับเวลา (timing functions)

TypeScript เอนัมส์

A TypeScript enum คืออ็อบเจ็กต์ที่เก็บชุดค่าที่เกี่ยวข้องกันไว้ด้วยกัน JavaScript ไม่รองรับ enum โดยตรง ภาษาโปรแกรมส่วนใหญ่ เช่น Java, ซี และ C++ รองรับ enum และ TypeScript ทำให้สามารถใช้งานได้เช่นกัน Enum ถูกกำหนดโดยใช้คีย์เวิร์ด enum

จะประกาศ Enum ได้อย่างไร

ไวยากรณ์:

enum NameofEnum {
   value1,
   value2,
    ..
}

ตัวอย่าง: อีนัม

enum Directions {
    North,
    South,
    East,
    West
}

ในตัวอย่างข้างต้น คุณได้กำหนด enum ชื่อ Directions โดยมีค่าเป็น North, South, East และ West ค่าต่างๆ จะเริ่มต้นที่ 0 สำหรับรายการแรก และเพิ่มขึ้นทีละ 1 สำหรับรายการถัดไปแต่ละรายการ

ประกาศ Enum ที่มีค่าเป็นตัวเลข

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

enum Directions {
North = 0,
South = 1,
East = 2,
West = 3
}

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

enum Directions {
North = 5,
South, // will be 6
East,  // 7
West   // 8
}

ตอนนี้ทิศเหนือเริ่มที่เลข 5 ดังนั้นทิศใต้คือเลข 6 ทิศตะวันออกคือเลข 7 และทิศตะวันตกคือเลข 8

คุณสามารถกำหนดค่าที่คุณต้องการแทนค่าเริ่มต้นได้เช่นกัน ตัวอย่างเช่น:

enum Directions {
North = 5,
South = 4,
East = 6,
West = 8
}

จะเข้าถึง Enum ได้อย่างไร?

ตัวอย่างต่อไปนี้แสดงวิธีการใช้งาน enum ในโค้ดของคุณ:

enum Directions {
    North,
    South,
    East,
    West
}

console.log(Directions.North);      // output is 0
console.log(Directions["North"]); // output is 0
console.log(Directions[0]);       // output is North

ที่รวบรวม Javaสคริปต์มีดังนี้:

var Directions;
(function (Directions) {
    Directions[Directions["North"] = 0] = "North";
    Directions[Directions["South"] = 1] = "South";
    Directions[Directions["East"] = 2] = "East";
    Directions[Directions["West"] = 3] = "West";
})(Directions || (Directions = {}));
console.log(Directions.North);
console.log(Directions["North"]);
console.log(Directions[0]);

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

ประกาศ Enum ที่มีค่าเป็นสตริง

คุณสามารถกำหนดค่าสตริงที่คุณต้องการได้ ดังตัวอย่างด้านล่าง

ตัวอย่าง:

enum Directions {
    North = "N",
    South = "S",
    East = "E",
    West = "W"
}

console.log(Directions.North);      // output is N
console.log(Directions["North"]); // output is N
console.log(Directions[0]);       // output is undefined

ที่รวบรวม Javaสคริปต์มีดังนี้:

var Directions;
(function (Directions) {
    Directions["North"] = "N";
    Directions["South"] = "S";
    Directions["East"] = "E";
    Directions["West"] = "W";
})(Directions || (Directions = {}));
console.log(Directions.North);
console.log(Directions["North"]);
console.log(Directions[0]);

มีโมดูลอะไรบ้าง TypeScript?

ไฟล์ที่สร้างขึ้นใน TypeScript ตัวแปรแบบโกลบอลหมายความว่าตัวแปรที่ประกาศในไฟล์หนึ่งสามารถเข้าถึงได้ในไฟล์อื่น ลักษณะแบบโกลบอลนี้อาจทำให้เกิดข้อขัดแย้งในโค้ดและปัญหาขณะรันไทม์ ฟังก์ชันการส่งออกและนำเข้าโมดูลสามารถใช้เพื่อหลีกเลี่ยงข้อขัดแย้งของตัวแปรและฟังก์ชันแบบโกลบอลได้ คุณสมบัตินี้มาพร้อมกับเวอร์ชัน 2.0 Javaสคริปต์นี้รองรับ ES6 และยังใช้งานได้ในเวอร์ชันอื่นๆ อีกด้วย TypeScript.

ทำไมคุณถึงต้องการโมดูลใน TypeScript?

ตัวอย่างต่อไปนี้แสดงปัญหาที่เกิดขึ้นโดยไม่มีโมดูล

ตัวอย่าง test1.ts

let age : number = 25;

คุณได้กำหนดอายุตัวแปรของหมายเลขประเภทใน test1.ts

ตัวอย่าง test2.ts

ในไฟล์ test2.ts คุณสามารถเข้าถึงตัวแปรได้ อายุ กำหนดค่าไว้ในไฟล์ test1.ts และแก้ไขเพิ่มเติมดังที่แสดงด้านล่าง:

age = 30; // changed from 25 to 30.
let _new_age = age;

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

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

การใช้การส่งออกและนำเข้า

มีหลายวิธีในการส่งออกและนำเข้า เราจะมาพูดถึงไวยากรณ์ที่ใช้กันบ่อยที่สุดกัน

ไวยากรณ์สำหรับการนำเข้าและส่งออก 1:

export  nameofthevariable or class name or interface name etc

//To import the above variable or class name or interface you have to use import as shown below:

import {nameofthevariable or class name or interfacename} from "file path here without .ts"

นี่คือตัวอย่างการทำงานโดยใช้การส่งออกและนำเข้า

ทดสอบ1.ts

export let age: number = 25;

คีย์เวิร์ด export ใช้สำหรับแชร์ตัวแปรอายุกับไฟล์อื่น

ทดสอบ2.ts

import { age } from "./test1"
let new_age :number = age;

คีย์เวิร์ด import ใช้สำหรับเข้าถึง อายุ ตัวแปร และคุณต้องระบุตำแหน่งไฟล์ดังที่แสดงด้านบน

ไวยากรณ์สำหรับการนำเข้าและส่งออก 2:

นอกจากนี้ยังมีวิธีการส่งออกและนำเข้าอีกวิธีหนึ่ง โดยมีรูปแบบการใช้งานดังแสดงด้านล่าง:

export = classname;

import classname = require("file path of modulename")

เมื่อคุณใช้งาน ส่งออก= ในการส่งออกโมดูลของคุณ การนำเข้าจะต้องใช้ require(“เส้นทางไฟล์ของชื่อโมดูล”)

นี่คือตัวอย่างการใช้งานที่แสดงให้เห็นถึงกรณีดังกล่าว

ลูกค้า.ts

class Customer {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    getName(): string {
        return this.name;
    }
}

export = Customer;

testCustomer.ts

import Customer = require("./Customer");

let a = new Customer("Harry", 30);
alert(a.getName());

ตัวโหลดโมดูล

โมดูลไม่สามารถทำงานได้ด้วยตัวเอง ดังนั้นคุณจึงต้องมีตัวโหลดโมดูลเพื่อค้นหาการพึ่งพาการนำเข้า ดังที่เห็นได้ในตัวอย่าง TypeScript ตัวอย่างข้างต้น ตัวโหลดโมดูลที่มีให้ใช้งาน ได้แก่ CommonJS สำหรับ Nodejs และ Require.js สำหรับใช้งานในเบราว์เซอร์

ในการคอมไพล์โค้ดโดยใช้รูปแบบโมดูล CommonJS ให้ใช้คำสั่งต่อไปนี้:

tsc --module commonjs testCustomer.ts

ในการคอมไพล์โค้ดโดยใช้รูปแบบโมดูล Requirejs ให้ใช้คำสั่งต่อไปนี้:

tsc --module amd testCustomer.ts

ไฟล์ที่เกี่ยวข้องจะถูกแปลงเป็นไฟล์ JavaScript ด้วยคำสั่งด้านบน

ตัวอย่างการแปลงไฟล์ testCustomer.ts เป็น testCustomer.js โดยใช้ Requirejs

define(["require", "exports", "./Customer"], function (require, exports, Customer) {
    "use strict";
    exports.__esModule = true;
    var a = new Customer("Harry", 30);
    alert(a.getName());
});

ตัวอย่างการแปลงไฟล์ Customer.ts เป็น Customer.js โดยใช้ Requirejs

define(["require", "exports"], function (require, exports) {
    "use strict";
    var Customer = /** @class */ (function () {
        function Customer(name, age) {
            this.name = name;
            this.age = age;
        }
        Customer.prototype.getName = function () {
            return this.name;
        };
        return Customer;
    }());
    return Customer;
});

ในการทดสอบโดยใช้ require.js คุณต้องสร้างไฟล์ชื่อ main.js ซึ่งอ้างอิงถึง dependency ต่างๆ ดังที่แสดงไว้

นี่คือโครงสร้างโฟลเดอร์:

src/
    Customer.js
    testCustomer.js
    main.js
    require.js  // you can get this file from github or npm install requirejs
    test.html

main.js

define(function (require) {
    var customer = require("./Customer");
    var testCustomer = require("./testCustomer");
});

ทดสอบ.html

<!DOCTYPE html>
<html>
<head>
    <title>TypeScript Module testing using Requirejs</title>
    <script data-main="main" src="require.js"></script>
</head>
<body>
    <h3>Testing modules using Requirejs</h3>
</body>
</html>

เนมสเปซใน TypeScript

เนมสเปซคือที่เก็บรวบรวมคลาส อินเทอร์เฟซ ตัวแปร และฟังก์ชันต่างๆ ไว้ในไฟล์เดียว

ไวยากรณ์เนมสเปซ

namespace name{

export class {
}

export interface {
}

export const constname;

}

โค้ดที่เกี่ยวข้องสามารถเข้าถึงได้ภายใต้เนมสเปซเดียวกัน

ตัวอย่างการทำงานของเนมสเปซ: testnamespace.ts

namespace StudentSetup {

    export interface StudDetails {
        name: string;
        age: number;
    }

    export function addSpace(str) { // will add space to the string given
        return str.split("").join(" ");
    }

    export class Student implements StudDetails {
        name: string;
        age: number;

        constructor(studentdetails: StudDetails) {
            this.name = studentdetails.name;
            this.age = studentdetails.age;
        }

        getName(): string {
            return this.name;
        }
    }
}

ชื่อของเนมสเปซคือ การตั้งค่านักเรียนและคุณได้เพิ่มอินเทอร์เฟซ StudDetails ฟังก์ชัน addSpace และคลาสชื่อ Student แล้ว

การเข้าถึงเนมสเปซ

ต่อไปนี้คือโค้ดที่คุณใช้เนมสเปซ การตั้งค่านักเรียน.

testStudentSetup.ts

let a = new StudentSetup.Student({ name: "Harry", age: 20 });

console.log("The name is :" + StudentSetup.addSpace(a.getName()));

คลาส อินเทอร์เฟซ หรือฟังก์ชันที่มีอยู่ในเนมสเปซจะต้องถูกอ้างอิงโดยใช้ชื่อเนมสเปซ ตัวอย่างเช่น StudentSetup.addSpace เพื่อเข้าถึงฟังก์ชันและ StudentSetupนักเรียน เพื่อเข้าถึงชั้นเรียน

คุณสามารถรวมไฟล์ทั้งสองเข้าเป็นไฟล์ JavaScript ไฟล์เดียวได้ดังที่แสดงด้านล่าง:

tsc --outFile namespace.js testnamespace.ts  testStudentSetup.ts

ตรวจสอบผลลัพธ์ในหน้าต่าง Command Prompt โดยใช้คำสั่งด้านล่าง:

node namespace.js

Output:

The name is :H a r r y

การประกาศโดยรอบใน TypeScript

TypeScript อนุญาตให้คุณใช้บุคคลที่สาม Javaไฟล์สคริปต์ที่ใช้การประกาศแบบแอมเบียนต์ ข้อดีของฟีเจอร์นี้คือ คุณไม่ต้องเขียนไลบรารีใหม่ทั้งหมด แต่ยังคงสามารถใช้ฟีเจอร์ทั้งหมดพร้อมการตรวจสอบประเภทได้ TypeScript.

ไวยากรณ์โดยรอบ

วิธีการประกาศโมดูลแอมเบียนต์:

declare module moduleName {
   //code here
}

ไฟล์เสียงบรรยากาศต้องบันทึกเป็นชื่อดังต่อไปนี้:

filename.d.ts

หากต้องการใช้ไฟล์ ชื่อไฟล์.d.ts ในไฟล์ .ts ของคุณ คุณต้องอ้างอิงถึงมันดังนี้:

/// <reference path="filename.d.ts"/>

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

บุคคลที่สาม Javaไฟล์สคริปต์: testString.js

var StringChecks = {
    isString: function (str) {
        return typeof str === "string";
    },

    convertToUpperCase: function (str) {
        return str.toUpperCase();
    },

    convertToLowerCase: function (str) {
        return str.toLowerCase();
    },

    convertToStringBold: function (str) {
        return str.bold();
    }
};

คุณมีอ็อบเจ็กต์ชื่อ StringChecks ซึ่งมีฟังก์ชัน isString, convertToUpperCase, convertToLowerCase และ convertToStringBold

การสร้างโมดูล Ambient ใน TypeScript

ต่อไปเราจะสร้างโมดูลบรรยากาศซึ่งอ้างอิงถึง Javaสคริปต์จะทำงานตามที่กล่าวมาข้างต้นและเพิ่มการตรวจสอบประเภทตามที่จำเป็น

ชื่อไฟล์ : tstring.d.ts

declare module TestString {

    export interface StringsFunc {
        isString(str: string): boolean;
        convertToUpperCase(str: string): string;
        convertToLowerCase(str: string): string;
        convertToStringBold(str: string): string;
    }
}

declare var StringChecks: TestString.StringsFunc;

คุณกำหนดโมดูลชื่อ TestString และส่งออกอินเทอร์เฟซ StringsFunc โดยแต่ละลายเซ็นจะระบุว่าฟังก์ชันนั้นรับและส่งคืนค่าอะไรบ้าง:

• isString(str: string): boolean – รับค่าเป็นสตริงและส่งคืนค่าบูลีน การส่งค่าเป็นตัวเลขหรือประเภทอื่นใดจะทำให้เกิดข้อผิดพลาดขณะคอมไพล์
• convertToUpperCase(str: string): string – รับสตริงและส่งคืนค่าสตริง
• convertToLowerCase(str: string): string – รับสตริงและส่งคืนค่าสตริง
• ConvertToStringBold(str: สตริง): string – รับสตริงและส่งคืนค่าสตริง

ตั้งแต่ Javaไฟล์สคริปต์แสดงชื่ออ็อบเจ็กต์ StringChecks ซึ่งในที่สุดเราก็อ้างอิงถึงชื่อเดียวกันนี้ในไฟล์ .d.ts:

declare var StringChecks: TestString.StringsFunc;

การใช้โมดูล Ambient ใน TypeScript

นี่คือไฟล์ test.ts ซึ่งใช้ไฟล์ tstring.d.ts เป็นไฟล์อ้างอิง

/// <reference path="tstring.d.ts"/>
let str1 = StringChecks.isString("Hello World");
console.log(str1);
let str2 = StringChecks.convertToUpperCase("hello world");
console.log(str2);
let str3 = StringChecks.convertToLowerCase("HELLO");
console.log(str3);
let str4 = StringChecks.convertToStringBold("Hello World");
console.log(str4);

คอมไพล์ด้วยคำสั่ง tsc test.ts เพื่อสร้างไฟล์ test.js:

/// <reference path="tstring.d.ts"/>
var str1 = StringChecks.isString("Hello World");
console.log(str1);
var str2 = StringChecks.convertToUpperCase("hello world");
console.log(str2);
var str3 = StringChecks.convertToLowerCase("HELLO");
console.log(str3);
var str4 = StringChecks.convertToStringBold("Hello World");
console.log(str4);

ตอนนี้คุณสามารถใช้ test.js ในไฟล์ HTML ร่วมกับไฟล์ไลบรารี testString.js ได้แล้ว

<html>
<head>
    <title>Test TypeScript Ambient</title>
    <script src="testString.js"></script>
    <script src="test.js"></script>
</head>
<body>
</body>
</html>

Output:

true
HELLO WORLD
hello
<b>Hello World</b>

ต่อไป ให้เปรียบเทียบสองภาษานี้โดยตรงใน TypeScript vs Javaต้นฉบับกลับมาเยี่ยมชมอีกครั้ง Javaวิธีการอาร์เรย์สคริปต์ สำหรับคำเทียบเท่าที่ไม่มีประเภทที่ใช้ในที่นี้ และการศึกษา ลูปใน Javaต้นฉบับ และ ภายในและภายนอก Javaต้นฉบับ สำหรับพื้นฐานของเบราว์เซอร์ ผลลัพธ์ที่คอมไพล์แล้วนั้นขึ้นอยู่กับสิ่งเหล่านั้น

คำถามที่พบบ่อย