TypeScript - 實用型別

上一頁
下一頁

TypeScript 允許我們從現有型別建立新型別，我們可以使用實用型別進行這種轉換。

TypeScript 中存在各種實用型別，我們可以根據型別轉換的需求使用任何實用型別。

讓我們用 TypeScript 的例子來討論不同的實用型別。

TypeScript 中的 Partial 型別

Partial 實用型別將當前型別的全部屬性轉換為可選屬性。partial 的含義是全部、部分或無。因此，它使所有屬性都可選，使用者可以在使用物件重構程式碼時使用它。

示例

在下面的示例中，我們建立了包含一些可選屬性的型別。之後，我們使用 Partial 實用型別建立了一個 partialType 物件。使用者可以看到我們沒有初始化 partialType 物件的所有屬性，因為所有屬性都是可選的。

type Type = {
   prop1: string;
   prop2: string;
   prop3: number;
   prop4?: boolean;
};

let partialType: Partial<Type> = {
   prop1: "Default",
   prop4: false,
};

console.log("The value of prop1 is " + partialType.prop1);
console.log("The value of prop2 is " + partialType.prop2);

編譯後，它將生成以下 JavaScript 程式碼：

var partialType = {
   prop1: "Default",
   prop4: false
};
console.log("The value of prop1 is " + partialType.prop1);
console.log("The value of prop2 is " + partialType.prop2);

輸出

上述程式碼將產生以下輸出：

The value of prop1 is Default
The value of prop2 is undefined

TypeScript 中的 Required 型別

Required 實用型別允許我們轉換型別，使其所有屬性都成為必需的。當我們使用 Required 實用型別時，它會將所有可選屬性變為必需屬性。

示例

在這個例子中，Type 包含prop3可選屬性。使用 Required 實用運算子轉換 Type 後，prop3 也變成了必需屬性。如果我們在建立物件時沒有為prop3賦值，則會產生編譯錯誤。

type Type = {
   prop1: string;
   prop2: string;
   prop3?: number;
};
let requiredType: Required<Type> = {
   prop1: "Default",
   prop2: "Hello",
   prop3: 40,
};
console.log("The value of prop1 is " + requiredType.prop1);
console.log("The value of prop2 is " + requiredType.prop2);

編譯後，它將生成以下 JavaScript 程式碼：

var requiredType = {
   prop1: "Default",
   prop2: "Hello",
   prop3: 40
};
console.log("The value of prop1 is " + requiredType.prop1);
console.log("The value of prop2 is " + requiredType.prop2);

輸出

上述程式碼將產生以下輸出：

The value of prop1 is Default
The value of prop2 is Hello

TypeScript 中的 Pick 型別

Pick 實用型別允許我們挑選其他型別的屬性型別並建立一個新型別。使用者需要使用字串格式的型別鍵來選擇具有其型別的鍵以包含在新型別中。如果使用者想要選擇具有其型別的多個鍵，則應使用聯合運算子。

示例

在下面的示例中，我們從 type1 中選擇了 color 和 id 屬性，並使用 Pick 實用運算子建立了新型別。使用者可以看到，當他們嘗試訪問newObj的 size 屬性時，會報錯，因為newObj物件的型別不包含 size 屬性。

type type1 = {
   color: string;
   size: number;
   id: string;
};

let newObj: Pick<type1, "color" | "id"> = {
   color: "#00000",
   id: "5464fgfdr",
};
console.log(newObj.color);
// This will generate a compilation error as a type of newObj doesn't contain the size property
// console.log(newObj.size);

編譯後，它將生成以下 JavaScript 程式碼：

var newObj = {
   color: "#00000",
   id: "5464fgfdr"
};
console.log(newObj.color);
// This will generate a compilation error as a type of newObj doesn't contain the size property
// console.log(newObj.size);

輸出

上述程式碼將產生以下輸出：

#00000

TypeScript 中的 Omit 型別

Omit 從型別中刪除鍵並建立一個新型別。它是 Pick 的反義詞。我們使用Omit實用程式運算子的任何鍵都會從型別中刪除這些鍵並返回一個新型別。

示例

在這個例子中，我們使用Omit實用型別從type1中省略了 color 和 id 屬性，並建立了omitObj物件。當用戶嘗試訪問omitObj的 color 和 id 屬性時，會報錯。

type type1 = {
   color: string;
   size: number;
   id: string;
};

let omitObj: Omit<type1, "color" | "id"> = {
   size: 20,
};
console.log(omitObj.size);
// This will generate an error
// console.log(omitObj.color);
// console.log(omitObj.id)

編譯後，它將生成以下 JavaScript 程式碼：

var omitObj = {
   size: 20
};
console.log(omitObj.size);
// This will generate an error
// console.log(omitObj.color);
// console.log(omitObj.id)

輸出

上述程式碼將產生以下輸出：

20

TypeScript 中的 Readonly 型別

我們可以使用Readonly實用型別使所有型別都成為只讀屬性，從而使所有屬性都不可變。因此，我們不能在第一次初始化後為只讀屬性賦值。

示例

在這個例子中，keyboard_type 包含三個不同的屬性。我們使用了Readonly實用型別使 keyboard 物件的所有屬性都成為只讀屬性。只讀屬性意味著我們可以訪問它來讀取值，但我們不能修改或重新賦值。

type keyboard_type = {
   keys: number;
   isBackLight: boolean;
   size: number;
};

let keyboard: Readonly<keyboard_type> = {
   keys: 70,
   isBackLight: true,
   size: 20,
};
console.log("Is there backlight in the keyboard? " + keyboard.isBackLight);
console.log("Total keys in the keyboard are " + keyboard.keys);
// keyboard.size = 30 
// this is not allowed as all properties of the keyboard are read-only

編譯後，它將生成以下 JavaScript 程式碼：

var keyboard = {
   keys: 70,
   isBackLight: true,
   size: 20
};
console.log("Is there backlight in the keyboard? " + keyboard.isBackLight);
console.log("Total keys in the keyboard are " + keyboard.keys);
// keyboard.size = 30 
// this is not allowed as all properties of the keyboard are read-only

輸出

上述程式碼將產生以下輸出：

Is there backlight in the keyboard? true
Total keys in the keyboard are 70

TypeScript 中的 ReturnType 型別

ReturnType 實用型別允許我們根據函式的返回型別為任何變數設定型別。例如，如果我們使用任何庫函式並且不知道函式的返回型別，我們可以使用ReturnType實用程式運算子。

示例

在這個例子中，我們建立了func()函式，它接受一個字串作為引數並返回相同的字串。我們使用了 typeof 運算子在ReturnType實用程式運算子中識別函式的返回型別。

function func(param1: string): string {
   return param1;
}
// The type of the result variable is a string
let result: ReturnType<typeof func> = func("Hello");
console.log("The value of the result variable is " + result);

編譯後，它將生成以下 JavaScript 程式碼：

function func(param1) {
   return param1;
}
// The type of the result variable is a string
var result = func("Hello");
console.log("The value of the result variable is " + result);

輸出

上述程式碼將產生以下輸出：

The value of the result variable is Hello

TypeScript 中的 Record 型別

Record實用型別建立一個物件。我們需要使用Record實用型別定義物件的鍵，它也接受型別並使用該型別的物件定義物件鍵。

示例

在下面的示例中，我們定義了 Employee 型別。之後，為了建立一個new_Employee物件，我們使用了 Record 作為型別實用程式。使用者可以看到，Record 實用程式在new_Employee物件中建立了 Employee 型別的 Emp1 和 Emp2 物件。

此外，使用者還可以看到我們如何訪問new_Employee物件的 Emp1 和 Emp2 物件的屬性。

type Employee = {
   id: string;
   experience: number;
   emp_name: string;
};

let new_Employee: Record<"Emp1" | "Emp2", Employee> = {
   Emp1: {
      id: "123243yd",
      experience: 4,
      emp_name: "Shubham",
   },
   Emp2: {
      id: "2434ggfdg",
      experience: 2,
      emp_name: "John",
   },
};

console.log(new_Employee.Emp1.emp_name);
console.log(new_Employee.Emp2.emp_name);

編譯後，它將生成以下 JavaScript 程式碼：

var new_Employee = {
   Emp1: {
      id: "123243yd",
      experience: 4,
      emp_name: "Shubham"
   },
   Emp2: {
      id: "2434ggfdg",
      experience: 2,
      emp_name: "John"
   }
};
console.log(new_Employee.Emp1.emp_name);
console.log(new_Employee.Emp2.emp_name);

輸出

上述程式碼將產生以下輸出：

Shubham
John

TypeScript 中的 NonNullable 型別

NonNullable實用程式運算子從屬性型別中刪除 null 和 undefined 值。它確保物件中的每個變數都存在且具有定義的值。

示例

在這個例子中，我們建立了 var_type，它也可以是 null 或 undefined。之後，我們使用NonNullable實用程式運算子使用了 var_type，我們可以觀察到我們不能為變數賦值 null 或 undefined。

type var_type = number | boolean | null | undefined;

let variable2: NonNullable<var_type> = false;
let variable3: NonNullable<var_type> = 30;

console.log("The value of variable2 is " + variable2);
console.log("The value of variable3 is " + variable3);
// The below code will generate an error
// let variable4: NonNullable<var_type> = null;

編譯後，它將生成以下 JavaScript 程式碼：

var variable2 = false;
var variable3 = 30;
console.log("The value of variable2 is " + variable2);
console.log("The value of variable3 is " + variable3);
// The below code will generate an error
// let variable4: NonNullable = null;

輸出

上述程式碼將產生以下輸出：

The value of variable2 is false
The value of variable3 is 30
列印頁面
上一頁
下一頁
廣告