TypeScript 官方手冊翻譯計劃【八】：型別操控-按索引訪問的型別

Chor發表於2021-12-04
TypeScript型別索引
  • 說明：目前網上沒有 TypeScript 最新官方文件的中文翻譯，所以有了這麼一個翻譯計劃。因為我也是 TypeScript 的初學者，所以無法保證翻譯百分之百準確，若有錯誤，歡迎評論區指出；
  • 翻譯內容：暫定翻譯內容為 TypeScript Handbook，後續有空會補充翻譯文件的其它部分；
  • 專案地址：TypeScript-Doc-Zh，如果對你有幫助，可以點一個 star ~

本章節官方文件地址：Indexed Access Type

按索引訪問的型別

我們可以訪問某個型別上的特定屬性，從而獲取該屬性的型別。這種型別稱為按索引訪問的型別。

type Person = { age: number; name: string; alive: boolean };
type Age = Person["age"];
     ^^^
    // type Age = number

索引型別本身也是一個型別，所以它完全可以和聯合型別、keyof 或者其它型別搭配使用：

type I1 = Person["age" | "name"];
     ^
    // type I1 = string | number
 
type I2 = Person[keyof Person];
     ^ 
    // type I2 = string | number | boolean
 
type AliveOrName = "alive" | "name";
type I3 = Person[AliveOrName];
      ^ 
    // type I3 = string | boolean

如果嘗試索引一個不存在的屬性，則會丟擲錯誤：

type I1 = Person["alve"];    
                ^^^^^^            
// Property 'alve' does not exist on type 'Person'.

此外，我們還可以使用 number 獲取陣列元素的型別。我們可以將其與 typeof 相結合，方便地捕獲陣列字面量的元素型別：

const MyArray = [
  { name: "Alice", age: 15 },
  { name: "Bob", age: 23 },
  { name: "Eve", age: 38 },
];
 
type Person = typeof MyArray[number];
     ^^^^^^  
/* type Person = {
           name: string;
        age: number;
   } */
   
type Age = typeof MyArray[number]["age"];
     ^^^
   // type Age = number
// 或者
type Age2 = Person["age"];
     ^^^ 
    // type Age2 = number

你只能使用型別作為索引，也就是說，使用 const 建立的變數引用是不能作為索引的：

const key = "age";
type Age = Person[key];
                ^^^^
/*                    
Type 'key' cannot be used as an index type.
'key' refers to a value, but is being used as a type here. Did you mean 'typeof key'?
*/

不過，你可以改用型別別名重寫這段程式碼：

type key = "agr";
type Age = Person[key];

相關文章