TypeScript + React 组件属性之间的依赖
考察如下场景:
即 一开始会以为这里需要借助泛型等手段来构造一个复杂类型,其实大可不必。因为后来一想不防用 Union Types 试试,实践后证实,事情其实没想的那么复杂。 类型定义: type SelectProps = | { type: "native"; } | { type: "simulate"; appearance: "default" | "link" | "button"; }; 使用: function CustomSelect(props: SelectProps) { return <div>...</div>; } function App() { return ( <> {/* ✅ */} <CustomSelect type="native" /> {/* ❌ Type '{ type: "native"; appearance: string; }' is not assignable to type 'IntrinsicAttributes & SelectProps'. Property 'appearance' does not exist on type 'IntrinsicAttributes & { type: "native"; }'. */} <CustomSelect type="native" appearance="button" /> {/* ❌ Type '{ type: "simulate"; }' is not assignable to type 'IntrinsicAttributes & SelectProps'. Property 'appearance' is missing in type '{ type: "simulate"; }' but required in type '{ type: "simulate"; appearance: "default" | "link" | "button"; }'. */} <CustomSelect type="simulate" /> {/* ✅ */} <CustomSelect type="simulate" appearance="button" /> </> ); } |
The text was updated successfully, but these errors were encountered: |