TypeScript บทช่วยสอน: คืออะไร, อินเทอร์เฟซ, Enum, Array พร้อมตัวอย่าง

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

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

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

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

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

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

ไปที่เว็บไซต์อย่างเป็นทางการของ nodejs : https://nodejs.org/en/download/ และดาวน์โหลดและติดตั้ง nodejs ตามระบบปฏิบัติการของคุณ คำแนะนำโดยละเอียดเกี่ยวกับวิธีดาวน์โหลด nodejs มีอยู่ที่นี่: https://www.guru99.com/download-install-node-js.html

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

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

D:\typeproject>node --version
V10.15.1

D:\typeproject>npm --version
6.4.1

ดังนั้นคุณจึงติดตั้ง nodejs v10 และ npm 6 แล้ว

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

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

npm init

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

ตอนนี้ เราจะสร้างแพ็คเกจ .json ซึ่งจะจัดเก็บการขึ้นต่อกันสำหรับโปรเจ็กต์ของเรา

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

npm -g install typescript

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

npm --save install 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 ดังแสดง:

node_modules/typescript/bin/tsc test.ts

คำสั่งดังกล่าวจะสร้างไฟล์ test.js และจะมีโค้ดที่คอมไพล์เป็นจาวาสคริปต์

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

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

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

ในการนี้ TypeScript บทช่วยสอนเราจะรัน test.js ใน nodejs ดังนี้:

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

ค่าที่คอนโซลจะแสดงในการดำเนินการของ test.js

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

ตัวอย่าง:

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

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

TypeScript รองรับฟีเจอร์ทั้งหมดของ Ecmascript ที่เผยแพร่ และนักพัฒนาสามารถใช้ฟีเจอร์ดังกล่าวได้ในขณะเขียนโค้ด แต่ฟีเจอร์ใหม่ทั้งหมดไม่รองรับเบราว์เซอร์รุ่นเก่า ซึ่งทำให้คุณต้องคอมไพล์ JavaScript เป็น 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 ในเรื่องนี้ TypeScript บทช่วยสอนเป็นเป้าหมาย:

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 คล้ายกับจาวาสคริปต์ และผู้ใช้ที่คุ้นเคยกับจาวาสคริปต์จะพบว่ามันง่ายมาก มีเพียงตัวแปรเช่น ให้ ที่ 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 variable and will be accessible inside function test, it will not be available outside the function.
    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; //variable t is again redeclared inside function with value 10, so here t is local to the function and changes done to it will remain inside the function.
    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(); // the value returned will be undefined. The if-block has the variable which gets executed when I> 0. Over here the if-block is not expected but you are still having a reference to the variable t, and it returns undefined, this is because var defined variables once defined inside a function will have reference to it inside the function.  
i++; // here value of i is incremented.
test(); // since i >0 the if block is executed and value returned is 1.

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

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

ไวยากรณ์:

let name="Roy";

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

ตัวอย่าง:

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

test(); // throws an error : Uncaught ReferenceError: t is not defined.

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

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

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

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

ไวยากรณ์:

const name;

ตัวอย่าง:

const age = "25"; 
age="30"; // will throw an error : Uncaught TypeError: Assignment to constant variable.

ดังนั้นผู้ใช้สามารถใช้ตัวแปร const ได้เฉพาะในกรณีที่รู้ว่าไม่จำเป็นต้องเปลี่ยนค่าที่กำหนดเท่านั้น

ประเภทเข้า TypeScript

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

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

จำนวน
เชือก
บูลีน
ใด
เป็นโมฆะ

จำนวน

รับเฉพาะจำนวนเต็ม ทศนิยม เศษส่วน ฯลฯ

ไวยากรณ์:

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

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

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

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

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

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

ตัวอย่าง : ด้วยเมธอด String ทั้งหมด

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";

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

