React本身是用JavaScript编写的，动态类型虽然灵活，但随着组件数量增加，Props传递链条变长，类型问题会逐渐暴露出来：传错了属性名不报错、忘记传必填参数运行时才崩、State结构变了却找不到所有引用位置。TypeScript恰好能解决这些问题，而在TypeScript体系中，interface是定义Props和State最常用的方式。本文将系统讲解interface在React组件中的应用，包括函数组件、类组件、泛型组件以及一些常见的类型技巧。
函数组件中使用interface定义Props
函数组件是当前React开发的主流形式，为它定义Props类型只需要三步：声明interface、标注参数、导出组件。最基础的写法如下：
interface UserCardProps {
name: string;
age: number;
email?: string; // 问号表示可选属性
}
function UserCard({ name, age, email }: UserCardProps) {
return (
<div>
<h3>{name}</h3>
<p>年龄：{age}</p>
{email && <p>邮箱：{email}</p>}
</div>
);
}
export default UserCard;
这个例子中有几个细节值得注意。首先是命名习惯，推荐以组件名加上Props后缀来命名interface，比如UserCardProps，这样在编辑器中搜索时能快速定位。其次是可选属性的写法，在属性名后面加一个问号，调用方就可以不传这个属性，组件内部使用时TypeScript会强制你处理undefined的情况。
配合箭头函数和React.FC也能实现同样的效果，但需要注意React.FC在较新版本的类型声明中已经不再自动包含children属性，这一点后面会详细说明。如果组件需要接收children，更推荐显式声明：
interface LayoutProps {
title: string;
children: React.ReactNode;
}
const Layout = ({ title, children }: LayoutProps) => (
<section>
<h1>{title}</h1>
{children}
</section>
);
children的类型推荐使用React.ReactNode，它涵盖了ReactElement、string、number、boolean、null等多种可能的情况，比React.ReactChild的范围更广，能兼容几乎所有合法的子节点写法。
类组件中定义Props和State
虽然函数组件加Hooks已经成为主流，但存量项目中仍有大量类组件。类组件的类型定义需要同时处理Props和State两个部分，写法上使用泛型参数：
interface CounterProps {
step: number;
}
interface CounterState {
count: number;
lastUpdated: string | null;
}
class Counter extends React.Component<CounterProps, CounterState> {
state: CounterState = {
count: 0,
lastUpdated: null,
};
handleClick = () => {
this.setState((prev) => ({
count: prev.count + this.props.step,
lastUpdated: new Date().toISOString(),
}));
};
render() {
return (
<button onClick={this.handleClick}>
当前值：{this.state.count}
</button>
);
}
}
这里的关键是React.Component后面的两个泛型参数，第一个对应Props，第二个对应State。如果组件没有内部状态，第二个泛型可以省略或者写成React.Component<CounterProps, {}>。定义了CounterState之后，setState的调用会被严格检查，传入不存在的字段或者类型不匹配的值都会在编译阶段报错。
实际项目中State往往嵌套较深，直接在setState里展开多层对象容易写错。可以借助Partial工具类型只更新部分字段，再与旧状态合并，这样既保留了类型约束，又简化了更新逻辑。另外提醒一点，State中的lastUpdated定义为string而不是Date，是因为JSON序列化时Date会变成字符串，统一用字符串存储能避免类型不一致的隐患。
interface的高级用法：联合类型、交叉类型与泛型组件
组件的Props经常出现互斥属性的情况，比如一个按钮组件要么接收href作为链接按钮，要么接收onClick作为普通按钮，两者不能同时出现。interface的联合类型配合类型收窄可以优雅地解决这个问题：
interface BaseButtonProps {
size?: 'small' | 'medium' | 'large';
disabled?: boolean;
}
interface LinkButtonProps extends BaseButtonProps {
href: string;
target?: '_blank' | '_self';
}
interface ActionButtonProps extends BaseButtonProps {
href?: never; // 用never禁止出现该属性
onClick: () => void;
}
type ButtonProps = LinkButtonProps | ActionButtonProps;
通过extends继承公共属性，再用联合类型组合两种形态，配合never标记互斥属性，调用方传错时会得到清晰的报错提示。size属性的写法也值得学习，字面量联合类型'large'限定了取值范围，比单纯的string类型安全得多。
当组件需要复用且数据类型不固定时，泛型组件就派上用场了。比如一个通用的下拉选择组件，选项数据的类型由调用方决定：
interface SelectProps<T> {
options: T[];
value: T | undefined;
onChange: (value: T) => void;
getLabel: (item: T) => string;
}
function Select<T>({ options, value, onChange, getLabel }: SelectProps<T>) {
return (
<select
value={value !== undefined ? getLabel(value) : ''}
onChange={(e) => {
const found = options.find((item) => getLabel(item) === e.target.value);
if (found) onChange(found);
}}
>
{options.map((item) => (
<option key={getLabel(item)}>{getLabel(item)}</option>
))}
</select>
);
}
泛型interface配合泛型函数组件，使得Select组件在处理用户对象、商品对象等任意数据结构时都能保持完整的类型推导，onChange回调的参数类型会自动跟随options的元素类型，无需调用方额外断言。
interface与type如何选择以及常见踩坑点
很多初学者纠结interface和type的区别。两者在定义对象形状时几乎可以互换，但有几个差异点会影响选择：interface支持声明合并，同名interface会自动合并成员，这在扩展第三方库类型时很有用，但也意味着命名冲突不会报错；type支持联合类型、元组、条件类型等更灵活的运算能力。团队协作中建议统一规范，一般约定对象结构用interface，联合类型和工具类型用type，两者混用各取所长也是常见做法。
几个高频踩坑点需要留意。第一，事件对象的类型标注，React合成事件不要写成DOM原生的Event，输入框的change事件应该用React.ChangeEvent<HTMLInputElement>，表单提交事件用React.FormEvent<HTMLFormElement>。第二，默认值的处理，可选属性配合解构默认值时，interface中不要写成age?: number | undefined这种多余写法，直接在解构处给默认值即可：
interface GreetingProps {
name: string;
times?: number;
}
function Greeting({ name, times = 1 }: GreetingProps) {
return <p>{`你好，${name} `.repeat(times)}</p>;
}
第三，从props中回调出去的数据要保持类型一致，如果父组件传下来的回调参数是特定类型，子组件内部调用时传错类型会直接编译报错，这正是类型安全的价值所在。掌握这些interface的使用模式后，配合编辑器的智能提示，重构React组件时只要改一处类型定义，所有受影响的调用点会立刻标红，这种确定感是纯JavaScript项目无法提供的。
TypeScriptReactinterface修改时间：2026-09-16 13:58:41