小編精選 - 技術文章翻譯 · 02月25日

TypeScript - 使用 typeof 從資料中取得類型

確保為變數設定的值符合您的預期的一個好方法是為它們設定特定類型。

如果您已經在物件或陣列中擁有資料。以下方法非常適合建立您的類型！

假設您有以下資料：

const data = {
  value: 123,
  text: 'text'
};

然後您可以使用以下命令建立基於該類型的類型：

type Data = typeof data;
// type Data = {
//   value: number;
//   text: string;
// }

您可以對嵌套物件執行相同的操作：

const data = {
  value: 123,
  text: 'text',
  subData: {
    value: false
  }
};
type Data = typeof data;
// type Data = {
//   value: number;
//   text: string;
//   subData: {
//     value: boolean;
//   };
// }

從 TypeScript 3.4 開始，如果你有一個字串陣列，你可以執行以下操作（注意as const ）：

const data = ['text 1', 'text 2'] as const;
type Data = typeof data[number];
// type Data = "text 1" | "text 2"

也可以從有物件的陣列中取得類型：

const locales = [
  {
    locale: 'se',
    language: 'Swedish',
  },
  {
    locale: 'en',
    language: 'English',
  }
] as const;
type Locale = typeof locales[number]['locale'];
// type Locale = "se" | "en"

也可以從鍵取得類型：

const currencySymbols = {
  GBP: '£',
  USD: '$',
  EUR: '€',
}
type CurrencySymbol = keyof typeof currencySymbols;
// type CurrencySymbol = "GBP" | "USD" | "EUR"

關於as const與使用<const>的通知。它們的工作原理相同，但<const>在 .tsx 檔案中會失敗（React）。

const data = ['text 1', 'text 2'] as const;
// is the same as
const data = <const>['text 1', 'text 2'];

原文出處：https://dev.to/andreasbergqvist/typescript-get-types-from-data-using-typeof-4b9c

0個讚 0留言 213瀏覽

共有 0 則留言

登入之後發表留言

文字內容提供幾種功能：
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式

小編精選 - 技術文章翻譯

精選技術文章翻譯，幫助開發者持續吸收新知。