本文讲解如何修复 react + typescript 中因作用域、类型传递和逻辑结构错误导致的多语言组件失效问题，并提供可维护、类型安全的重构方案。
本文讲解如何修复 react + typescript 中因作用域、类型传递和逻辑结构错误导致的多语言组件失效问题，并提供可维护、类型安全的重构方案。
在构建设计系统时，组件的类型安全性与逻辑内聚性至关重要。你提供的原始代码存在多个关键问题：getTilte 拼写错误、linguage 变量在闭包外未定义、函数式组件嵌套逻辑错位、属性展开（{...{ linguage: 'pt-BR' }}）误用，以及将语言逻辑分散在独立函数中却未统一接收参数——这些都破坏了 TypeScript 的类型推导与 React 的渲染契约。
以下是经过专业重构的解决方案，兼顾类型精确性、可读性与可扩展性：
import React from 'react';
import './title.css';
export type LanguageCode = 'pt-BR' | 'es-CL' | 'en-US';
export type TitleProps = {
language: LanguageCode; // ✅ 修正属性名：linguage → language（更符合国际惯例）
};
// ✅ 使用 React.FC<T> 显式标注函数组件类型，增强类型检查
export const Title: React.FC<TitleProps> = ({ language }) => {
// ✅ 内联逻辑：根据 language 动态生成文案与 className
const getText = (): string => {
switch (language) {
case 'pt-BR': return 'Gerenciamos sua TI com excelência';
case 'en-US': return 'We manage your IT with excellence';
case 'es-CL': return 'Gestionamos tu TI con excelencia';
default: throw new Error(`Unsupported language: ${language}`);
}
};
const getClassName = (): string => {
switch (language) {
case 'pt-BR': return 'storybook-title-portugues';
case 'en-US': return 'storybook-title--english';
case 'es-CL': return 'storybook-title--espanol';
default: return 'storybook-title--default';
}
};
return <h1 className={getClassName()}>{getText()}</h1>;
};关键改进说明：
- 命名规范：将 linguage 改为 language，避免拼写歧义，提升团队协作可读性；
- 作用域修复：所有逻辑封装在 Title 组件作用域内，language 参数可直接访问，杜绝 ReferenceError；
- 类型强化：使用 React.FC<TitleProps> 明确组件签名，配合 switch 语句确保穷尽所有联合类型分支（TypeScript 会提示遗漏 case）；
- 错误防御：default 分支抛出明确错误，便于开发阶段快速定位非法语言值；
- 无副作用：不依赖外部状态或闭包变量，组件纯函数化，利于测试与复用。
⚠️ 重要提醒：此方案适用于轻量级多语言场景（如 Storybook 示例页）。若项目需支持动态语言切换、复数规则、日期/数字本地化等完整 i18n 能力，请务必引入成熟方案，例如：
- i18next + react-i18next（行业标准，生态完善）
- @formatjs/intl（专注格式化，性能优异）
- Next.js 内置 next-intl（服务端渲染友好）
切勿在生产设计系统中手动维护多语言映射表——它将迅速成为技术债温床。真正的设计系统应聚焦 UI 原子性与组合性，而国际化交由专用库处理，这才是专业工程实践的分层之道。