แยก() - วิธีนี้จะแยกสตริงออกเป็นอาร์เรย์
อักขระ() – เมธอดนี้จะให้อักขระตัวแรกสำหรับดัชนีที่กำหนด
ดัชนีของ() – วิธีการนี้จะให้ตำแหน่งของการเกิดขึ้นครั้งแรกสำหรับค่าที่กำหนด
แทนที่ () – เมธอดนี้ใช้ 2 สตริง อันดับแรกคือค่าที่จะค้นหาในสตริง และหากมีจะแทนที่จะเป็นอันที่ 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 is the value does not exist in the string.
_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"

บูลีน

จะยอมรับค่าตรรกะ เช่น จริง เท็จ 0 และ 1

ไวยากรณ์:

let bflag :boolean = 1;
let status :boolean = true;

ใด

ไวยากรณ์:

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 เป็นภาษาที่มีการกำหนดประเภทข้อมูลอย่างเข้มงวด คุณต้องระบุว่าค่าในอาร์เรย์จะมีประเภทข้อมูลใด มิฉะนั้น ระบบจะถือว่าอาร์เรย์มีประเภทข้อมูลใดก็ได้

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

ไวยากรณ์:

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 will all numbers

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

let alltypes: Array<any> = [true, false, "Harry", 2000, { "a": "50", "b": "20" }]; //array of all types boolean, string , number , object etc.

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

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

ตัวอย่าง:

let years: Array<number> = [ 2016, 2017, 2018, 2019]; //array will all numbers			
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 วัตถุ Array มีคุณสมบัติและวิธีการมากมายที่ช่วยให้นักพัฒนาจัดการอาร์เรย์ได้อย่างง่ายดายและมีประสิทธิภาพ คุณสามารถรับค่าของคุณสมบัติได้โดยการระบุ arrayname.property และเอาต์พุตของเมธอดโดยระบุ array name.method()

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

=> หากคุณต้องการทราบจำนวนองค์ประกอบในอาร์เรย์ คุณสามารถใช้คุณสมบัติ length ได้

Revวิธีการอื่น

=> คุณสามารถกลับลำดับของรายการในอาร์เรย์โดยใช้วิธีย้อนกลับ

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

=> คุณสามารถเรียงลำดับรายการในอาร์เรย์โดยใช้วิธีการเรียงลำดับ

วิธีป๊อป

=> คุณสามารถลบรายการสุดท้ายของอาร์เรย์โดยใช้วิธีป๊อป

Shift วิธี

=> คุณสามารถลบรายการแรกของอาร์เรย์โดยใช้วิธีการ shift ได้

วิธีการผลักดัน

=> คุณสามารถเพิ่มค่าเป็นรายการสุดท้ายของอาร์เรย์ได้

วิธีการเชื่อมต่อ

=> คุณสามารถรวมสองอาร์เรย์เป็นองค์ประกอบอาร์เรย์เดียวได้

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

let years: Array<number> = [2015, 2016, 2017, 2018, 2019]; //array will all numbers			
console.log(years.push(2020)); 			
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/Javaสคริปต์ทำให้ภาษามีพลังมาก

การกำหนดคลาสใน 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;
    }
}

ในตัวอย่างข้างต้น คุณมีชั้นเรียนชื่อนักเรียน มีคุณสมบัติ อายุ ชื่อ และ roll_no

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

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

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

เมธอด Constructor มีพารามิเตอร์ อายุ ชื่อ และ roll_no Constructor จะดูแลการเริ่มต้นคุณสมบัติเมื่อมีการเรียกคลาส เข้าถึงคุณสมบัติโดยใช้ นี้ คำสำคัญ. ตัวอย่าง this.age เพื่อเข้าถึงคุณสมบัติ age, this.roll_no เพื่อเข้าถึง roll_no ฯลฯ คุณยังสามารถมี Constructor เริ่มต้นได้ ดังที่แสดงด้านล่าง:

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 ดังที่แสดงด้านล่างเพื่อคอมไพล์ Javascript.

Command: tsc  Students.ts

ผลลัพธ์ของ Javascript รหัสในการคอมไพล์มีดังต่อไปนี้:

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 Javascriptคลาสจะถูกแปลงเป็นฟังก์ชันที่เรียกใช้ด้วยตนเอง

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

คลาสสามารถสืบทอดได้โดยใช้ ขยายออก คีย์เวิร์ดใน 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 วิธีการและคุณสมบัติ

