TypeScript

多虧了 TypeScript，你可以為 JavaScript 新增靜態型別，以提升開發者生產力與程式碼品質。

最低配置

Material UI 需要 TypeScript 4.9 以上的最低版本。請參考搭配 TypeScript 的 Vite.js 範例。

為了讓型別能正常運作，建議您至少在 tsconfig.json 中啟用以下選項

{
  "compilerOptions": {
    "lib": ["es6", "dom"],
    "noImplicitAny": true,
    "noImplicitThis": true,
    "strictNullChecks": true,
    "allowSyntheticDefaultImports": true
  }
}

嚴格模式選項與 @types/ 命名空間中發布的每個型別套件要求相同。使用較不嚴格的 tsconfig.json 或省略某些函式庫可能會導致錯誤。為了獲得最佳的型別體驗，我們建議將 "strict": true 設為啟用。

處理 value 和事件處理器

許多與使用者輸入相關的元件都提供 value 屬性或事件處理器，其中包含目前的 value。在大多數情況下，該 value 僅在 React 內部處理，因此可以是任何型別，例如物件或陣列。

然而，在型別取決於元件子項目的情況下，例如 Select 或 RadioGroup，該型別無法在編譯時驗證。這表示最穩健的選項是將其型別設為 unknown，並讓開發者決定他們要如何縮小該型別的範圍。基於與 React 中 event.target 不是泛型型別相同的原因，我們在這些情況下不提供使用泛型型別的可能性。

這些範例包含使用型別轉換的型別變體。這是一個可接受的權衡，因為這些型別都位於單一檔案中，而且非常基本。您必須自行決定是否可以接受相同的權衡。程式庫型別預設為嚴格，並可選擇性地放寬。

Theme 的客製化

已移至自訂主題頁面。

component 屬性的複雜性

由於 TypeScript 的某些限制，如果您要基於 Material UI 的元件建立自訂元件，則使用 component 屬性可能會產生問題。對於元件的組合，您可能需要使用以下兩種選項之一

1. 包裝 Material UI 元件以增強其功能
2. 使用 styled() 工具程式來自訂元件的樣式

如果您使用第一個選項，請參閱組合指南以了解更多詳細資訊。

如果您使用 styled() 工具程式（無論它來自 @mui/material 或 @emotion/styled），您都需要轉換產生的元件，如下所示

import Button from '@mui/material/Button';
import { styled } from '@mui/material/styles';

const CustomButton = styled(Button)({
  // your custom styles go here
}) as typeof Button;