阿川私房教材:學程式,拿 offer!

63 個專案實戰,直接上手!
無需補習,按步驟打造你的面試作品。

立即解鎖你的轉職秘笈

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

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

假設您有以下資料:

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 則留言


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

阿川私房教材:學程式,拿 offer!

63 個專案實戰,直接上手!
無需補習,按步驟打造你的面試作品。

立即解鎖你的轉職秘笈