นี่คือตัวอย่างการทำงานของคลาสที่ใช้ Inheritance

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 จะสามารถเข้าถึงวิธีการและคุณสมบัติของตัวเองได้ เช่นเดียวกับคลาสที่ขยายออกไป

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

ตัวอย่าง:

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);
    }
    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 will พารามิเตอร์ทั้งหมดเป็นพารามิเตอร์ฐานในนั้น นี่จะต้องเป็นสิ่งแรกที่ต้องทำภายในตัวสร้าง super จะดำเนินการคอนสตรัคเตอร์ของคลาสขยาย

ตัวแก้ไขการเข้าถึงใน 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 ซึ่งมีคุณสมบัติความกว้างและความสูง และทั้งสองมีประเภทเป็นสตริง

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

ตัวอย่าง:

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

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

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

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

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() เป็นประเภทการส่งคืน ประเภทการส่งคืนของ getDimension() จะต้องตรงกับคุณสมบัติและประเภทที่กล่าวถึงสำหรับ Interface Dimension

โค้ดที่คอมไพล์แล้วไปที่ Javascript จะเป็นดังนี้:

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"}); // will get "300px-250px"

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

โค้ดที่คอมไพล์แล้วไปที่ Javascript จะเป็นดังนี้:

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() ซึ่งมีค่าส่งคืนเป็นสตริง

โค้ดที่คอมไพล์แล้วไปที่ Javascript จะเป็นดังนี้:

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

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

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

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

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

TypeScript ฟังก์ชั่น:

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

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

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

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

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

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

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

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

let a = getName("John"); // will return Johnundefined.
let b = getName("John", "Harry"); // will return 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("");
}

ดังที่แสดงไว้ข้างต้น พารามิเตอร์ที่เหลือถูกกำหนดโดยใช้ (...param-name); พารามิเตอร์ที่เหลือคืออาร์เรย์ที่นำหน้าด้วยจุดสามจุด อาร์เรย์จะส่งพารามิเตอร์ทั้งหมดไปให้ คุณสามารถเรียกใช้ฟังก์ชันได้ ดังแสดงในตัวอย่างด้านล่าง:

ตัวอย่าง:

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

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

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

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

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

Arrow Function มีประโยชน์อย่างไร?

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

ตัวอย่าง:

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

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

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

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

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

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

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

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

คุณได้เปลี่ยนฟังก์ชันภายใน setTimeout เป็นฟังก์ชันลูกศรดังที่แสดงด้านล่าง:

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

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

TypeScript เอนัมส์

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

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

ไวยากรณ์:

enum NameofEnum {
   value1,
   value2,
    ..
}

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

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

รหัสที่คอมไพล์เป็นจาวาสคริปต์มีดังนี้:

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]);

ตั้งแต่ Javascript ไม่รองรับ enum แต่จะแปลง enum เป็นฟังก์ชันที่เรียกใช้ด้วยตนเองดังที่แสดงด้านบน

ประกาศ 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 North

รหัสที่คอมไพล์เป็นจาวาสคริปต์มีดังนี้:

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 มีการเข้าถึงทั่วโลกซึ่งหมายความว่าตัวแปรที่ประกาศในไฟล์หนึ่งสามารถเข้าถึงได้ง่ายในอีกไฟล์หนึ่ง ลักษณะที่เป็นสากลนี้อาจทำให้เกิดข้อขัดแย้งของโค้ดและอาจทำให้เกิดปัญหากับการดำเนินการในขณะรันไทม์ได้ คุณมีฟังก์ชันการส่งออกและนำเข้าโมดูลซึ่งสามารถใช้เพื่อหลีกเลี่ยงตัวแปรร่วมและความขัดแย้งของฟังก์ชัน คุณลักษณะนี้มีอยู่ใน 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;

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

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

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

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

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

export  nameofthevariable or class name or interface name etc

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

