TypeScript

得益于 TypeScript，你可以为 JavaScript 添加静态类型，从而提高开发者生产力和代码质量。

最小配置

Material UI 需要最低版本的 TypeScript 4.9。请查看 Vite.js with TypeScript 示例。

为了使类型生效，建议你在你的 tsconfig.json 中至少启用以下选项

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

严格模式选项与 @types/ 命名空间中发布的每个类型包所需选项相同。使用不太严格的 tsconfig.json 或省略某些库可能会导致错误。为了获得最佳类型体验，我们建议将 "strict": true 设置为 true。

处理 value 和事件处理程序

许多与用户输入相关的组件都提供了 value prop 或包含当前 value 的事件处理程序。在大多数情况下，value 仅在 React 中处理，这使其可以是任何类型，例如对象或数组。

但是，在依赖组件子组件的情况下，例如 Select 或 RadioGroup，无法在编译时验证该类型。这意味着最可靠的选择是将其类型设置为 unknown，并让开发者决定如何缩小该类型范围。由于 event.target 在 React 中不是泛型的原因相同，因此我们不提供在这些情况下使用泛型类型的可能性。

这些演示包括使用类型转换的类型化变体。这是一个可接受的权衡，因为这些类型都位于单个文件中并且非常基础。您必须自己决定相同的权衡对您是否可以接受。库类型默认情况下是严格的，通过选择加入变得宽松。

Theme 的定制

已移动到自定义主题页面。

component prop 的复杂性

由于某些 TypeScript 限制，如果您正在基于 Material UI 的组件创建自定义组件，则使用 component prop 可能会有问题。对于组件的组合，您可能需要使用以下两个选项之一

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;