已解決：字符串對象

最後更新： 09/11/2023
作者： JavaScript 原始碼追蹤

在 Web 開發中，對象和字符串的操作是顯而易見且至關重要的。 無論是像 TypeScript 這樣的靜態類型語言，還是像 JavaScript 這樣的動態類型語言，對這些基礎知識的敏銳理解都有助於讓編碼之旅更加順利。 本文提供了一種在 TypeScript 中處理字符串信封的綜合方法。

解決方案取決於識別當前的挑戰，其中問題通常是由管理對象的屬性、訪問或更改與這些屬性關聯的值或兩者兼而有之而引起的。 

interface StringObject {
    [key: string]: string;
}

let obj: StringObject= {
    prop1: "value1",
    prop2: "value2",
};

我們定義了一個接口“StringObject”，其中包含“string”類型的鍵和“string”類型的相應值。 然後聲明一個名為“obj”的“StringObject”。

了解對象和屬性

TypeScript 中的對像類似於現實生活中的對象，具有可被視為這些對象的特性或屬性的屬性。 每個屬性都提升一個鍵（屬性名稱）和一個值（屬性值）。 對象的鍵是字符串或符號。 這些值可以是任何數據類型。

探索 KeyOf、In 和 TypeOf 關鍵字

在 TypeScript 領域，“keyof”關鍵字具有重要作用。 TypeScript 使用帶有“keyof”和“in”的索引類型來迭代鍵。

type ObjectKeys = keyof StringObject;

for(let key in obj){
   let value: StringObject[ObjectKeys];
   value = obj[key];
   console.log(value);
}

`keyof` 是一個關鍵字，它生成可能的屬性名稱的字符串或數字文字聯合。 在這裡，我們創建了一個新類型“ObjectKeys”，它將對應於“StringObject”的鍵。

接下來，我們使用“for..in”循環來遍歷 obj 中的屬性，並將相應的值分配給變量“value”，其類型為“StringObject[ObjectKeys]”。

TypeScript 庫的強大功能

TypeScript 的一大優勢是它可以編譯為簡單的 JavaScript。 這意味著對於我們程序員來說，除了 TypeScript 自己的庫之外，從 React 到 Express 的數千個高質量 JavaScript 庫仍然可供我們使用，進一步增強了 TypeScript 的功能。

使用 Array.Prototype.Map()

TypeScript 擴展了 JavaScript 的 ES6 功能，例如 Array 的 map 函數。 該函數對於轉換和操作數組很方便。

let propValues = Object.keys(obj).map(key => obj[key]);
console.log(propValues);

在這裡，我們使用“Object.keys(obj)”創建“obj”屬性的數組，然後通過“map()”函數將其轉換為相應值的數組。

請記住： 掌握 TypeScript 這樣的編程語言的關鍵是不斷的探索和應用，從掌握對象和字符串的基礎知識到各種 TypeScript 庫的實現。 理解概念，整合它們，並見證您的 TypeScript 效率的增長。

相關文章：