TSX 是 TypeScript 与 JSX 的结合，它是编写 React 组件的标准语法扩展。简单来说：
TSX = TypeScript（带类型系统的 JavaScript） + JSX（JavaScript XML）

核心概念解析：

JSX 本质

• 语法糖：允许在 JavaScript 中写类 HTML 标签（实际编译为 React.createElement()）
• 示例对比：

// JSX 写法

const element = <h1 className="title">Hello TSX!</h1>

// 编译后的 JavaScript

const element = React.createElement('h1', { className: 'title' }, 'Hello TSX!')

TypeScript 加持

• 为 JSX 添加静态类型检查，在编码时捕获错误
• 提供组件 Props/State 的类型安全

tsx

interface ButtonProps {

variant: 'primary' | 'secondary'; // 明确可选值

size?: number; // 可选属性

onClick: () => void; // 函数类型定义

}

const Button = ({ variant, size = 24, onClick }: ButtonProps) => (

<button

style={{ fontSize: size }}

className={`btn-${variant}`}

onClick={onClick}

>

Click

</button>

);

为什么需要 TSX 呢？

典型应用场景

tsx

// 带类型的安全组件

type UserCardProps = {

user: {

id: number;

name: string;

avatarUrl: string;

};

onFollow?: (userId: number) => void; // 可选回调函数

};

const UserCard = ({ user, onFollow }: UserCardProps) => (

<div className="card">

<img src={user.avatarUrl} alt={user.name} width={80} />

<h2>{user.name}</h2>

{onFollow && (

<button onClick={() => onFollow(user.id)}>

Follow

</button>

)}

</div>

);

// 使用组件时获得类型提示

<UserCard

user={{ id: 1, name: "Alice", avatarUrl: "/alice.jpg" }}

onFollow={(id) => console.log(`Followed ${id}`)}

/>

// 错误示例：缺少必要属性

// <UserCard /> // TS报错: Property 'user' is missing

编译过程

最佳实践

• 组件类型声明

tsx

// 函数组件

const Component: React.FC<Props> = ({ children }) => (...)

// 更推荐直接标注 props (避免 FC 的隐式 children)

const Component = (props: Props & { children?: ReactNode }) => (...)

• 类型复用技巧

tsx

// 继承原生元素属性

type ButtonProps = React.ComponentPropsWithoutRef<'button'> & {

variant?: 'primary' | 'outline';

};

// 复用其他组件类型

type ModalProps = Pick<DialogProps, 'size' | 'position'> & {

title: string;

};

• 泛型组件 (灵活数据处理)

tsx

interface ListProps<T> {

items: T[];

renderItem: (item: T) => React.ReactNode;

}

function List<T>({ items, renderItem }: ListProps<T>) {

return <div>{items.map(renderItem)}</div>;

}

// 使用

<List<{ id: number, text: string }>

items={data}

renderItem={(item) => <li key={item.id}>{item.text}</li>}

/>

重要提示：TSX 文件使用 .tsx 后缀（区别于普通 TypeScript 的 .ts），React 18+ 默认支持 TSX 编译。

通过 TSX，开发者能在组件重用和灵活扩展中获得类型安全保障，这正是平衡复用性与灵活性的关键技术支撑。

好了，爱学习的小伙伴，更多精彩，关注不迷路哟～