Import {nameof thevariable 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;

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

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

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

export = classname;

import classname = require(“file path of modulename”)

เมื่อคุณใช้งาน ส่งออก= ในการส่งออกโมดูลของคุณ การนำเข้าต้องใช้ need("file path of modulename") เพื่อนำเข้า

นี่คือตัวอย่างการทำงานที่แสดงกรณีข้างต้น:

ลูกค้า.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

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

ตัวอย่าง 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;
});

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

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

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นักเรียน เพื่อเข้าถึงชั้นเรียน

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

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

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

node namespace.js

มันจะแสดงผลเป็น:

The name is: H a r r y

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

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

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

ในการประกาศโมดูลแอมเบียนท์:

declare module moduleName {
   //code here
}

ไฟล์แอมเบียนต์จะต้องบันทึกเป็น:

filename.d.ts

หากต้องการใช้ไฟล์ ชื่อไฟล์.d.ts ใน .ts ของคุณ คุณต้องอ้างอิงเป็น:

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

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

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

ตัวอย่าง: 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 และ converToStringBold

การสร้าง Ambient Module ใน TypeScript

ตอนนี้จะสร้างโมดูลแอมเบียนต์ซึ่งจะมีการอ้างอิงถึงฟังก์ชัน js ด้านบนและเพิ่มการตรวจสอบประเภทตามความต้องการของเรา

ชื่อไฟล์ : 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

=> สิ่งนี้จะใช้พารามิเตอร์เป็นสตริงและประเภทการส่งคืนจะเป็นบูลีน เมื่อใช้ในไฟล์ .ts ของคุณ ในกรณีที่คุณส่งพารามิเตอร์เป็นตัวเลขหรือสิ่งอื่นที่ไม่ใช่สตริง จะทำให้คุณเกิดข้อผิดพลาดประเภทการคอมไพล์

ConvertToUpperCase(str:สตริง): string

=> สิ่งนี้จะรับอาร์กิวเมนต์เป็นสตริงและส่งคืนสตริงเช่นเดียวกัน ConvertToLowerCase (str: สตริง)
: สตริง; และ ConvertToStringBold(str: สตริง): string
;

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

declare var StringChecks: TestString.StringsFunc;

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

ตอนนี้นี่คือไฟล์ test.ts ซึ่งจะใช้ไฟล์โดยรอบ tstring.d.ts

ตัวอย่าง: test.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);

คอมไพล์ TypeScript 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="testStrings.js"></script>			
    <script src="test.js"></script>			
</head>			
<body>			
</body>			
</html>

นี่คือผลลัพธ์ที่เห็นในคอนโซล:

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

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

มาดูสถานที่สำคัญทางประวัติศาสตร์ของ TypeScript:

หลังจากสองปีของการพัฒนาภายในที่ Microsoft. TypeScript 0.9 เปิดตัวในปี 2013
การสนับสนุนเพิ่มเติมสำหรับยาชื่อสามัญ TypeScript 1.0 เปิดตัวในงาน Build 2014
ในเดือนกรกฎาคม 2014 ใหม่ TypeScript คอมไพเลอร์มาถึงแล้วซึ่งเร็วกว่าเวอร์ชั่นก่อนหน้าถึง 5 เท่า
ในเดือนกรกฎาคม 2015 รองรับโมดูล ES6, คีย์เวิร์ดเนมสเปซ, สำหรับ, การสนับสนุน, มัณฑนากร
ในเดือนพฤศจิกายน 2016 คุณลักษณะที่เพิ่มเข้ามา เช่น ประเภทคีย์และการค้นหาของประเภทที่แมป และส่วนที่เหลือ
เมื่อวันที่ 27 มีนาคม 2018 ประเภทตามเงื่อนไข คีย์ที่ได้รับการปรับปรุงพร้อมการรองรับประเภททางแยกที่เพิ่มเข้ามา TypeScript.

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

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

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

ใครใช้ TypeScript?

ต่อไปนี้คือแอปพลิเคชันบางส่วนที่พบบ่อยที่สุดของ TypeScript:

ทีมงานเชิงมุมใช้ TypeScript.
การติดตั้ง NodeJS และ NPM
TypeScript การติดตั้ง
คอมไพล์ TypeScript รหัสถึง Javascript
รันโค้ดโดยใช้ Nodejs
ดำเนินงาน Javascript ในเบราว์เซอร์
คอมไพล์ TypeScript รหัสถึง Javascript โดยใช้เวอร์ชัน EcmaScript
คุณสามารถคอมไพล์โค้ดที่เขียนได้อย่างง่ายดาย TypeScript ไปยัง Javaสคริปต์ที่ใช้ NodeJS
เพื่อที่จะได้ร่วมงานด้วย TypeScript คุณต้องดาวน์โหลดและติดตั้ง NodeJS ก่อน

สรุป

TypeScript เป็น superset ของ Javaต้นฉบับ TypeScript เป็นภาษาโปรแกรมเชิงวัตถุล้วนๆ ที่รองรับคลาส อินเทอร์เฟซ ฯลฯ
TypeScript รองรับฟีเจอร์ Ecmascript ทั้งหมดที่เปิดตัว และนักพัฒนาสามารถใช้คุณสมบัติเดียวกันในขณะเขียนโค้ดได้
ตัวแปรใช้ในการจัดเก็บค่า และค่าอาจเป็นสตริง ตัวเลข บูลีน หรือนิพจน์
In TypeScriptประเภทของตัวแปรจะถูกกำหนดในตอนเริ่มต้นเท่านั้น และในระหว่างการดำเนินการ จะต้องรักษาประเภทเดียวกันไว้ การเปลี่ยนแปลงใดๆ จะทำให้เกิดข้อผิดพลาดในระหว่างการคอมไพล์ระหว่างการคอมไพล์เป็น JavaScript
อาร์เรย์ใน TypeScript เป็นประเภทข้อมูลที่คุณสามารถเก็บค่าได้หลายค่า
Class เป็นคุณสมบัติใหม่ที่เพิ่มเข้ามาจาก ES6 เป็นต้นไป ดังนั้นก่อนหน้านี้ใน Javaสคริปต์ฟังก์ชันประเภทคลาสได้รับการทดลองใช้ฟังก์ชันที่มีฟังก์ชันต้นแบบเพื่อนำโค้ดมาใช้ซ้ำ
TypeScript รองรับตัวแก้ไขการเข้าถึงสาธารณะ ส่วนตัว และได้รับการป้องกันสำหรับวิธีการและคุณสมบัติของคุณ
หนึ่งในคุณสมบัติหลักของ TypeScript คืออินเทอร์เฟซ อินเทอร์เฟซคือชุดของกฎที่กำหนดซึ่งจำเป็นต้องนำไปใช้โดยเอนทิตีที่ใช้กฎนั้น
ฟังก์ชั่นคือชุดคำสั่งที่ดำเนินการเพื่อดำเนินงาน
TypeScript Enum เป็นวัตถุที่มีคอลเลกชันของค่าที่เกี่ยวข้องเก็บไว้ด้วยกัน

ที่คุณอาจชอบ:

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

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

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

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

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

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

ตัวแปรใน TypeScript

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

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

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

ประเภทเข้า TypeScript

จำนวน

เชือก

บูลีน

ใด

เป็นโมฆะ

TypeScript แถว

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

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

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

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

การใช้ for-of loop

การใช้ลูป foreach

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

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

Revวิธีการอื่น

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

วิธีป๊อป

Shift วิธี

วิธีการผลักดัน

วิธีการเชื่อมต่อ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

อินเทอร์เฟซเป็นพารามิเตอร์ฟังก์ชัน

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

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

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

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

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

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

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

Arrow Function มีประโยชน์อย่างไร?

TypeScript เอนัมส์

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

ประกาศ Enum ด้วยค่าตัวเลข

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

ประกาศ Enum ด้วยค่าสตริง

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

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

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

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

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

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

ตัวอย่าง testCustomer.ts เพื่อ testCustomer.js โดยใช้ Requirejs

ตัวอย่าง Customer.ts ถึง Customer.js โดยใช้ Requirejs

เนมสเปซใน TypeScript

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

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

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

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

ในการประกาศโมดูลแอมเบียนท์:

ไฟล์แอมเบียนต์จะต้องบันทึกเป็น: