資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何在 TypeScript 中使用介面和類？
在 TypeScript 中，類是定義變數和方法的模板。我們可以使用類模板建立物件，這意味著類是面向物件程式設計中的可重用元件，我們可以透過建立其物件來重用它。
我們可以使用“interface”關鍵字在 TypeScript 中定義介面。介面包含類結構。介面類似於我們在其他程式語言（如 Java 和 C++）中定義的抽象類。它僅包含變數及其型別以及方法及其返回型別和引數型別的宣告。類定義介面的方法並初始化在介面中宣告的變數的值。
在 TypeScript 中使用類實現介面
在本節中，我們將學習如何建立和使用類實現介面。我們可以使用“implements”關鍵字將任何介面實現到類中。
語法
在下面的語法中，我們建立了介面和類。此外，我們還展示了將介面實現到類的語法。
interface Wall {
// variable and method declaration
color: string;
get_size: () => number;
}
class WallDetails implements Wall {
// defining the variables and methods
color = "#434322";
get_size() {
return 20;
}
}
步驟
步驟 1 - 首先，建立 Wall 介面，其中包含 wall_id 和 color 變數宣告。
步驟 2 - 宣告 get_size() 方法，該方法將 wall_id 作為引數並返回數字。
步驟 3 - 宣告 get_wall_message() 方法，該方法不帶任何引數，但返回字串。
步驟 4 - 定義名為 walllDetails 的類，並使用 implements 關鍵字將 Wall 介面實現到 wallDetails 類。在 wallDetails 類中，使用建構函式初始化 wall_id 和 color 變數。
步驟 5 - 接下來，定義 get_size() 方法，該方法根據其作為引數獲取的 wall_id 值返回牆的大小。此外，實現 get_wall_size() 方法，該方法始終返回相同的字串訊息。
示例 1
以下示例演示了建立 wall 介面並將其實現到 wallDetails 類中。
此外，我們建立了 wallDetails 類的 wall1 物件，其 wall_id 為 1。當我們以 wall1 物件為參考呼叫 get_size() 和 get_wall_message() 方法時，使用者可以觀察輸出。
// defining the wall interface
interface Wall {
// variable and method declaration
wall_id: number;
get_size: (wall_id: number) => number;
get_wall_message: () => string;
}
class WallDetails implements Wall {
// defining the variables and methods
wall_id: number;
// constructor to initialize the variables
constructor(wall_id: number) {
this.wall_id = wall_id;
}
get_size(wall_id: number): number {
if (wall_id < 10) {
return 10;
} else if (wall_id > 10 && wall_id < 50) {
return 50;
}
return 100;
}
get_wall_message(): string {
return "Don't draw pictures on the wall!";
}
}
let wall1 = new WallDetails(1);
console.log("The size of the wall1 is " + wall1.get_size(wall1.wall_id));
console.log("The message of the wall1 is " + wall1.get_wall_message());
編譯後，它將生成以下 JavaScript 程式碼 -
var WallDetails = /** @class */ (function () {
// constructor to initialize the variables
function WallDetails(wall_id) {
this.wall_id = wall_id;
}
WallDetails.prototype.get_size = function (wall_id) {
if (wall_id < 10) {
return 10;
}
else if (wall_id > 10 && wall_id < 50) {
return 50;
}
return 100;
};
WallDetails.prototype.get_wall_message = function () {
return "Don't draw pictures on the wall!";
};
return WallDetails;
}());
var wall1 = new WallDetails(1);
console.log("The size of the wall1 is " + wall1.get_size(wall1.wall_id));
console.log("The message of the wall1 is " + wall1.get_wall_message());
輸出
以上程式碼將產生以下輸出 -
The size of the wall1 is 10 The message of the wall1 is Don't draw pictures on the wall!
示例 2
在下面的示例中，我們定義了 card 介面，其中包含 card_size、gradient 和 card_phone_No 屬性。gradient 屬性是可選的，以便我們可以在沒有 gradient 的情況下建立 card 型別的物件。card_phone_No 是一個只讀屬性，這意味著我們無法修改該屬性。
我們建立了型別為 card 的 card_obj1，其中包含所有 3 個屬性及其值。此外，我們建立了型別為 card 的 card_ob2，它不包含 gradient 屬性，但它仍然可以成功編譯，因為 gradient 是可選的。
// Creating the card interface containing the card_size, gradient, and card_phone_No properties
interface card {
card_size: number;
gradient?: string;
readonly card_phone_No: number;
}
// defining the card_obj1 with all 3 properties
let card_obj1: card = {
card_size: 20,
gradient: "black-white",
card_phone_No: 92323232332,
};
// defining the card_obj2 object without gradient property as it is an optional
let card_obj2: card = {
card_size: 10,
card_phone_No: 446189746464,
};
// card_obj1.card_phone_No = 2398456456657 // this gives an error as card_phone_No is read only, we can't modify it.
console.log(
"Printing the card_obj2 details
" +
"Card size: " + card_obj2.card_size +
"Phone No : " + card_obj2.card_phone_No +
"
gradient: " +card_obj2.gradient
);
在輸出中，我們可以看到 card_ob2 的 gradient 屬性的值為 undefined。
編譯後，它將生成以下 JavaScript 程式碼 -
// defining the card_obj1 with all 3 properties
var card_obj1 = {
card_size: 20,
gradient: "black-white",
card_phone_No: 92323232332
};
// defining the card_obj2 object without gradient property as it is an optional
var card_obj2 = {
card_size: 10,
card_phone_No: 446189746464
};
// card_obj1.card_phone_No = 2398456456657 // this gives an error as card_phone_No is read only, we can't modify it.
console.log("Printing the card_obj2 details" +
"
Card size: " + card_obj2.card_size +
"
Phone No : " + card_obj2.card_phone_No +
"gradient: " + card_obj2.gradient);
輸出
以上程式碼將產生以下輸出 -
Printing the card_obj2 details Card size: 10 Phone No : 446189746464 gradient: undefined
示例 3
在下面的示例中，我們定義了介面 func_type，其中包含單個函式的結構。之後，我們定義了 func1() 變數，它將字串作為第一個引數，將布林值作為第二個引數，並列印引數值。
之後，我們建立了型別為 function_type 的 func_variable 並將其值賦值為 func1。之後，我們使用 func_variable 呼叫 func1() 函式。
// defining the interface as a function type
interface function_type {
// function takes two parameters; string and boolean and returns void
(param1: string, param2: boolean): void;
}
// func1 prints the parameter values
function func1(param1: string, param2: boolean): void {
console.log("The value of param1 is " + param1);
console.log("The value of the param2 is " + param2);
}
// func_variable is of type function_type interface and assigned the func1 function
let func_variable: function_type = func1;
// we can call func1() via func_variable
func_variable("TutorialsPoint", true);
編譯後，它將生成以下 JavaScript 程式碼 -
// func1 prints the parameter values
function func1(param1, param2) {
console.log("The value of param1 is " + param1);
console.log("The value of the param2 is " + param2);
}
// func_variable is of type function_type interface and assigned the func1 function
var func_variable = func1;
// we can call func1() via func_variable
func_variable("TutorialsPoint", true);
輸出
以上程式碼將產生以下輸出 -
The value of param1 is TutorialsPoint The value of the param2 is true
在本教程中，我們學習瞭如何在 TypeScript 中使用介面和類。
2K+ 瀏覽量
