資料結構
網路
關係資料庫管理系統(RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學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。之後，我們將 var_type 與 _NonNullable_ 實用程式運算子一起使用，我們可以看到我們不能為變數賦值 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
使用者在本篇文章中學習了八個最常用的 TypeScript 型別實用程式運算子。但是，還有一些其他的，例如 Parameters、InstanceType、Extract 等。
417 次瀏覽
